1.官网 文档->使用手册->应用篇->跨平台方案->微信小程序 下载echarts包
2.将ec-canvas文件放入小程序根目录下
3.引入组件
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
4.wxml中
// force-use-old-canvas="true" 在滑动屏幕时抖动以及不跟随scroll滑动问题
<ec-canvas id="echart-pie" canvas-id="pie" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
5.js中使用
import * as echarts from '../../ec-canvas/echarts';
// 拼图
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
var option = {
backgroundColor: "transparent",
// 圆环中心
graphic:[{
type: 'circle',
left:"center",
top:"center",
shape: {
r: 20
},
style:{
// fill:"#00B6E5"
fill:{
type: 'linear',
x: 0,
y: 0,
x2:0,
y2:1,
colorStops: [{
offset: 0, color: '#76CCF5' // 0% 处的颜⾊
}, {
offset: 1, color: '#30ABE5' // 100% 处的颜⾊
}]
}
}
},{
type: 'circle',
left:"center",
top:"center",
shape: {
r: 15
},
style:{
fill:"#76CCF5"
}
},{
type:"text",
left:"center",
top:"center",
style: {
text: '5万',
fill: '#FFFFFF', //文字的颜色
}
}],
series: [{
label: {
normal: {
fontSize: 12,
color:"#282828"
}
},
labelLine: {
lineStyle: {
color: '#707070'
},
smooth: 0.1,
length: 10,
length2: 10
},
color: ["#FFC152", "#70AAFF", "#5DD6FC","#00D283", "#64EF91"],
type: 'pie',
center: ['50%', '50%'],
radius: ['15%', '40%'],
data: [{
value: 10,
name: '1'
}, {
value: 10,
name: '2'
}, {
value: 30,
name: '3'
}, {
value: 45,
name: '4'
}, {
value: 5,
name: '5'
}]
}]
};
chart.setOption(option);
return chart;
}
Page({
data: {
// 拼图
ec: {
onInit: initChart
}
},
onLoad: function (options) {
this.setData({
ec: {
onInit: initChart
}
})
}
})
效果图
