去官网下载整个项目:
https://github.com/ecomfe/echarts-for-weixin
拷贝ec-canvs文件夹到小程序里面
index.js里面的写法
import * as echarts from "../../components/ec-canvas/echarts"
const app = getApp();
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
backgroundColor: "#ffffff",
series: [{
label: {
normal: {
fontSize: 14
}
},
type: 'pie',
center: ['50%', '50%'],
radius: ['20%', '40%'],
data: [{
value: 55,
name: '北京'
}, {
value: 20,
name: '武汉'
}, {
value: 10,
name: '杭州'
}, {
value: 20,
name: '广州'
}, {
value: 38,
name: '上海'
}]
}]
};
chart.setOption(option);
return chart;
}
Page({
/**
* 页面的初始数据
*/
data: {
ec: {onInit: initChart}
}
})
index.json里面的写法
{
"usingComponents": {
"ec-canvas":"../../components/ec-canvas/ec-canvas"
}
}
页面的写法
<view class="chart">
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>
样式大小控制
.chart{
width: 100%;
height: 300px;
}
ec-canvas {width: 100%;height: 100%;}
效果图