项目下载地址 GitHub 地址 https://github.com/ecomfe/echarts-for-weixin
将当前文件夹里的内容拷贝到项目中
目录:
json:
{"usingComponents": {"ec-canvas": "../components/ec-canvas/ec-canvas"}
}
wxml:
<ec-canvas id="eChart" canvas-id="eChart" ec="{{ ec }}"></ec-canvas>
js:
import * as echarts from '../components/ec-canvas/echarts.js';
Page({data: {ec: {lazyLoad: true,}},onReady: function () {const num = 77this.initchart(num)},initchart(data) {let ec_canvas = this.selectComponent('#eChart');ec_canvas.init((canvas, width, height, dpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr // new});canvas.setChart(chart);const option = {title: {text: ''},tooltip: {formatter: '{a} <br/>{b} : {c}%'},series: [{name: '评估', // 设置环形进度条的名称type: 'gauge',radius: '80%', // 设置环形的半径startAngle: -135, // 设置起始角度为左下角endAngle: -45, // 设置结束角度为右下角progress: {show: true, // 显示进度条width: 10, // 设置环形的宽度itemStyle: {// 使用 LinearGradient 设置渐变色color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: '#61E5AB' }, // 渐变起始颜色{ offset: 1, color: '#228D7D' } // 渐变结束颜色])}},detail: {valueAnimation: true, // 动画效果formatter: '{value}', // 只显示值fontSize: 30, // 设置字体大小color: '#333', // 设置字体颜色offsetCenter: [0, '40%'], // 设置文本位置},data: [{value: data}],axisLine: {},axisTick: {show: false},axisLabel: {show: false,distance: 50},splitLine: {show: false // 去掉分割线},}]};chart.setOption(option);return chart;})},
}
结果: