多y轴折线图

var colors = ['#FC6310', '#21AD7F', '#3662EC'];
option = {
  title: {
    text: 'Gradient Stacked Area Chart'
  },
  color: colors,
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    right: '20%'
  },
  toolbox: {
    feature: {
      dataView: {
        show: false,
        readOnly: false
      },
      restore: {
        show: false
      },
      saveAsImage: {
        show: false
      }
    }
  },
  legend: {
    // orient: 'vertical',
    x: 'right', //可设定图例在左、右、居中
    y: 'top', //可设定图例在上、下、居中
    padding: [10, 0, 0, 0], //可设定图例[距上方距离,距右方距离,距下方距离,距左方距离]
    position: 'right',
    data: ['设备新增数量', '产品新增数量', '厂商新增数量']
  },
  xAxis: [
    {
      type: 'category',
      // axisTick: {
      //   alignWithLabel: false
      // },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ECEDF0', //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
          width: 1, //y轴线的宽度
          type: 'dashed' //y轴线为实线
        }
      },
      data: [
        '2016-01',
        '2016-02',
        '2016-03',
        '2016-04',
        '2016-05',
        '2016-06',
        '2016-07',
        '2016-08',
        '2016-09',
        '2016-10',
        '2016-11',
        '2016-12'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '设备新增数量',
      // 居中
      nameLocation: 'middle',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 50,
      min: 0,
      max: 11000,
      position: 'left',
      axisLine: {
        lineStyle: {
          color: colors[2]
        },
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      },
      // splitLine: {
      //   lineStyle: {
      //     type: 'solid',
      //     color: '#bbb'
      //   }
      // },
      splitLine: {
        // show: true,
        lineStyle: {
          color: '#ECEDF0', //y轴线的颜色(若只设置了y轴线的颜色,未设置y轴文字的颜色,则y轴文字会默认跟设置的y轴线颜色一致)
          width: 1, //y轴线的宽度
          type: 'dashed' //y轴线为实线
        }
      },
      axisTick: {
        show: true
      }
    },
    {
      type: 'value',
      name: '产品新增数量',
      // 居中
      nameLocation: 'middle',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 50,
      min: 0,
      max: 200,
      position: 'right',
      axisLine: {
        lineStyle: {
          color: colors[0]
        },
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      name: '厂商新增数量',
      // 居中
      nameLocation: 'middle',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 40,
      min: 0,
      max: 200,
      position: 'right',
      offset: 80,
      axisLine: {
        lineStyle: {
          color: colors[1]
        },
        show: true
      },
      axisLabel: {
        formatter: '{value}'
      },
      axisTick: {
        show: true
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '设备新增数量',
      type: 'line',
      data: [
        10000, 2000, 1065, 3620, 6530, 9510, 2000, 3002, 3580, 5063, 1520, 9000
      ]
    },
    {
      name: '产品新增数量',
      type: 'line',
      yAxisIndex: 1,
      data: [10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30, 150]
    },
    {
      name: '厂商新增数量',
      type: 'line',
      data: [1200, 1850, 206, 36, 255, 1800, 1600, 4547, 9958, 69, 93, 150]
    }
  ]
};

 


版权声明:本文为qq_38244874原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。