Echarts官方文档:http://www.echartsjs.com/examples/
Echars文件:
链接:https://pan.baidu.com/s/1NGKs4JKTPOiWjtrFpI6pDw
提取码:472z
wxml:
<ec-canvas id="mychart-dom-bar" class='mychart-bar' canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
json:
"usingComponents": {
"ec-canvas": "../../lib/ec-canvas/ec-canvas"
}
js:
import * as echarts from '../../lib/ec-canvas/echarts';
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
ec: {
lazyLoad: false // 延迟加载
}, //饼图
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function() {
this.piechartsComponnet = this.selectComponent('#mychart-dom-bar'); //饼图
},
//初始化图表--饼图
init_pieCharts: function() {
this.piechartsComponnet.init((canvas, width, height) => {
// 初始化图表
const pieChart = echarts.init(canvas, null, {
width: width,
height: height
});
pieChart.setOption(this.getPieOption());
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return pieChart;
});
},
//饼图
getPieOption: function() {
var option = {
tooltip: {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
color: ['#56cbff', '#ff6300'],
calculable: true,
series: [{
name: '分类',
type: 'pie',
center: ['50%', '50%'],
radius: 80,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
formatter: function(params) {
return (params.percent - 0).toFixed(0) + '%'
}
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true,
formatter: "{b}\n{d}%"
}
}
},
data: [{
value: 99,
name: 'A'
},
{
value:1,
name: 'B'
}
]
}]
};
return option;
},
});