ECharts 示例——双Y轴(一)

在使用echarts中,我们经常会用到双y轴去展示数据,有时候,我们可能需要自己去设置,具体使用某一个y轴去展示某一个具体的数据。

实现代码:

option = {
  legend: {
    data: ['销量(支)', '营业额(万元)']
  },
  dataset: {
    source: [
      ['2020年12月', 13700, 287],
      ['2021年1月', 44820, 941],
      ['2021年2月', 92850, 1950],
      ['2021年3月', 1775800, 37291],
      ['2021年4月', 3620600, 75825],
      ['2021年5月', 6020600, 139000]
    ]
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '销量(支)',
      splitLine: {
        show: false
      },
      nameLocation: 'middle',
      nameGap: 70
    },
    {
      type: 'value',
      name: '营业额(万元)',
      splitLine: {
        show: false
      },
      nameLocation: 'middle',
      nameGap: 50
    }
  ],
  series: [
    {
      name: '销量(支)',
      type: 'bar',
      color: '#5470C6'
    },

    {
      name: '营业额(万元)',
      type: 'line',
      yAxisIndex: 1,
      color: '#FC8452',
      label: {
        position: [-35, -20],
        show: true,
        fontSize: 14,
        color: '#FC8452'
      }
    }
  ]
};

效果图:

ECharts 示例——双Y轴(一)_第1张图片

你可能感兴趣的:(ECharts,echarts)