echarts隔柱换色

最新推荐文章于 2023-07-21 11:35:40 发布

阁下何不同风起？

最新推荐文章于 2023-07-21 11:35:40 发布

阅读量286

点赞数

分类专栏： vue-cli脚手架 vue-cli中常用的UI框架文章标签： ECharts 柱状图颜色间隔图表配置数据可视化

本文链接：https://blog.csdn.net/yueye_wu/article/details/121167944

版权

vue-cli脚手架同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

vue-cli中常用的UI框架

2 篇文章 0 订阅

订阅专栏

option = {
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.echartsData.groupX,
        },
        yAxis: {
          minInterval: 1,
          type: "value",
        },
        series: [
          {
            Width: 40,
            barWidth: 40, //柱图宽度
            data: this.echartsData.groupY,
            type: "bar",
            itemStyle: {
              normal: {
                //隔柱换色，
                color: function (params) {
                  //首先定义一个数组
                  var colorList = ["#7666FF", "#00C1CC"];
                  if (params.dataIndex % 2 == 0) {
                    return colorList[0];
                  } else {
                    return colorList[1];
                  }
                },
                
              },
            },
          },
        ],
      };