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

最新推荐文章于 2023-12-27 17:48:13 发布

原创最新推荐文章于 2023-12-27 17:48:13 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

该段配置描述了Echarts图表中图例（legend）的布局和样式，包括水平方向、居中对齐、不同状态的图标类型、文字样式以及自定义的格式化显示，特别提到了项目平均值的虚线表示和完成率的统计。

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;
      },
    },