echarts 自定义 legend 图例，文字部分自定义颜色

最新推荐文章于 2024-05-10 10:01:37 发布

Michael_Cheng_09

最新推荐文章于 2024-05-10 10:01:37 发布

阅读量2k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/zihang_cheng/article/details/130875682

版权

legend: {
      orient: 'horizontal',
      x: 'center',
      y: 'top',
      itemHeight: itemSize,
      itemwidth: itemSize,
      itemGap: 6,
      selectedMode: false,
      padding: [10, 0, 0, 0],
      data: [
        { name: '已逾期', icon: 'circle' },
        { name: '临期', icon: 'circle' },
        { name: '进行中', icon: 'circle' },
        { name: '已完成', icon: 'circle' },
        { name: '完成率', icon: `image://${Circle}` },
        {
          /* TIP: 设置虚线 */
          name: `项目平均`,
          lineStyle: { type: 'dashed', width: 2.2, color: 'rgba(255, 196, 36, 1)' },
        },
      ],
      textStyle: {
        fontSize: axisFontSize,
        fontWeight: 'bold',
        color: '#1F6AAB',
        padding: legendPadding,
        rich: {
          a: {
            align: 'left',
            color: '#1F6AAB',
            fontSize: axisFontSize,
          },
          b: {
            color: 'rgba(255, 196, 36, 1)',
            fontSize: axisFontSize,
          },
        },
      },
      formatter: function (name) {
        if (name == '项目平均') {
          return `{a| ${name} }{b| ${1145}}`;
        }
        return name;
      },
    },