最近有几个小程序用了图表，让我很难受。那么我们来谈谈使用图表时遇到的问题。

我们用的是微信小程序版的ECharts它提供了小程序的本地组件，然后我们只需要在相关页面中引用该组件。

使用前准备

首先下载ecomfe/echart-for-weixin中的ec-canvas文件夹中的文件。

引用：然后在页面的json文件中引用。当然，也可以在app.json中作为全局组件编写。

{ '使用组件' : {'ec-canvas' : '././components/EC-canvas/EC-canvas ' } }复制代码注意：上面的EC-canvas引用组件名称不能随意更改，因为需要在打包的组件ec-canvas.js中找到节点

使用

我们必须手动设置图表的宽度和高度，否则页面只会显示空白。即设置的宽度和高度。集装箱。view class=' container ' ec-canvas ID=' my chart-DOM-bar ' canvas-ID=' my chart-bar ' EC=' { { EC } } '/EC-canvas/view copy code其中EC是我们页面中定义的一个对象，它使图表能够在页面加载后进行初始化和设置。初始化图表的方法如下：函数init chart (canvas，width，height，DPR) {constchart=ecards。init (canvas，null，{width : width，height 3360 height，device pixelatio : DPR//pixel })；canvas.setChart(图表)；//图表数据初始化varoption={.};chart.setOption(选项)；返回图表；}复制代码这在所有电子海图上都很常见。用户只需修改上述选项的内容即可更改图表。有关选项的使用方法，请参见电子艺界配置项目文档。不熟悉电子艺界的用户可以参考教程【电子艺界5分钟】(eCharts.baidu.com/tutorial.ht…电子艺界5分钟)。

因为我们通常需要延迟加载，也就是说，我们不能在得到数据后直接加载图表。

我们需要获取数据并重置选项，然后才能使用它。

代码低至：

**.wxml文件* *

view class=' echart-map ' view class=' echart-title '全国疫情新趋势/view EC-canvas wx : if=' { { HasGetOption } } ' class=' map-chart ' id=' map-chart ' canvas-id=' map-chart ' EC=' { { EC } } '/EC-canvas/view复制代码

.js 文件

//页面中需要引入欧共体-画布文件夹中的' echcrts.jsimport * as echarts from '././components/EC-canvas/echart '；page({ data : { HasGetOptions : false，ec: { //当我们设置lazyLoad为真实的的时候，我们需要手动初始化图表lazyLoad: true，} }，ready() { //在准备好的的时候获取组件的实例。否则可能获取不到。这个。echartinstance=this。selectcomponent(' .地图-图表');}，SetOption(){ let option={ title : {//text : '全国疫情新增趋势}，工具提示： { trigger : ' axis ' }，legend: { data: ['确诊] }，grid: { left: '3% '，right: '4% '，bottom: '3% '，containLabel: true }，xAxis: { type: ' category '，boundaryGap: false，data: [] }，yAxis: { type: 'value' }，series 3:[{ name 333: '确诊，键入： '线路'，stack: '总量，data: [120，132，101，134，90，230，210]，smooth: true } ] })，initChart(canvas，width，height，DPR){ const chart=echart。init(canvas，null，{ width: width，height: height，devicepixelrit : DPR//new })；canvas.setChart(图表);让选项=这个。getoption()；chart.setOption(选项);返回图表；}，getpage data(){ wx。请求({ 0.成功： (res)={ //获取到数据后再手动初始化这个。echartinstance。init(这个。初始化图表)；这个。setdata({ hasgetoptions : true，}) } }) }})复制代码在之前的版本中会出现这么一个问题：

因为最新基础库版本中支持画布2d，这个可以提升渲染性能，解决非同层渲染问题。

解决这个问题只需要在ec-cnavas.js的数据中将isUseNewCanvas设为真实的即可。

在 Taro 中使用

因为芋中可以使用微信中的原生组件，以及微信中的自定义组件。所以使用方法同微信小程序类似。

下载

页面引用

config={ navigationbartitetetext : '首页，使用组件： { 'ec-canvas': '././组件/EC-canvas/EC-canvas ' } }复制代码使用：状态={ EC : { LazyLoad : true，} }；//获取组件实例setCanvasRef=node=this。canvasref=noderender () { return ( View className='折线图ec-canvas id='价格图canvas-id='价格图ref={ this。setcanvasref } EC={ EC }//View)}复制代码然后在数据请求完后再图表初始化初始化。是再组件中定义的

这个。canvasref。init(这个。init chart)；复制代码