Echart甘特图圆柱图表bar柱体颜色根据参数值去改变

最新推荐文章于 2024-08-15 11:02:12 发布

ajaxPost293614

最新推荐文章于 2024-08-15 11:02:12 发布

阅读量694

点赞数

分类专栏： element JavaScript echart 文章标签： javascript echarts elementui

本文链接：https://blog.csdn.net/caoyan0829/article/details/114983775

版权

该博客展示了如何在Echarts中实现甘特图圆柱图表的柱体颜色根据参数值动态变化。通过设置series.data，利用参数值来决定每个柱体的颜色，从而达到颜色区分的效果。在setOption配置中进行了详细设定。

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

效果图：

绿色的圆柱图就是根据值去判断的颜色

series.data数据：

注意：这里data可以直接取参数为value的值，这样就可以区分参数再做调整。

setOption配置：

    initChart(item) {
      this.chart = echarts.init(document.getElementById("popupGantt"));

      this.chart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "排产甘特图",
          left: 10,
        },
        grid: {
          containLabel: true,