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

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

结果:

相关推荐
拼图20912 小时前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序
m0_7401904613 小时前
小程序部分pai
小程序
wocwin13 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
2501_9159184116 小时前
iOS App 安全加固全流程:静态 + 动态混淆对抗逆向攻击实录
android·ios·小程序·https·uni-app·iphone·webview
魔都吴所谓18 小时前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts
2501_9159090619 小时前
iOS如何查看电池容量?理解系统限制与开发者级能耗调试方法
android·ios·小程序·https·uni-app·iphone·webview
三原1 天前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
Byte_Me1 天前
IoT 小程序:如何破解设备互联的碎片化困局?
物联网·小程序·iot
小徐_23331 天前
uni-app 弹窗总被父元素“绑架”?3招破局,H5/小程序/APP一招通杀!
前端·微信小程序·uni-app
JosieBook1 天前
【web应用】若依框架中,使用Echarts导出报表为PDF文件
前端·pdf·echarts