微信小程序中使用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;
    })
  },
}

结果:

相关推荐
徊忆羽菲9 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
HERR_QQ20 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app