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',
},
},
},
这样就好看一些了
最终的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 500px;background-color: pink;"></div>
<script>
var myChart = echarts.init(document.querySelector('div'))
let lejibaoxiuTotals=140;
let listSummary=[
{name:'华为1',value:10},
{name:'华为2',value:10},
{name:'华为3',value:10},
{name:'华为4',value:10},
{name:'华为5',value:10},
{name:'华为6',value:10},
{name:'华为7',value:10},
{name:'华为8',value:10},
{name:'华为9',value:10},
{name:'华为10',value:10},
{name:'华为12',value:10},
{name:'华1为13',value:10},
{name:'012华3为',value:10},
{name:'华1为2',value:10},
]
var option = {
tooltip: {
trigger: 'item',
},
legend: {
type: 'scroll',
orient: 'vertical',
top: 'center',
bottom: 40,
right: 40,
icon: 'circle',
itemGap: 18,
itemWidth: 8,
itemHeight: 8,
pageButtonItemGap: 5,
textStyle: {
fontSize: 13,
color: '#D9D9D9',
rich: {
name: {
color: '#595959',
width: 77,
padding: [0, 0, 0, 0],
},
val: {
width: 50,
color: '#8c8c8c',
padding: [0, 10, 0, 6],
},
numNum: {
color: '#8c8c8c',
},
},
},
// 控制legend的间距
padding: [10, 0, 20, 20],
// 这里设置箭头的路径
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, //这当然就是按钮的大小
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) {
// 计算百分比
percentage =((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + '%'
} else {
percentage = ''
}
}
}
return `{name| ${name.length > 5 ? name.slice(0, 5) + '...' : name}} | {val| ${percentage}} {numNum| ${showNum}}`
},
},
series: [{
type: 'pie',
// 饼粗的大小
radius: ['44%', '60%'],
// 图形展示的位置
center: ['30%', 'center'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
// emphasis 不展示中间的文字
labelLine: {
show: false,
},
data: listSummary, //[{name:'xx',value:'x'}]
}, ],
title: {
text: lejibaoxiuTotals ? lejibaoxiuTotals : '', //展示的总数据
left: '27%',
top: '47%',
textStyle: {
color: '#031f2d',
fontSize: 20,
align: 'center',
},
},
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</body>
</html>
尾声
如果你觉得我写的还不错的话
关注我或者给我点赞打赏
这是我写下去的动力
echarts中饼状图数据太多进行翻页的更多相关文章
- vue中使用echarts画饼状图
echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...
- Echarts生成饼状图、条形图以及线形图 JS封装
1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...
- echart中饼状图的高亮显示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue中饼状图的使用
图形构建子组件 <template> <div> <div id="myChart" :style="echartStyle"&g ...
- echarts pie饼状图绑定点击事件
var valueData = [ {value: 33,name: '诊所'}, {value: 29,name: '汽车服务相关'}, {value: 27, name: '洗衣店'}, {val ...
- Android中饼状图的绘制
https://blog.csdn.net/cen_yuan/article/details/52204281
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- 封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...
- jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码
js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...
随机推荐
- 2021.10.27考试总结[冲刺NOIP模拟17]
T1 宝藏 发现每个数成为中位数的长度是关于权值单调的.线段树二分判断是否合法,单调指针扫即可. 考场上写了二分,平添\(\log\). \(code:\) T1 #include<bits/s ...
- 大厂面试题分享：如何让(a===1&&a===2&&a===3)的值为true?
当我第一次看到这一题目的时候,我是比较震惊的,分析了下很不合我们编程的常理,并认为不大可能,变量a要在同一情况下要同时等于1,2和3这三个值,这是天方夜谭吧,不亚于哥德巴赫1+1=1的猜想吧,不过一切 ...
- 2021NOI同步赛
\(NOI\) 网上同步赛 明白了身为菜鸡的自己和普通人的差距 DAY1 \(T1\) 轻重边 [题目描述] 小 W 有一棵 \(n\) 个结点的树,树上的每一条边可能是轻边或者重边.接下来你需要对树 ...
- 奇偶位交换 牛客网 程序员面试金典 C++ Python
奇偶位交换 牛客网 程序员面试金典 C++ Python 题目描述 请编写程序交换一个数的二进制的奇数位和偶数位.(使用越少的指令越好) 给定一个int x,请返回交换后的数int. 测试样例: 10 ...
- idea连接数据库时区错误
错误界面 IDEA连接mysql,地址,用户名,密码,数据库名,全都配置好了,点测试连接,咔!不成功! 界面是这样的, 翻译过来就是:服务器返回无效时区.进入"高级"选项卡,手动设 ...
- MnogoDB唯一索引，稀疏索引
1,单个字段唯一索引 db.collection.createIndex({name:1},{unique:true} 2,多个字段联合索引示例 db.collection.createIndex({ ...
- go 错误处理设计思考
前段时间准备对线上一个golang系统服务进行内部开源,对代码里面的错误处理进行了一波优化. 优化的几个原因: 错误处理信息随意,未分类未定义.看到错误日志不能第一时间定位 错误的日志重复,有时候一个 ...
- [loj2135]幻想乡战略游戏
以1为根建树,令$D_{i}$为$i$子树内所有节点$d_{i}$之和 令$ans_{i}$为节点$i$的答案,令$fa$为$i$的父亲,则$ans_{i}=ans_{fa}+dis(i,fa)(D_ ...
- [bzoj1677]求和
dp,用f[i]表示i划分的方案,直接枚举最后一个数是错误的,因为会导致c重复计数,然后正解十分神奇--当i为奇数,那么分解中一定有1,因此f[i]=f[i-1]当i为偶数若有1,同样转移到f[i-1 ...
- 【Azure 应用服务】App Service 无法连接到Azure MySQL服务，报错：com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
问题描述 App Service使用jdbc连接MySQL服务,出现大量的 Communications link failure: com.mysql.cj.jdbc.exceptions.Com ...