小程序多个echars_小程序引入多个e-charts

小程序引入e-charts图表

这里是狗尾草第一次发表掘金文章，日后望各位大佬多多支持~

前言：运营助手，见名知意，没有图表数据的展示，看上去是有多空白。因此，俺们UI做了很好的交互，一个页面来了4个e-charts图表，且基本都不一样。身为一个职业前端，怎么能猥琐呢？

干就完了~

实现思路

因为一个页面要引入多个图表，所以需要对e-charts图表进行封装。然鹅问题来了，怎么引入呢？

为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。

其中，ec-canvas 是ECharts提供的组件，其他文件是如何使用该组件的示例。

ec-canvas 目录下有一个 echarts.js，默认ECharts会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小

这里引入，我们只需要引入ec-canvas目录到小程序项目即可。

单页面引入

一个页面只需要引入一个图表的，我们在相关的js文件书写即可。这样引入比较简单，也可以减少不必要的很多问题。但只限于一个页面引入一个图表 ，如果有一种情况，正如狗尾草所要完成的，一个页面4个图表，各不相同。则就需要封装组件了

话不多说，直接撸~

index.json配置

{"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}

}

index.wxml

index.js

functioninitChart(canvas, width, height) {

const chart= echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(chart);

​var option ={

...

};

chart.setOption(option);returnchart;

}

​

Page({

data: {

ec: {

onInit: initChart

}

}

});

以上为单页面引入图表，需要