1、首先要想在微信小程序中使用Echarts,就要先去下载Echarts包并引入,
下载地址:https://github.com/ecomfe/echarts-for-weixin
引入与pages同级
2、你要在哪一个页面中使用Echarts,就要在当前页面的json文件中做一下配置:
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
3、配置完成后就可以在页面中使用了
1.wxml中 2.wss中 3.js中
ec-canvas {
width: 100%;
height: 100%;
}
.container_echarts {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
import * as echarts from '../../ec-canvas/echarts';
var chart = null;
function initChart(canvas, width, height, option) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = option;
chart.setOption(option);
return chart;
}
Page({
/**
* 页面的初始数据
*/
data: {
ec: {}
},
echartInit(e) {
var option = {
backgroundColor: "#ffffff",
color: ["#CC0000", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C"],
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: [0, '60%'],
data: [{
value: 55,
name: '虎山牌'
}, {
value: 20,
name: '天马牌'
}, {
value: 10,
name: '虎球牌'
}, {
value: 20,
name: '青山虎牌'
}, {
value: 38,
name: '光宇牌'
}, ],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 2, 2, 0.3)'
}
}
}]
};
initChart(e.detail.canvas, e.detail.width, e.detail.height, option);
}
})
这样就可以了,这是初始化的图表.