uniapp使用echarts的方法

1,907 阅读1分钟

小程序因为限制大小,所以我们在小程序使用ehcarts的时候应该去echarts官网定制charts.min.js,选择自己需要的图标,这样能减小包的大小。 echarts定制地址:echarts.apache.org/zh/builder.… 我们需要npm i echarts npm i mpvue-echarts 然后echarts只留下echarts.min.js mpver-echarts留下src中的echarts.vue和wx-canvas.js就行

image.png

然后在自己需要用echarts的页面引入两个文件

image.png

根据自己需要几个echarts来进行命名,我这里是用到了三个图表这里展示两个看看他们的区别 。js中return中的数据就是echarts中的option中的配置可以在echarts配置好在粘过来.image.png

setInterval(() => { chart1.setOption(this.getOptions(100, 100)); }, 1000)

这里如果不是实时变化的可以不添加定时器。 我在uniapp中我发现可以echart外面是可以包裹一个view在上面使用定位的。一般那种利用canvas写的图/插件,父级好像是不能使用定位和display之类的。