关于改变echarts颜色使其颜色不相同的方法(其他图也适用)

最新推荐文章于 2024-05-16 10:27:28 发布

原创最新推荐文章于 2024-05-16 10:27:28 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何修改ECharts配置，隐藏柱状图的X轴和Y轴，实现Y轴反向坐标，并确保每个柱子颜色不同，适用于创建独特视觉效果的图表。

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

效果图：
在这里插入图片描述
隐藏了柱状图的X轴和Y轴和其余属性并且Y轴反向坐标轴使其出现这样的效果

代码：

 var AXIS_OPTION = {
    tooltip: {  //提示框
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {  //距离控制
      width: '75%',
      left: '30px',
      right: '30px',
      bottom: '4%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {   // x轴属性控制
      type: 'value',
      axisLine: {
        show: false, 
      },
      axisTick: {
        show: false,
      },
      show: false,
    },
    yAxis: {
      type: 'category',
      data: [1,2,3,4,5],
      splitLine: { show: false },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      nameTextStyle: {
        fontSize: 18,
      },
      inverse: true,  //反向坐标轴
    },
    series: {
      name: '协同参与度',
      type: 'bar',
      data: [],
      barWidth: 12, // 柱体宽度
      barGap: 10, //柱体距离
      smooth: true, 
      label: {
        normal: {
          show: true,
          position: 'right',
          offset: [5, -2],
          textStyle: {
            fontSize: 14,
          },
          formatter: ['{c}', '{b|%}'].join(' '), //自定义显示模板
          rich: {
            b: {},
          },
        },
      },
      itemStyle: {
        emphasis: {
          barBorderRadius: 5,
        },
        normal: {
          barBorderRadius: 4,
          color: function (params) {  //改变颜色关键代码
            const colorList = [
              '#457ef2',
              '#ff5a5e',
              '#24b29c',
              '#a055ed',
              '#e8aa07',
            ]
            return colorList[params.dataIndex]
          },
        },
      },
    },
  }