小程序中使用echarts，案例一：实现仪表盘

echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。

下载

echarts-for-weixin ec-canvas
如果你想使用最新版本的echarts可以将 ec-canvas 目录下的 echarts.js 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用自定义构建生成并替换 echarts.js。需要注意的是新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas=“true” 的情况下，使用新的 Canvas 2d（默认），使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。

使用

在项目根目录下创建components文件夹，将下载的ec-canvas放在components文件夹中。

详情可参考echart官网

使用ec-canvas实现仪表盘案例：

在components中创建gauge组件

<!--components/gauge/gauge.wxml-->
<view class="container">
  <ec-canvas class="ec-canvas" id="mychart-dom-gauge" isUseNewCanvas="{{ true }}" canvas-id="mychart-gauge" ec="{{ ec }}"></ec-canvas>
</view>

// components/gauge/gauge.js
import * as echarts from '../ec-canvas/echarts';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    speed: {
      type: Number,
      value: 0.00
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true, // 懒加载
    }
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.initchart(this.data.speed)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
    this.initchart(this.data.speed)
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 数据监听器
   */
  observers: {
    'speed': function(val){
      this.initchart(val)
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    loadchart(data){
      // 绑定组件（ec-canvas标签的id）
      let ec_canvas = this.selectComponent('#mychart-dom-gauge');
      ec_canvas.init((canvas,width,height,dpr)=>{
        const chart =echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // 解决模糊显示的问题
        })
        // echart表格的内容配置
        var option = {
          series: [{
            type: 'gauge',
            radius: '100%', //设置仪表盘的大小
            // 其他配置项
            min: 0,
            max: 1000,
            splitNumber: 4,
            startAngle: 225,//仪表盘最右边的度数
            endAngle: -45,//仪表盘最左边的度数
            axisLine: {
              // 其他配置项
              lineStyle: {
                color: [                    
                  [1, 'rgba(76,104,239,.4)']
                ],
                width: 0,//设置为0，仪表盘进度不显示
                shadowBlur: 0
              }
            },
            progress:{
              // show:false
              // show:true,
              width: 16
            },
            axisLabel: {
              fontFamily: "Roboto-Medium, Roboto",
              fontSize: 14,
              fontWeight: 500
            },
            axisTick: {
              // 仪表盘刻度线的相关样式设置
              splitNumber: 8,
              length: 16,
              lineStyle: {
                color: 'auto',
                width: 3,
                opacity: 0.8
              },
            },
            splitLine: { // 仪表盘刻度距离刻度线的距离
              length: 16,
              lineStyle: {
                color: ['rgba(76,104,239,0)'],
                width: 3,
                opacity: 0
              }
            },
            pointer:{//仪表盘指针的样式设置
              show:false
            },
            detail: {
              // 仪表盘详情配置
              offsetCenter: ['0', '0'],
              textStyle: {
                fontSize: 36
              },
              // lineHeight: 40,
              valueAnimation: true,
              formatter: function(value) {
                return "{value|" + value.toFixed(2) +"}\n{unit|Mbps}";//设置值加单位
              },
              rich: {
                value: {
                  fontSize: 36,
                  fontFamily: 'Roboto-Medium, Roboto',
                  fontWeight: 500,
                  color: "rgba(255,255,255, 1)"
                },
                unit: {
                  fontSize: 16,
                  fontWeight: 400,
                  fontFamily: 'PingFangSC-Regular, PingFang SC',
                  color: "rgba(255,255,255,0.6)",
                  padding: [25, 0, 0, 0]//设置单位的距离
                }
              }
            },
            data: [{
              value: data,
            }]
          }]
        }
        let baifen = option.series[0].data[0].value / option.series[0].max
        option.series[0].axisLine.lineStyle.color.unshift([baifen,'rgb(76,104,239)'])
        chart.setOption(option);
        return chart;
      })
    },
    initchart(data){
      // 传递后台数据到图表中，进行懒加载图表
      this.loadchart(data);
    },
  }
})

{
  "component": true,
  "usingComponents": {
    "ec-canvas": "/components/ec-canvas/ec-canvas"
  }
}

/* components/gauge/gauge.wxss */
.container,.ec-canvas{
  width: 100%;
  height: 100%;
}

在页面中使用gauge组件

{
  "usingComponents": {
    "my-gauge": "/components/gauge/gauge"
  }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    speed: 0
  },
})

<view class="gauge">
  <my-gauge speed="{{speed}}"></my-gauge>
</view>

.gauge{
  width: 570rpx;
  height: 570rpx;
}

至此实现仪表盘就结束了，当然你在项目中还是需要根据实际情形来处理。