微信小程序框架wepy引入echarts插件（已解决）

看到很多种方法，但是都没有很好的兼容，有的只支持绘制一个canvas图表，下面这种方法亲测有效，wepy中可以成功用小程序版本echarts绘制图表，并且在用一个页面绘制多个canvas图表。

首先，在微信小程序版本echarts作者官方github下载插件（https://github.com/ecomfe/echarts-for-weixin），保存在本地

然后创建一个.wpy文件，下面我就直接上代码了。

<template>
    <view>
        <ec-canvas id="chart1" canvas-id="chart1" ec="{{ ec }}" class="ec-canvas"></ec-canvas>
        <ec-canvas id="chart2" canvas-id="chart2" ec="{{ ec }}" class="ec-canvas"></ec-canvas>
    </view>
</template>

<script>
  import wepy from 'wepy'
  import * as echarts from '@/libs/ec-canvas/echarts'

  let chart = null;

  export default class Index extends wepy.page {
    config = {
      "usingComponents": {
        "ec-canvas": "../libs/ec-canvas/ec-canvas"
      }
    }

    components = {
    }

    data = {
      ec: { lazyLoad: true }
    }

    computed = {
    }

    methods = {
    }

    onLoad() {

    }

    onReady () {
      console.log(this.$wxpage.selectComponent('#chart1'))
      this.$wxpage.selectComponent('#chart1').data.ec.onInit = initChart1
      this.$wxpage.selectComponent('#chart1').init()

      this.$wxpage.selectComponent('#chart2').data.ec.onInit = initChart2
      this.$wxpage.selectComponent('#chart2').init()
    }
  }

  function initChart1(canvas, width, height) {
    chart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(chart);

    var option = {
      color: ['#37a2da', '#32c5e9', '#67e0e3'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        confine: true
      },
      legend: {
        data: ['热度', '正面', '负面']
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          axisTick: { show: false },
          data: ['汽车之家', '今日头条'],
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        }
      ],
      series: [
        {
          name: '热度',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'inside'
            }
          },
          data: [300, 270, 340, 344, 300, 320, 310],
          itemStyle: {
            // emphasis: {
            //   color: '#37a2da'
            // }
          }
        },
        {
          name: '正面',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true
            }
          },
          data: [120, 102, 141, 174, 190, 250, 220],
          itemStyle: {
            // emphasis: {
            //   color: '#32c5e9'
            // }
          }
        },
        {
          name: '负面',
          type: 'bar',
          stack: '总量',
          label: {
            normal: {
              show: true,
              position: 'left'
            }
          },
          data: [-20, -32, -21, -34, -90, -130, -110],
          itemStyle: {
            // emphasis: {
            //   color: '#67e0e3'
            // }
          }
        }
      ]
    };

    chart.setOption(option);
    return chart;
  }

  function initChart2(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);

    var option = {
      title: {
        text: '测试下面legend的红色区域不应被裁剪',
        left: 'center'
      },
      color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
      legend: {
        data: ['A', 'B', 'C'],
        top: 50,
        left: 'center',
        backgroundColor: 'red',
        z: 100
      },
      grid: {
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
        // show: false
      },
      series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        data: [18, 36, 65, 30, 78, 40, 33]
      }, {
        name: 'B',
        type: 'line',
        smooth: true,
        data: [12, 50, 51, 35, 70, 30, 20]
      }, {
        name: 'C',
        type: 'line',
        smooth: true,
        data: [10, 30, 31, 50, 40, 20, 10]
      }]
    };

    chart.setOption(option);
    return chart;
  }

</script>

<style lang="less">

</style>

效果如图所示：