Echart：实现堆叠柱状图与折线图混合，图例显示类别，x轴显示年份，双坐标轴

HaanLen

于 2022-06-16 20:51:28 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Echart 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/125323033

Echart 专栏收录该内容

27 篇文章

订阅专栏

这篇博客展示了如何使用ECharts创建一个包含柱状图和折线图的图表，用以分析不同品类（品类A、品类B、品类C、品类D和音乐）在2011年至2015年的数据变化。图表中，各品类的数据通过堆叠柱状图表示，同时用折线图展现了音乐这一类别的独立趋势。配置项包括轴标签、颜色、背景样式等，使得数据可视化清晰易读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

option = {
  legend: {
    show: true,
    formatter: function (name) {
      const list = {
        test_1: '品类A',
        test_2: '品类B',
        test_3: '品类C',
        test_4: '品类D',
        music: '音乐'
      };
      return list[name];
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['2011', '2012', '2013', '2014', '2015🍌'],
      axisTick: {
        // 轴刻度
        show: false
      },
      axisLabel: {
        // 轴文字
        color: '#A0B2D3',
        fontSize: 20
      },
      axisLine: {
        // 轴线
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      position: 'left'
    },
    {
      type: 'value',
      position: 'right'
    }
  ],
  series: [
    {
      name: 'test_1',
      data: [10, 5, 7, 7, 3],
      type: 'bar',
      yAxisIndex: 0,
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_4',
      data: [2, 4, 6, 10, 6],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_2',
      data: [1, 3, 1, 6, 8],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'test_3',
      data: [1, 20, 10, 22, 0],
      type: 'bar',
      stack: 'Mon',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      name: 'music',
      type: 'line',
      yAxisIndex: 1,
      data: [23, 12, 25, 31, 9],
    }
  ]
};