echarts柱状图更改背景色后，内部字体颜色统一为白色

梦解千愁

于 2024-10-02 19:44:41 发布

阅读量359

点赞数 3

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/m0_60577732/article/details/142684277

版权

 series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: [70, 34, 60, 78, 69],
        // 修改第一组柱子的圆角
        itemStyle: {
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function (params) {
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          },
        },
        // 显示柱子内的文字
        label: {
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%",
          textStyle: {
            fontSize: "12",
            color: "#fff"
            //修改这里即可!!!
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
      },
      {
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]