微信小程序中使用ECharts 并且动态设置数据

夜猫的兔子2025-04-12 13:20

项目下载地址 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 = 77
    this.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;
    })
  },
}

结果：