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

原创于 2021-10-12 14:06:22 发布 · 375 阅读

CC 4.0 BY-SA版权

文章标签：

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

双柱状图，多个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],
            },
          },
        ],