微信小程序中使用echarts(多个多环状图示列)

主要用到的插件ec-canvas 所有的参数基本都和百度那边的echarts相同，部分功能可能小程序上面是没有滴
GitHup地址：一个完整的小程序下载下来可以直接运行

注意在使用时，因为ec-canvas的性能问题有可能会渲染失败，在确保获取到数据之后也要使用setTimeOut去延迟渲染，确保可以渲染成功
为了防止渲染失败或者卡死 ：建议在要渲染的时候先把 数据处理完之后一次性渲染，防止重复渲染，就目前而已性能真的不高，也有点点不稳定，当时是这是一个很不错的图表解决方案

这是我处理完接口之后的数据

<BarEcharts wx:if="{{showBar}}" tuiGet="{{tuiGet}}" heGet="{{heGet}}" chaoGet="{{chaoGet}}" />

这是我的部分代码

// miniprogram_npm/barEcharts/barEcharts.js

let context = null
import * as echarts from '../../ec-canvas/echarts';

let chart = null;
var option = {}
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });

  canvas.setChart(chart);

  option = {
  };

  chart.setOption(option);
  return chart;
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tuiGet: {
      default: [0, 0, 0, 0],
      type: Array,
    },
    heGet: {
      default: [0, 0, 0, 0],
      type: Array,
    },
    chaoGet: {
      default: [0, 0, 0, 0],
      type: Array,
    }
  },
  observers: {
    tuiGet(tuiGet) {
      setTimeout(() => {
        function set(i, x, name, a, b, c, all,dw) {
          console.log(i, x, name, a, b, c, all)
          return [
            {
              name: '推荐摄入量',
              type: 'pie',
              animation: false,
              radius: ['15%', '18%'],
              center: [x * i + '%', '60%'],
              tooltip:{
                show:c > 0 ? true : false,
                formatter: function(params){
                  console.log(params)
                  return name + params.seriesName + '\n' +  ""+ c.toFixed(2) + dw;
                },
                textStyle: {
                  fontSize: 10,
                  color: '#E0AE64',
                },
              },
              label: {
                animation: false,
                normal: {
                  show: true,
                  animation: false,
                  position: 'center',
                  formatter: function () {
                    return name
                  },
                  textStyle: {
                    fontSize: 10,
                    color: '#fff',
                  },
                  roam: false
                },
                roam: false
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: '20',
              //     fontWeight: 'bold'
              //   }
              // },
              data: [
                {
                  value: c,
                  itemStyle: {
                    normal: {
                      color: '#CC9F5B'
                    }
                  }
                },
                // {
                //   value: c,
                //   itemStyle: {
                //     normal: {
                //       color: 'transparent'
                //     }
                //   }
                // }
              ]
            },
          {
            name: '已摄入量',
            type: 'pie',
            radius: ['21%', '24%'],
            center: [x * i + '%', '60%'],
            label: {
              animation: false,
              normal: {
                show: true,
                animation: false,
                position: 'center',
                formatter: function () {
                  return name
                },
                textStyle: {
                  fontSize: 10,
                  color: '#fff',
                },
                roam: false
              },
              roam: false
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '20',
            //     fontWeight: 'bold'
            //   }
            // },
            tooltip:{
              show:b > 0 ? true : false,
              formatter: function(params){
                console.log(params)
                return name + params.seriesName + '\n' +  ""+ b.toFixed(2)  + dw;
              },
              textStyle: {
                fontSize: 10,
                color: '#56D053',
              },
            },
            data: [
              {
                value: b - c > 0 ? c : b,
                itemStyle: {
                  normal: {
                    color: '#56D053'
                  }
                }
              },
              {
                value: b - c > 0 ? 0 : c - b,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          },
         
          {
            name: '超食摄入量',
            type: 'pie',
            animation: false,
            radius: ['27%', '30%'],
            center: [x * i + '%', '60%'],
            
            hoverAnimation:false,
            //环的位置
            // label: {
            //   show: true,
            //   position: 'center',
            //   // normal: { // 显示的位置
            //   //     position: 'inner'
            //   // }
            // },

            label: {
              normal: {
                show: true,
                animation: false,
                position: 'center',
                formatter: function () {
                  return name
                },
                textStyle: {
                  fontSize: 10,
                  color: '#fff',
                },
                roam: false
              },
              roam: false
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            tooltip:{
              show:a > 0 ? true : false,
              formatter: function(params){
                console.log(params)
                return name + params.seriesName + '\n' +  ""+ a.toFixed(2)  + dw;
              },
              textStyle: {
                fontSize: 10,
                color: '#F31930',
              },
            },
            data: [
              {
                value: a, //需要显示的数据
                itemStyle: {
                  normal: {
                    color: '#F31930'
                  }
                }
              },
              {
                value: all - a,
                //不需要显示的数据，颜色设置成和背景一样
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ],
          },
        ]
        }
        try {
          var pass_rate = 70, average = 60, total = 100;
          chart.setOption(
            {
              title: {
                text: '今日饮食摄入量对比图',
                textStyle: {
                  fontSize: 18
                  , fontWeight: 'normal'
                  , color: '#CC9F5A'
                }
                , left: 'center'
                , top: 12
              },
              animation: false,

              color: ['#32A8FF'],
              tooltip: {
                show: false,
                // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                // }

              },
              grid: {
                bottom: '0%',
                right: "12%",
              },
              legend: {
                orient: 'horizontal',
                data: ['推荐摄入量', '已摄入量', '超食摄入量'],
                textStyle: {
                  fontSize: '10',
                  color: '#DAD5CE',
                },
                itemWidth: 20,
                itemHeight: 4,
                top: 38,
                left: 'center'
              },
              //  color: ['#85b6b2', '#6d4f8d'],

              color: ['#CC9F5B', '#55D150', '#F6172E'],
              series: [
                ...set(1, 13.4,'热量',this.data.chaoGet[0],this.data.heGet[0],this.data.tuiGet[0],this.data.tuiGet[0]+this.data.heGet[0]+this.data.chaoGet[0],'kcal'),
                ...set(2, 19,'蛋白质',this.data.chaoGet[1],this.data.heGet[1],this.data.tuiGet[1],this.data.tuiGet[1]+this.data.heGet[1]+this.data.chaoGet[1],'g'),
                ...set(3, 20.7,'碳水',this.data.chaoGet[2],this.data.heGet[2],this.data.tuiGet[2],this.data.tuiGet[2]+this.data.heGet[2]+this.data.chaoGet[2],'g'),
                ...set(4, 21.5,'脂肪',this.data.chaoGet[3],this.data.heGet[3],this.data.tuiGet[3],this.data.tuiGet[3]+this.data.heGet[3]+this.data.chaoGet[3],'g'),

              ]
            });
        } catch (error) {
          console.log(error)
        }

      }, 1000)
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },
  created() {
    context = this
  },
  onReady() {
    setTimeout(() => {
      // 获取 chart 实例的方式
      // console.log(chart)

    }, 1000);
  }
})