Echarts 横向堆叠柱状图 + markLine：在图表中集成标记线，轻松实现数据可视化与精准解读

2024-01-24 12:15:20

Echarts 作为一款强大的数据可视化库，以其丰富的图表类型、灵活的配置项和便捷的操作方式，备受开发者的青睐。在Echarts中，横向堆叠柱状图是一种常见的图表类型，它能够直观地展示不同类别的数值在不同时间点上的变化情况。而markLine则是Echarts中的一种特殊的标记线，可以用来在图表中突出显示特定的数据点或趋势。

一、Echarts 横向堆叠柱状图 + markLine的优势

直观展示数据变化趋势： 横向堆叠柱状图能够清晰地展示不同类别的数值在不同时间点上的变化趋势，便于用户快速了解数据之间的差异。
标记重点数据： 通过markLine标记线，可以突出显示特定数据点或趋势，使读者能够快速关注到图表中的关键信息。
支持多种数据类型： Echarts支持多种数据类型，包括数值型、字符串型、日期型等，可以满足不同类型数据的可视化需求。
丰富的图表样式： Echarts提供丰富的图表样式，包括柱状图、折线图、饼图等，用户可以根据自己的需求选择合适的图表类型。

二、Echarts 横向堆叠柱状图 + markLine的应用场景

Echarts 横向堆叠柱状图 + markLine广泛应用于各种数据分析、统计和报告展示场景，例如：

销售业绩分析： 通过横向堆叠柱状图展示不同产品的销售业绩，并使用markLine标记线突出显示销售目标线，便于管理者快速了解销售情况并制定相应的策略。
金融数据分析： 通过横向堆叠柱状图展示不同股票或基金的收益率，并使用markLine标记线突出显示行业平均收益率线，便于投资者了解市场走势并做出投资决策。
疫情数据分析： 通过横向堆叠柱状图展示不同地区的疫情确诊人数、治愈人数和死亡人数，并使用markLine标记线突出显示疫情高峰期，便于政府部门及时采取防控措施。

三、Echarts 横向堆叠柱状图 + markLine的实现步骤

准备数据

const data = [
  {
    name: '产品A',
    data: [100, 200, 300, 400, 500]
  },
  {
    name: '产品B',
    data: [200, 300, 400, 500, 600]
  },
  {
    name: '产品C',
    data: [300, 400, 500, 600, 700]
  }
];

创建Echarts实例

const myChart = echarts.init(document.getElementById('chart'));

设置图表选项

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '产品A',
      type: 'bar',
      stack: '总量',
      data: data[0].data
    },
    {
      name: '产品B',
      type: 'bar',
      stack: '总量',
      data: data[1].data
    },
    {
      name: '产品C',
      type: 'bar',
      stack: '总量',
      data: data[2].data
    }
  ]
};

将图表选项注入Echarts实例

myChart.setOption(option);

添加markLine标记线

const markLineOption = {
  series: [
    {
      name: '平均值',
      type: 'markLine',
      data: [
        {
          name: '平均值',
          yAxis: 400
        }
      ]
    }
  ]
};

myChart.setOption(markLineOption);