微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图

微信小程序使用echarts，实现左右双Y轴，动态获取数据，生成折线图
本来使用的是wxcharts，但发现实现不了左右双y轴的效果，就换成echarts

效果图展示

要实现这样的效果，需要以下几步：
（1）去github下载插件，放进自己的项目里
呐，链接 ===>点击这里
只需要将名称是ec-canvas的文件夹放进自己项目里。
像这样：

图片发自App

（2）分别写小程序的四个文件

①

//echart.json
{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

②

③

/* echart.wxss*/
.container{
  margin: 0;
  padding: 0
}

④
echart.js
这里分步写：
第一步：导入 echarts 插件

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

第二步：写在Page外的方法

function echart(chart, leftData, rightData) {//leftData是坐标系左边y轴，rightData是右边y轴
  var option = {
    //网格
    grid: {
      bottom: 80,
      show: true,
      // containLabel: true
    },
    //图例
    legend: {
      data: [{
          name: 'leftData',
          textStyle: { //设置颜色
            color: '#6076FF',
            fontSize: '14',
          }
        },
        {
          name: 'rightData',
          textStyle: {
            color: '#FFC560',
            fontSize: '14',
          }
        }
      ],
      x: 'left',
      bottom: 15,
      left: 30
    },
    //x轴
    xAxis: {
      type: 'category',
      boundaryGap: false,
      disableGrid: true, //绘制X网格
      data: ['', '', '', '', '', '', '', '', ''],
      splitLine: {
        show: true,
        //  改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#DDDDDD']
        }
      },
      //去掉刻度
      axisTick: {
        show: false
      },
      //去掉x轴线
      axisLine: {
        show: false
      },
    },
    //y轴
    yAxis: [{
        name: 'mph',
        type: 'value',
        min: 0,
        // max: 40,
        //y标轴名称的文字样式
        nameTextStyle: {
          color: '#FFC560'
        },
        //网格线
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#DDDDDD']
          }
        },
        //去掉刻度
        axisTick: {
          show: false
        },
        //去掉y轴线
        axisLine: {
          show: false
        },
      },
      {
        name: 'g',
        type: 'value',
        // max: 4,
        min: 0,
        nameTextStyle: {
          color: '#6076FF'
        },
        //去掉刻度
        axisTick: {
          show: false
        },
        //去掉y轴线
        axisLine: {
          show: false
        },

      }
    ],

    series: [{
        name: 'leftData',
        type: 'line',
        animation: true, //动画效果
        symbol: 'none',
        //折线区域
        areaStyle: {
          //渐变颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#6076FF' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(96,118,255,0.1)' // 100% 处的颜色
            }],
            global: false, // 缺省为 false
          },
        },
        //折线宽度
        lineStyle: {
          width: 2
        },
        color: '#6076FF',
        data: leftData // 后台传过来的动态数据
        //设置固定的数据
        // data: [
        //   23, 30, 20, 23, 30, 26, 20, 25, 25
        // ] 
      },
      {
        name: 'rightData',
        type: 'line',
        yAxisIndex: 1,
        animation: true,
        symbol: 'none',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#FFC560' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(255, 197, 96,0.3)' // 100% 处的颜色
            }],
            global: false, // 缺省为 false
          },
        },
        lineStyle: {
          width: 2
        },
        color: '#FFC560',
        data: rightData,//后台传过来的动态数据
        //设置固定的数据
        // data: [
        //   2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
        // ]
      }]
  }
}

第三步：写在Page里的方法，（包括onLoad(),初始化）

/**
 * 页面的初始数据
 */
data: {
  ec: {
    lazyLoad: true //初始化加载
  }
},
onLoad: function (options) {
  let that = this;
  this.oneComponent = this.selectComponent('#mychart');
  let url = "xxxxx";
  let params = {
    "openId": options.id,
  };
wx.request({
    url: "xxxx",
    method: 'POST'
    data: params,
    header: header,
    success: (res) => {
     that.setData({
       leftData: xxx,//从后台获取的数据
       rightData: xxxx //从后台获取的数据
   });
    },
  //给图表加上数据
  that.initGraph(that.data.leftData, that.data.rightData)
  })
}

初始化图表

initGraph: function (leftData, rightData) {
  this.oneComponent.init((canvas, width, height) => {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    initChart(chart, leftData, rightData);
    this.chart = chart;
    return chart;
  });
}

到这就搞定啦