Echarts双x轴不等分堆叠柱状图加折线

原创

已于 2022-10-08 09:23:41 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript

于 2022-10-08 09:04:15 首次发布

本文介绍了如何使用Echarts创建一个具有双x轴的不等分堆叠柱状图，并结合折线图。通过调整series.data的数据格式，设置x轴坐标和标签，以及利用Echarts的label配置项，可以实现每个柱状图显示单独的名称。同时，文中提到了一个类似的实现案例，提供了不同的实现思路。

效果图:

核心配置

在指定x轴显示柱状图：

1. series.data数据格式：[{"value":["x轴名称", "117"]}]，第一项代表在x轴显示的下标位置，117为数据量

每个柱状图都显示单独的名称：

1. 在首组数据前再添加一项数据，数据量为0，视图就无法显示了

2. 配置label项，达到显示效果

Echarts配置项：

option = {
    legend:{},
    xAxis: [{
        type: 'category',
        data: ['一分局', '二分局', '三分局', ],
        offset: 10
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [
        // 单个柱状图名称配置
      {
            type: 'bar',
            stack: '一分局',
            data: [{
              value: ['一分局', 0]
            }],
            label: {
              show: true,
              formatter: 'admin',
              position: 'buttom',
              offset: [5, 5]
            },
            itemStyle: {