echarts中实现自定义legend数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了echarts中实现自定义legend数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

很久很久以前，我刚使用echarts，更新了一篇关于echarts中formatter实现动态legend的blog，很多人来问是如何实现的，一直很忙，懵懵懂懂也在没看，近来抽时间更新了一下实现方式

类似于以下这种图例，很多新手没办法下手了，其实直接使用echarts中属性的格式器formatter就可以解决了，因为formatter是一个标准的function，可以在其中对数据进行一些操作，最后返回想要展现的数据即可。
echarts legend自定义,数据可视化,echarts-地图,echarts-数据,echarts,前端,javascript

data(){
 let that = this
 return{ 
	option:>>legend
	legend: {
	    orient:'vertical',
	    // top: 'center',
	    top: '8%',
	    right: '13%',
	    width: '50%',
	    fontSize:'14',
	    itemGap:8,
	    itemHeight: 10,   //图例大小
	    formatter: function(labelName) {
	      const { dataList } = that
	      for (let index = 0; index < dataList.length; index++) {
	        const { name, value, percentage } = dataList[index];
	        if (dataList[index].name == labelName) {
	          return `${labelName}   ${value}   ${percentage}`
	        }
	      }
	    }
	  },
	}
}

实现效果：
echarts legend自定义,数据可视化,echarts-地图,echarts-数据,echarts,前端,javascript
实现了思路formatter参数返回的是当前的legend的label，因此只需要用当前的label去匹配图表数据中的那么，然后获取将name所属的item 的数据return展示即可

这次用的是data中的数据来展示legend，之前用的是series的数据，因为初始化数据和更新图表都是直接修改series中的data的

ps：注意，formatter中的this是undefined的，所以需要读取data中的数据时需要现在data()函数中将this赋值操作，这样以便于开发者能直接拿到data中的数据进行操作文章来源地址https://www.toymoban.com/news/detail-640082.html

到了这里，关于echarts中实现自定义legend数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！