Echarts配置项series的label如何动态设置背景图

最新推荐文章于 2025-06-10 17:07:46 发布

扶苏1002

最新推荐文章于 2025-06-10 17:07:46 发布

阅读量385

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echarts 数据库服务器

本文链接：https://blog.csdn.net/qq_44741577/article/details/147756924

Echarts 专栏收录该内容

8 篇文章

订阅专栏

label的formatter是不支持HTML片段的，所以想要实现根据params参数动态设置不同背景，就要根据status返回不同的富文本片段，然后根据rich去对应，去设置不同的背景图

series: [
  {
    type: "scatter3D",
    coordinateSystem: "geo3D",
    silent: false,
    data: chartData,
    label: {
      show: true,
      position: "top",
      distance: -106,
      formatter(params) {
        const status = params.data.status;
        const name = params.data.name;
        let statusRich = "";
        switch (status) {
          case 1:
            statusRich = `{a|${name}}`;
            break;
          case 2:
            statusRich = `{b|${name}}`;
            break;
          case 3:
            statusRich = `{c|${name}}`;
            break;
        }
        return statusRich;
      },
      rich: {
        a: {
          backgroundColor: {
            image: 'https://img1',
          },
          width: 100,
          height: 50,
        },
        b: {
          backgroundColor: {
            image: 'https://img2',
          },
          width: 100,
          height: 50,
        },
        c: {
          backgroundColor: {
            image: 'https://img3',
          },
          width: 100,
          height: 50,
        },
      },
    },
  },
],