echarts自定义图例legend文字和样式

话不多说，先上效果图。

要完成这个图并不难，主要是下面那个图例比较难，需要定制。

让我们从官方文档找找思路，官方文档关于legend.formatter是这样的：链接在这

难点在于：

1.这里的图例文本包含两个变量，而formatter提供的变量模板只有name
2.两个变量的样式各不相同
3.对齐，换行与居中的应用

formatter有两种：一是模板变量，而是回调函数。

显然，只有回调函数能够满足我们的需要。

自定义改造如下：

var pieChartData = [{value:1, name:'系统工具'},{value:3, name:'课程表'},{value:0, name:'意见反馈'},{value:43, name:'其他'}
]formatter:  (name)=>{let data=this.pieChartData;let total = 0;let target;for (let i = 0, l = data.length; i < l; i  ) {total  = data[i].value;if (data[i].name == name) {target = data[i].value;}}let arr = ['{a|' name '}','{b|' ((target/total)*100).toFixed(2) '%}'
    ]return arr.join('\n')
},textStyle:{rich:{a:{fontSize:16,verticalAlign:'top',align:'center',padding:[0,15,28,0]},b:{fontSize:14,align:'center',padding:[0,15,0,0],lineHeight:25}}
}

更多专业前端知识，请上【猿2048】www.mk2048.com

echarts自定义图例legend文字和样式相关推荐

html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
Echarts修改图例legend文字颜色和字体大小
在使用Echarts中有时需要根据主题修改文字颜色等格式,下面记录我的查找过程, 找到插件中的lengend 在data前增加,textStyle:{ },将需要改的样式加入,就可以了修改后颜色如下
【ECharts】图例 legend
目录图例的位置图例区域样式图例文字自定义编辑图例形状图例的位置 option = {legend: {orient: 'vertical',x:'right', // 图例在左(left) ...
Echarts中的legend文字过长挡住图表文字解决
legend:{formatter: function (name) {if (!name) return '';if (name.length > 5) {name = name.slice( ...
数据科学 IPython 笔记本 8.9 自定义图例
8.9 自定义图例原文:Customizing Plot Legends 译者:飞龙协议:CC BY-NC-SA 4.0 本节是<Python 数据科学手册>(Python Data ...
echarts地图自定义点样式，缩放计算点聚合，自定义图例icon，label文字样式
效果: 引入echarts后: 阿里云下载json数据: DataV.GeoAtlas地理小工具系列引入数据: import chongqing from '@/assets/js/chongqin ...
求大神赐教，如何实现echarts自定义legend的样式如图下的这种
求大神赐教,如何实现echarts自定义legend的样式如图下的这种嘤嘤嘤不会写
饼图自定义legend文字内容，以及饼图中间显示数量，中国地图制作
echarts中升级到版本5以后,使用方法发生了改变,注意不兼容ie8了,还有引入方法改变了. cnpm install echarts --save import * as echarts from ...
echarts饼图 mouseover中间部分文字样式设置，默认显示总和
需求描述需求要求利用echarts的饼图对企业数量进行统计,要求默认饼图中间显示全部企业数量,鼠标移动上去,则显示对应部分的企业数量,并且设置样式. 效果图具体代码 let TrendCha ...

echarts自定义图例legend文字和样式

echarts自定义图例legend文字和样式相关推荐

最新文章

热门文章