echarts 多数据+双y轴 折线图

本示例将有 6组 数据要显示到echarts图中，以下代码展示 多数据双y轴echarts制作全过程

var chartEle = document.getElementById('box');
var chart = echarts.init(chartEle)
// 预制好 series容器
var series = [
    {
      name: 'a1',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' A';
        }
      },
      data: [] 
    },
    {
      name: 'a2',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' A';
        }
      },
      data: [] 
    },
    {
      name: 'a3',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' A';
        }
      },
      data: [] 
    },
    // yAxisIndex: 1   多轴时指定轴，默认为 0
    {
      name: 'v1',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' V';
        }
      },
      data: []
    },
    {
      name: 'v2',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' V';
        }
      },
      data: []
    },
    {
      name: 'v3',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' V';
        }
      },
      data: []
    },
  ]
// 处理数据，将数据处理规范
var time = []
for(var i = 0,j = data.length;i < j;i++) {
    series[0].data.push(data[i].a1.toFixed(2))
    series[1].data.push(data[i].a2.toFixed(2))
    series[2].data.push(data[i].a3.toFixed(2))
    series[3].data.push(data[i].v1.toFixed(2))
    series[4].data.push(data[i].v2.toFixed(2))
    series[5].data.push(data[i].v3.toFixed(2))
    var num = data[i].time.indexOf('.')
    if(num != -1) {
        time.push(data[i].time.replace("T"," ").substring(0, data[i].time.indexOf('.')))    
    } else {
        time.push(data[i].time.replace("T"," "))
    }
}
// 找到两个y轴的最大最小值
var maxyAxisL = Math.ceil(Math.max(...[Math.max(...series[0].data),Math.max(...series[1].data),Math.max(...series[2].data)]))
var maxyAxisR = Math.ceil(Math.max(...[Math.max(...series[3].data),Math.max(...series[4].data),Math.max(...series[5].data)]))
var minyAxisL = Math.floor(Math.min(...[Math.min(...series[0].data),Math.min(...series[1].data),Math.min(...series[2].data)]))
var minyAxisR = Math.floor(Math.min(...[Math.min(...series[3].data),Math.min(...series[4].data),Math.min(...series[5].data)]))
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
			left: '20',
			right: '20',
			containLabel: true
		},
  dataZoom: {
    type: 'inside'
  },
  xAxis: [
    {
      type: 'category',
      data: time.map(function (str) {
                return str.replace(' ', '\n');
            }),
    }
  ],
  yAxis: [
    {
      type: 'value',
    //   name: 'A',
      min: minyAxisL,
      max: maxyAxisL,
      // interval:   间隔
      interval: (maxyAxisL-minyAxisL)/10,
      axisLabel: {
        formatter: '{value} A'
      }
    },{
      type: 'value',
    //   name: 'V',
      min: minyAxisR,
      max: maxyAxisR,
      interval: (maxyAxisR-minyAxisR)/10,
      axisLabel: {
        formatter: '{value} V'
      }
    }
  ],
  series: series
};
// 把配置好的数据给实例对象
chart.setOption(option)
window.addEventListener("resize", function() {
    chart.resize()
})
chart.resize()