微信小程序使用echars循环加载柱状图、饼状图等

下载echarts微信版 地址：https://github.com/ecomfe/echarts-for-weixin

将ec-canvas目录 放在小程序项目目录中

在页面开启使用echarts

{
  "usingComponents": {
    "ec-canvas": "../../component/ec-canvas/ec-canvas"
  }
}

在wxml页面中，tuData是传给图的数据

<view class="ques-item" wx:for="{{itemanalysis}}" wx:key="*this" wx:for-index="index" wx:for-item="item">
        <view wx:if="{{item.type == 2}}" style="width:{{canvaswidth}}px;">
          <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" tuData="{{item.distribution}}" ec="{{ ec }}"></ec-canvas>
        </view>
        <view wx:else style="width:{{canvaswidth}}px;">
          <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" tuData="{{item.distribution}}" ec="{{ ec1 }}"></ec-canvas>
        </view>
      </view>

在js文件中引入echarts组件，并初始化方法，这部分写在page最外层

import * as echarts from '../../component/ec-canvas/echarts';
function initChart(canvas, width, height, data) {//这里多加一个参数
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart);
  var option = {
    series: [
      {
        name: '试题分析',
        type: 'pie',
        radius: ['25%', '40%'],
        animationType: 'scale',
        silent: true,
        labelLine: {
          normal: {
            show: true
          }
        },
        label: {
          formatter: '{b|{b}：}\n{per|{d}%}  ',
          backgroundColor: '#fff',
          borderColor: '#aaa',
          borderWidth: 0,
          borderRadius: 4,
          rich: {
            b: {
              fontSize: 10,
              lineHeight: 10
            },
            per: {
              fontSize: 10,
              align:'center'
            }
          }
        },
        data: data,
        color: ["#3DCCB4", "#FF6B66"]
      }
    ]
  }
  chart.setOption(option);
  return chart;
}
function initChartBar(canvas, width, height, data) {//这里多加一个参数
  var optionsArr = ["A","B","C","D","E","F","G","H","I","J","K"];
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart);
  var option = {
    grid: {
      height: '90',
      bottom: 25,
      top:20
    },
    xAxis: {
      type: 'category',
      data: optionsArr.slice(0,data.length),
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      show: false,
      scale: true
    },
    series: [{
      data: data,
      barWidth: 10,
      itemStyle: {
        normal: {
          color: function (params) {
            console.log(params)
            if(params.data.right)
              return '#3DCCB4'
            else 
              return '#FF6B66'
          },
        }

      },
      type: 'bar'
    }, {
        data: [100, 100, 100, 100, 100, 100, 100],
        type: 'bar',
        barWidth: 10,
        barGap:'-100%',
        barCategoryGap:'40%',
        itemStyle:{
          normal: { color:'rgba(61, 204, 180, 0.1)'}
        }
      }]
  };
  chart.setOption(option);
  return chart;
}

在page的data中

data: {
    ec: {
      onInit: initChart
    },
    ec1: {
      onInit: initChartBar
    },
    itemanalysis:[],
    scrollHeight: wx.getSystemInfoSync().windowHeight-100,
    canvaswidth: wx.getSystemInfoSync().windowWidth-150,
  },