echarts中饼状图数据太多进行翻页
echarts饼状图数据太多
文章图片
echarts 饼状图内容太多怎么处理
有些时候,我们饼状图中echarts的数据可能会很多。
这个时候展示肯定会密密麻麻的。导致显示很凌乱
我们需要'翻页'类似表格展示下一页的数据在legend中下需要配置属性 type: 'scroll',表示滚动
数据太多可以滚动的形式进展示
如下:
legend: {
type: 'scroll',
}
文章图片
自定义分页箭头
但是我们发现这个分页箭头不好看。
所以我们需要优化这个分页的箭头
通过官网的描述信息我们配置如下这只
这里设置箭头的路径
var option = {
legend: {
type: 'scroll', 滚动
orient: 'vertical', 垂直方向滚动
pageIcons: {
vertical: [
'path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z',
'path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z',
],
},
pageButtonPosition: 'end', // 翻页的位置。'start':控制块在左或上,end控制块在右或下。
pageIconColor: '#29bca8', // 可以点击的翻页按钮颜色
pageIconInactiveColor: '#7f7f7f', // 禁用的按钮颜色
pageIconSize: 14, //这当然就是按钮的大小
}
}
文章图片
有的小伙伴会好奇
path的值怎么来的,我是从svg中获取的,
如何在iconfont中获取图标的svg代码
文章图片
文章图片
pageIcons 的值哪些?
第1种:svg的代码,就是我刚刚使用的第2种:URL为图片链接例如:'image://http://xxx.xxx.xxx/a/b.png'第3种:URL为dataURI 例如:
'image://data:image/gif;
base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUh
wFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
定义legend的显示内容样式的设置
文章图片
在legend下有一个formatter属性
我们可以通过 formatter 来自定义文字
formatter: function(name) {
let showNum
let percentage
for (var i = 0;
i < listSummary.length;
i++) {
if (listSummary[i].name == name) {
showNum = listSummary[i].value
if (lejibaoxiuTotals) { //lejibaoxiuTotals可能为0
// 计算百分比
percentage =((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + '%'
} else {
percentage = ''
}
}
}
return `{name| ${ name.length > 5 ? name.slice(0, 5) + '...' : name}}
| {val| ${percentage}}{numNum| ${showNum}}`
},通过富文本来控制样式
textStyle: {
fontSize: 13, //字体的大小
color: '#D9D9D9',
rich: {
//设置name属性的样式(显示的:华为x),这里与 return中的name保持一致
name: {
color: '#595959',
width: 77, //宽度
padding: [0, 0, 0, 0], //间距表示 上右下左
},
//设置val(百分比)属性的样式,这里与 return中的val保持一致
val: {
width: 50,//宽度
color: '#8c8c8c', 、
padding: [0, 10, 0, 6], //间距表示 上右下左
},
//设置numNum(数量)属性的样式,这里与 return中的numNum保持一致
numNum: {
color: '#8c8c8c',
},
},
},
【echarts中饼状图数据太多进行翻页】这样就好看一些了
文章图片
最终的代码
Document - 锐客网
尾声
如果你觉得我写的还不错的话
关注我或者给我点赞打赏
这是我写下去的动力
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理