echart 柱状图指定柱子颜色

墨语轩

已于 2022-05-10 19:15:39 修改

阅读量2.2k

点赞数

分类专栏： echarts相关文章标签： echarts

于 2022-02-26 00:30:16 首次发布

本文链接：https://blog.csdn.net/MFWSCQ/article/details/123143640

版权

echarts相关专栏收录该内容

13 篇文章

订阅专栏

这篇博客详细介绍了如何使用Echarts配置渐变色条形图，并展示了如何根据数据动态映射颜色。通过调整`itemStyle`和`colorStops`属性，实现了颜色从起点到终点的平滑过渡。同时，还提到了如何通过添加额外的空数据系列，解决文字分隔过远的问题，以及设置圆角和自定义标签位置的方法。

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

配置项：

const colors = [
  {
    start: '#00bfbf',
    end: '#95f205'
  },
  {
    start: '#00bfbf',
    end: '#02a7f0'
  },
   {
    start: '#00bfbf',
    end: '#95f205'
  },
  {
    start: '#00bfbf',
    end: '#02a7f0'
  },
   {
    start: '#00bfbf',
    end: '#95f205'
  },
  {
    start: '#00bfbf',
    end: '#02a7f0'
  },
  {
    start: '#00bfbf',
    end: '#95f205'
  }
]

const colorList = function () {
  return colors.map(item=> {
    // return new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
    //   offset: 0,
    //   color: item.start
    // }, {
    //   offset: 1,
    //   color: item.end
    // }])
    return {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [{
      offset: 0,
        color: item.start
      }, {
        offset: 1,
        color: item.end
      }]
    }
  })
}

option = {
  backgroundColor: '#000',
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为 'line' 'shadow'
    }
  },
  grid: {
    top: 20,
    left: 4,
    right: 20,
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      color: '#80FFFF'
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#192127'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#192127',
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#192127'
      }
    },
    axisTick: {
      show: false
    },
    data: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg']
  },
  series: [{
    type: 'bar',
    label: {
      normal: {
        show: true,
        position: [10, -16],
        formatter: '{b}     {c}',
        textStyle: {
          color: '#80FFFF',
          fontSize: 12
        }
      }
    },
    barWidth: 20,
    itemStyle: {
      normal: {
        color: function (params) {
          return colorList()[params.dataIndex]
        }
      }
    },
    data: [100, 200, 300, 400, 300, 500, 400]
  }]
}

如果item 上面的两段文字分的太开，可以利用在 series里面加一个系列，数值 value 都为 0，展示 label 向上偏移即可

可以设置圆角：

itemStyle: {

// 设置圆角

barBorderRadius: [0, 4, 4, 0]

配置项：

const COLOR = ['#35a8ff', '#35a8ff'];
let data1 = [{
    value: 120,
    label: 'aaa'
}, {
    value: 142,
    label: 'bbbb'
}, {
    value: 110,
    label: 'cccc'
},
{
    value: 132,
    label: 'dddd'
}];
option = {
    backgroundColor:'#000f1f',
    grid: {
        top: 70,
        left: 33,
        right: 150,
        bottom: 15,
        containLabel: true
    },
    xAxis: {
        type: 'value',
        show: false
    },
    yAxis: {
        show: true,
        inverse: true,
        type: 'category',
        axisLine: {
            show: false
        }
    },
    series: [{
        name: 'label',
        type: 'bar',
        barWidth: 20,
        yAxisIndex: 0,
        label: {
            show: true,
            position: [0, -10],
            color: '#ffffff',
            fontSize: 15
        },
        data: data1.map((item) => {
            return {
                value: 0,
                label: {
                    formatter() {
                        return item.label;
                    }
                }
            };
        })
    }, {
        name: 'value',
        type: 'bar',
        barWidth: 20,
        barMinHeight: 20, // 最小高度
        yAxisIndex: 0,
        label: {
            show: true,
            position: ['100%', '10%'],
            fontSize: 22,
            offset: [10, 0],
            formatter({
                value
            }) {
                return `${value}kwh`;
            }
        },
        itemStyle: {
            // 设置圆角
            barBorderRadius: [0, 4, 4, 0]
        },
        data: data1.map(({
            value
        }, index) => {
            let color = COLOR[index % COLOR.length];
            return {
                value,
                label: {
                    color:'#ffffff'
                },
                itemStyle: {
                    color
                }
            };
        })
    }]
};