双柱状图多个y轴的区分方法

最新推荐文章于 2023-05-24 16:55:15 发布

原创最新推荐文章于 2023-05-24 16:55:15 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍了如何使用Echarts创建一个包含两个不同y轴的双柱状图，分别展示了查询次数和浏览量。通过设置`yAxisIndex`属性为1，可以将第二个柱状图关联到第二个y轴，实现数据的区分展示。同时，通过调整`itemStyle`的`color`和`barBorderRadius`属性，为每个柱状图赋予独特的颜色和圆角效果。

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

双柱状图，多个y轴的区分方法

 series: [
          {
            name: '查询次数',
            type: 'bar',
            //  进行折现样式调整
            data: option.dataQuery,
            barWidth: 15,
            itemStyle: {
              //  折现的颜色
              color: '#43e4db',
              barBorderRadius: [8, 8, 0, 0],
            },
          },
          {
            name: '浏览量',
            type: 'bar',
            //  进行折现样式调整
            data: option.dataViews,
            barWidth: 15,
            yAxisIndex: 1, // 看这里看这里看这里看这里看这里=============================
            itemStyle: {
              //  折现的颜色
              color: '#409eff',
              barBorderRadius: [8, 8, 0, 0],
            },
          },
        ],