1、进入github地址:https://github.com/ecomfe/echarts-for-weixin,下载到本地
2、将ec-canvas文件夹拷贝到自己的项目根目录下
3、打开需要引入echarts的页面
4、配置
(1)在index.json中加入
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
(2)index.js中
import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
});
canvas.setChart(chart);
var option = {..........}; //需要引入的图表的配置项
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
},
}
})
(3)index.wxml中
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
(4)index.wxss中
//设置container的长和宽,使图表有个初始化值
.container{
width: 100%;
height: 100vh;
}
ec-canvas {
margin-top: 20rpx;
width: 90%;
height: 50vh;
}