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

p_1024

已于 2022-10-08 09:23:41 修改

阅读量1.4k

点赞数

文章标签： echarts javascript

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

本文链接：https://blog.csdn.net/p_1024/article/details/127202400

版权

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

摘要由CSDN通过智能技术生成

效果图:

核心配置

在指定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: {