ECharts给柱状条设置不同的颜色且给坐标轴名设置不同颜色

272 阅读1分钟
    series: [
            {
              type: 'bar',
              barWidth: 12,
              itemStyle: {
                barBorderRadius: 6,
                //每根柱子颜色设置
                color: function (params) {
                  let colorList = [
                    "#163EC0",
                    "#2058BF",
                    "#2374CF",
                    "#2272AF",
                    "#318DC1",
                    "#38A1CD",
                    "#38BEDA",
                    "#CBA531",
                    "#CB8326",
                    "#CA5F25",
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
          ],
    yAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              fontSize: 14,
              //给坐标名添加颜色属性
              textStyle: {
                color: function (params,index) {
                  console.log("22121",index);
                  let colorList = [
                    "#163EC0",
                    "#2058BF",
                    "#2374CF",
                    "#2272AF",
                    "#318DC1",
                    "#38A1CD",
                    "#38BEDA",
                    "#CBA531",
                    "#CB8326",
                    "#CA5F25",
                  ];
                  return colorList[index];
                }
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false
            },
            //去掉分割线
            splitLine: {
              show: false,
              lineStyle: {
                color: '#eeeeee'
              }
            }
          },

效果如图所示: