echart自定义图例icon的形状

最新推荐文章于 2024-09-02 11:16:50 发布

waves0001

最新推荐文章于 2024-09-02 11:16:50 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： javascript 前端 echarts

本文链接：https://blog.csdn.net/weixin_46544034/article/details/128550280

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

需求：将雷达图的图例修改成六边形

echart官方给出的图例：‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’，并没有六边形。

自定义的方法：

1、base64

将UI中的图标下载，通过在线转换工具，转成base64

2、使用矢量路径

将UI中的图标下载成svg格式，获取path中d后面的参数

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" class="design-iconfont">
  <path d="M14 0L26.1243557 7 26.1243557 21 14 28 1.87564435 21 1.87564435 7z" fill="#A90F36" fill-rule="nonzero" opacity=".8"/>
</svg>

代码实例中的data属性

 option = {
        color: ['#F09229', '#A90F36'],
        legend: {
          show: true,
          bottom: '85px',
          position: 'center',
          itemWidth: 14,
          itemGap: 25,
          // icon:this.yellow,
          data: [
          {icon: 'path://M14 0L26.1243557 7 26.1243557 21 14 28 1.87564435 21 1.87564435 7z', name: '您的表现: ' + this.myScore},
          {icon:'path://M14 0L26.1243557 7 26.1243557 21 14 28 1.87564435 21 1.87564435 7z', name: '股民: ' + this.averageScore}
            // '您的表现: ' + this.myScore, '股民: ' + this.averageScore
          ],
          formatter: (val) => {
            if (val[0] === '您') {
              return '{b|您的表现:  }' + '{a|' + this.myScore + '}'
            } else {
              return '{b|股民:  }' + '{a|' + this.averageScore + '}'
            }
          },
          textStyle: {
            //图例文字的样式
            // color: '#fff',
            fontSize: 12,
            rich: {
              a: {
                color: '#F83F10',
                fontWeight: 500,
                fontSize: 12,
              },
              b: {
                color: '#A03C00',
                fontWeight: 400,
                fontSize: 12,
              },
            }
          }
        },
        radar: [
          {
            center: ['50%', '32%'],
            radius: '35%',
            splitNumber: 3,
            nameGap: 8,
            name: {
              formatter: function(val, indicator) {
                return '{a|' + val + '}\n{b|高于 }{c|' + indicator.percent + '%}{b| 的用户}'
              },
              rich: {
                a: {
                  align: 'center',
                  color: '#A03C00',
                  lineHeight: 12,
                  fontSize: 12,
                  fontWeight: 500,
                  fontFamily: 'PingFangSC-Medium'
                },
                b: {
                  align: 'center',
                  color: '#A03C00',
                  lineHeight: 22,
                  fontSize: 12,
                  fontWeight: 400,
                  letterSpacing: 0,
                  fontFamily: 'PingFangSC-Medium'
                },
                c: {
                  color: '#F83F10',
                  lineHeight: 22,
                  fontSize: 12,
                  fontFamily: 'PingFangSC-Medium'
                }
              }
            },
            shape: 'polygon',
            indicator: this.indicator,
            splitLine: {
              lineStyle: {
                color:'#E2B79F'
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#E2B79F',
              }
            }
          }
        ],
        series: [
          {
            symbol: 'none',
            name: '股民: ' + this.averageScore,
            type: 'radar',
            data: [
              {
                value: this.averageRank || '--',
                lineStyle: {
                  opacity: 0
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#5899FF' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#4634EF' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            ]
          },

          {
            symbol: 'none',
            name: '您的表现: ' + this.myScore,
            type: 'radar',
            data: [
              {
                value: this.myRank || '--',
                lineStyle: {
                  opacity: 0
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FF8D36' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#FF0000' // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            ]
          }
        ]
</svg>