如何实现series中label数字显示加图标显示呢？

最新推荐文章于 2024-09-05 14:48:04 发布

试图让你心动

最新推荐文章于 2024-09-05 14:48:04 发布

阅读量678

点赞数

分类专栏： echarts 文章标签： javascript html js web

本文链接：https://blog.csdn.net/zhangmeixia969/article/details/119839449

版权

echarts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文展示了如何在Echarts中实现图例显示在外侧，并结合循环嵌套设置不同颜色与图标。通过`formatter`函数和`rich`属性定制了图例的文字与背景图片，使用了`require`引入SVG图片。示例代码详细解释了每个关键部分的作用，帮助读者理解自定义Echarts组件的方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述
以上就是我做出来得效果！！！
要是想说功能怎么做的话可以私信小编哦！

上代码👇

 label: {
            show: true,
            position: "outside",
            distance: 5,
             formatter: [
                  '{a|Top'+[k + 1]+'}',
                  '{imagessck|}'
              ].join('\n'),

              rich: {
                  a: {
                      color: sortColor[k].color,
                      lineHeight: 24,
                      fontsize:24,
                  },
                  imagessck: {
                      backgroundColor: {
                          image: sortImage[k],
                      },
                      height: 24,
                      align: 'center',
                  },
              }
          },

外面我嵌套了一层循环哦

   let sortColor =[
        {
          color:'#e5c836',
        },
        {
          color:'#c1c1c1',
        },
        {
          color:'#b47c4c',
        }
      ];
      let sortImage=[
        require('@/assets/images/金冠.svg'),
        require('@/assets/images/银冠.svg'),
        require('@/assets/images/铜冠.svg')
      ]