uCharts常用图表示例

最近又做了一些uniapp,之前也做过,但是还没记录过关于uniapp的东西,所以这篇先来上一些我最近项目中做的一些常用的图表示例 

先上几个官方网址 

uniapp官网

DCloud插件市场

uCharts官网

uCharts官网示例

uCharts官方文档  

uniapp中使用uCharts提供了两种方式,一种是原生方式,另一种是组件方式。我这里使用的是组件方式,这种使用起来好像很方便一些

1. 使用 HBuilderX 导入插件

进入:秋云 ucharts echarts 高性能跨全端图表组件 

导入到项目之后就可以看到项目根目录下的uni_modules 下会有qiun-data-charts的包

这样就可以,其他我们不需要做什么操作,直接在组件页面中即可使用 

2. 图表示例

我这里也是把图表单独封装一个组件,下面贴的完整代码,引入直接使用,样式可以自定义调整,往里面传入图表数据即可 

示例一 

uCharts常用图表示例_第1张图片



示例二 

uCharts常用图表示例_第2张图片



示例三

uCharts常用图表示例_第3张图片  



示例四 

uCharts常用图表示例_第4张图片


示例五 

uCharts常用图表示例_第5张图片



示例六 

uCharts常用图表示例_第6张图片



示例七 

uCharts常用图表示例_第7张图片


你可能感兴趣的:(前端,数据可视化,uniapp,前端,uniapp)