小程序引入的echarts过大如何解决_微信小程序中使用Echarts

我们首先下载echarts微信版,下载地址为：https://github.com/ecomfe/echarts-for-weixin，然后我们把下载好的文件放在我们的小程序中，小编是建立了一个libs用来存储这些引用的库。json文件中的配置："usingComponents": {

"ec-canvas": "/libs/ec-canvas/ec-canvas"

}js中引用let echarts = require('../../libs/ec-canvas/echarts.js');wxml中使用

使用

我们在data中定义echarts的初始化数据：echarts: {

userdatafenbu: {

option: {

lazyLoad: true,

},

form: {

year: new Date().getFullYear()

}

},

addatatrend: {

option: {

lazyLoad: true

},

}

}

option ： {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

在函数里使用let that = this;

let ec = that.selectComponent('#ec-accessdata');

if (!ec) {

return;

}

ec.init(function(canvas, width, height) {

// 获取组件的 canvas、width、height 后的回调函数

// 在这里初始化图表

const chart = echarts.init(canvas, 'wonderland', {

width: width,

height: height

});

chart.setOption(that.data.option);

// 注意这里一定要返回 chart 实例，否则会影响事件处理等

return chart;

});