【可视化开发】小程序Echarts自定义图例legend

​

图例是 ECharts 中用来标识数据系列的组件之一，ECharts 默认提供了一些基础的图标类型（Echarts图例配置项），比如圆形、矩形、三角形等。然而，Echarts的配置项有时无法满足前端对UI的还原，此时需要用图标配置icon的形式。

​编辑

使用自定义图标路径

1. 写好图例图标路径映射

   const ProjectStatusIconMap = {
     [ProjectStatus.FINISHED]: `image://${staticBaseUrl}/barchart/green.png`,
     [ProjectStatus.APPROVED]: `image://${staticBaseUrl}/barchart/blue.png`,
     [ProjectStatus.DELAYED]: `image://${staticBaseUrl}/barchart/orange.png`,
     [ProjectStatus.INPROGRESS]: `image://${staticBaseUrl}/barchart/red.png`,
     [ProjectStatus.NOTSTARTED]: `image://${staticBaseUrl}/barchart/grey.png`,
   }
   

   其中staticBaseUrl为图标上传到服务器的http路径，注意Echarts图例的icon前缀需要加【image:// 】。

2. 设置图例相关配置项

   legend: {
         itemWidth: 14,
         itemHeight: 14,
         data: barKeyOrder.map((e) => {
           const key = ProjectStatus[e]
           return {
             name: ProjectStatusMap[key],
             icon: ProjectStatusIconMap[key] || 'roundRect',
             textStyle: {
               color: '#777777',
             },
           }
         }),
       }
   

   barKeyOrder仅用于定好柱状图每一项的展示顺序，请根据自己的项目做调整。

注意细节

图例的图标与文字有可能不会居中对齐，请注意根据UI做好调整。

以上就是小程序自定义图例的实现啦^-^

​