ECharts 示例——双Y轴（一）

D_jing20

已于 2022-04-15 17:32:56 修改

阅读量1.9w

点赞数 5

分类专栏： ECharts 文章标签： echarts

于 2022-04-15 17:28:17 首次发布

本文链接：https://blog.csdn.net/u012320487/article/details/124199687

版权

ECharts 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

在使用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'
      }
    }
  ]
};

效果图：