echarts自定义legend样式的详细图文教程
更新时间：2022年10月12日 12:28:12 作者：ChangYan.
在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,下面这篇文章主要给大家介绍了关于echarts自定义legend样式的相关资料,需要的朋友可以参考下
最近要完成显示一个饼图，使用echarts组件，先用官方给定的模板加载出样式，然后修改为自定义的样式。如下图是要自定义legend。
先放上官方加载出的代码
this.chart.setOption({
title: {
text: "Filter request number distribution of different project",
textStyle: {
color: 'black',
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'item'
},
legend: { //对图形的解释部分
orient: 'vertical',
right: 10,
y: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data // 需要加载的数据
}
]
})
对于需要加载的数据如下：
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
然后在此基础上进行修改。
首先可以看到，图标默认是长方形，而需求是小圆点。
在此处设置就可以变为小圆点
如果需要其它图标，可以参看下图
接着就是右边一段文字到三段文字的显示，不止要展示出name，还要展示出百分比和数量。
这个就要用到legend.formatter进行设置，还要用到legend.textStyle. rich，在 rich 里面，可以自定义富文本样式，使三列文字的中间那一列展示为灰色，两边文字为黑色。
具体官网样式设置教程：https://echarts.apache.org/zh/option.html#legend.formatter
具体分析过程如下：
首先把文字分为3段，a表示name，b表示百分比， c表示value数量。
然后在textStyle里设置各自的样式，设置后的代码如下，注意备注【添加】的地方是主要更改
this.chart.setOption({
title: {
text: 'Filter request number distribution of different project',
textStyle: {
color: 'black',
fontWeight: 'bold'
}
},
tooltip: {
trigger: 'item'
},
legend: { // 对图形的解释部分
orient: 'vertical',
right: 10,
y: 'center',
icon: 'circle', // 添加
formatter: function(name) { // 添加
let total = 0
let target
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name === name) {
target = data[i].value
}
}
var arr = [
'{a|' + name + '}',
'{b|' + ((target / total) * 100).toFixed(2) + '%}',
'{c|' + target + '}'
]
return arr.join(' ')
},
textStyle: { // 添加
padding: [8, 0, 0, 0],
rich: {
a: {
fontSize: 15,
width: 110
},
b: {
fontSize: 15,
width: 70,
color: '#c1c1c1'
},
c: {
fontSize: 15
}
}
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data
}
]
})
最后加载出的样式如图
大功告成！
总结
到此这篇关于echarts自定义legend样式的文章就介绍到这了,更多相关echarts自定义legend样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
用js实现非常漂亮的带闪烁效果的圣诞树代码。很佩服作者的想法。效果如下图。2009-12-12
这篇文章主要介绍了浅谈javascript如何获取文件后缀名，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了Bootstrap Table的使用小结，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
excel的预览库有不少,也都很强大,但是能很简单实现,下面这篇文章主要给大家介绍了关于前端实现（excel）xlsx文件预览的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了javascript函数式编程,实例分析了javascript函数式编程的相关使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
本文主要介绍了javascript实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要给大家分享了关于Javascript es7中比较实用的两个方法示例，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。2017-07-07
这篇文章主要介绍了JS实现往下不断流动网页背景的方法,实例分析了递归调用自定义函数scrollBG实现动态背景特效的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了JavaScript实现经典排序算法之选择排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家信息介绍了JavaScript中的常见错误与异常处理的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
最新评论