Echarts柱体设置不同颜色

最新推荐文章于 2024-06-29 10:01:23 发布

时光足迹

最新推荐文章于 2024-06-29 10:01:23 发布

阅读量518

点赞数

分类专栏： Echarts 文章标签： Echarts 前端数据化

本文链接：https://blog.csdn.net/gaoxiaoba/article/details/119892060

版权

Echarts 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

完整配置可查看 Echarts Bar横向柱状图

柱体的属性设置series中color可以是一个函数，在函数中处理。核心代码为colorList[params.dataIndex]

let colorList = [
  "#1890ff",
  "#52c41a",
  "#faad14",
  "#f5222d",
  "#1DA57A",
  "#d9d9d9",
];
let series = [
  {
    type: "bar",
    barWidth: 16,
    itemStyle: {
      // 定制显示（按顺序）,实现不同颜色的柱体
      color: (params) => {
        return colorList[params.dataIndex];
      },
    },
    dimensions: ["类型", "销售数量"],
  },
];