当前位置：首页 > news >正文

前端数据可视化之【series、series饼图配置】配置项

news 2025/7/4 13:27:30

🌟Echarts配置项

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

想让ECharts展示出我们预期的效果，就要在 myChart.setOption()方法中传入一个指定的options配置项，其类型为Object；options中的配置项非常之多，记住所有的并不太现实，在这里列一些重要的做介绍

🌟series

每个系列通过 type 决定自己的图表类型

series是一个数组，里面可以写很多的对象，每一个对象就是一个图表类型，每个对象上的type属性来控制图表的类型，他们有很多都一样的样式

属性	描述	值
type	设置图表的类型	string
id	组件 ID。	指定则可用于在 option 或者 API 中引用组件 string
name	系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。	string
legendHoverLink	是否启用图例 hover 时的联动高亮。	布尔值，默认为true
cursor	鼠标悬浮时在图形元素上时鼠标的样式是什么	string 跟css的cursor一样
label	图形上的一些文本标签，可用于说明图形的一些数据信息	object，主要控制文字颜色、字号、对齐方式、阴影、边框、宽高、描边颜色
itemStyle	图形样式	object，主要控制图形颜色、边框、阴影、透明度
emphasis	高亮的图形样式和标签样式。	object，里面包换两个对象昂，分别是label和itemStyle，设置同上
tooltip	本系列提示框的设置	object，查看tooltip组件
z和zlevel	查看title组件的z和zlevel	number
markPoint	图表标注	object：http://www.echartsjs.com/option.html#series-scatter.markPoint
markLine	图标标线	object: http://www.echartsjs.com/option.html#series-scatter.markLine
markArea	图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告。	object: http://www.echartsjs.com/option.html#series-scatter.markArea
silent	图形是否不响应和触发鼠标事件	布尔值，默认为false
datasetIndex	如果 series.data 没有指定，并且 dataset 存在，那么就会使用 dataset。datasetIndex 指定本系列使用那个 dataset。	number，默认为0
seriesLayoutBy	系列“排布”到 dataset 的行还是列上	‘column’：默认，dataset 的列对应于系列，从而 dataset 中每一列是一个维度。‘row’：dataset 的行对应于系列，从而 dataset 中每一行是一个维度
animation	是否开启动画	布尔值，默认为true
animationThreshold	是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。	number 默认值2000
animationDuration	初始动画的时长	number 默认值为1000
animationEasing	初始动画的缓动效果。	string 默认’cubicOut ’
animationDelay	初始动画的延迟，支持函数	Function、number 默认为0
animationDurationUpdate	数据更新动画的时长，支持回调函数 f	unction、number 默认值300
animationEasingUpdate	数据更新动画的缓动效果	string 默认值为’cubicOut’
animationDelayUpdate	数据更新动画的延迟，支持回掉函数 f	unction、number 默认值为0
data	系列中的数据内容数组	数组中可以包含很多对象，也可以直接写字符串数据

data是这里比较重要的，每种图表类型中都有，我在这里先总结了他们共有的部分，后面每种图表就只介绍他们特殊的部分。

data:[{name:'90-100',     //数据项名称value: 500,    //单个数据项的数值label:{},     //每种图表的解释不同itemStyle:{},   //折线拐点标志的样式,每种图标解释也不同emphasis:{itemStyle:{}},    //高亮样式，对于itemStyletooltip:{},     //单个数据提示框的样式},
]

🌟饼图 type:‘pie’

属性	描述	值
hoverAnimation	是否开启 hover 在扇区上的放大动画效果。	布尔值，默认为true
hoverOffset	高亮扇区的偏移距离	number 默认为10
selectedMode	选中模式，表示是否支持多个选中	默认关闭，支持布尔值和字符串，字符串取值可选’single’，‘multiple’，分别表示单选还是多选
selectedOffset	选中扇区的偏移距离	number 默认值为10
clockwise	饼图的扇区是否是顺时针排布	布尔值，默认为true
startAngle	起始角度	number 默认为90，支持范围[0, 360]
minAngle	最小扇区角度，用于防止过小影响交互	number，默认为0支持范围[0, 360]
roseType	是否展示成南丁格尔图，通过半径区分数据大小	string；‘radius’ 扇区圆心角展现数据的百分比，半径展现数据的大小。‘area’ 所有扇区圆心角相同，仅通过半径展现数据大小。
avoidLabelOverlap	是否启用防止标签重叠策略	布尔值，默认true
stillShowZeroSum	是否在数据和为0（一般情况下所有数据为0）的时候不显示扇区。	布尔值，默认为true
labelLine	标签的视觉引导线样式	object 下面例子详细介绍
center	饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。	array [400, 300];[‘50%’, ‘50%’]
radius	饼图的半径	number：直接指定外半径值。string:‘20%’，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。Array:[‘内半径’,‘外半径’]，内半径设大显示为圆环图
data	系列中的数据内容数组。数组项可以为单个数值	Object 结合饼图案例

饼图简单案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ECharts展示</title><script src="echarts.js"></script>
</head>
<body><div id="chart" style="width: 800px;height:400px;"></div>
</body>
<script>var myChart = echarts.init(document.getElementById('chart'));var options={title:{text:'学生成绩饼图',textStyle:{color:'red',fontSize:20},link:'http://www.echartsjs.com/option.html#title.backgroundColor',subtext:'这是期末成绩分布图',left:'left',itemGap:5,backgroundColor:'blue',borderWidth:5,},legend:{type:'scroll',data:['90-100','80-90','70-80','60-70',{name:'60分以下',icon:'triangle',textStyle:{color:'green'}}],  //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'    也可以设置通过 'image://url' 设置为图片，其中 URL 为图片的链接，orient:'horizontal',itemWidth:20,inactiveColor:'red',width:200,scrollDataIndex:2,pageButtonPosition:'start',animationDurationUpdate:1000,},tooltip:{enterable:true,    //鼠标是否可进入提示框浮层中默认为falseconfine:true,   //是否将提示框限制在图表内 ，在用与移动端或者响应式的时候比较有用//position:'bottom',    //提示框的位置backgroundColor:'#ccc',   //提示框的背景颜色borderWidth:20,     //边框的大小   numberborderColor:'red',   //边框的颜色extraCssText:'color:#000',   //写提示框加css样式},toolbox:{feature:{saveAsImage:{        //保存为图片。type:'png',      //保存图片的格式，支持 'png' 和 'jpeg'。name:'测试',        //保存文件的名字，默认使用主标题// backgroundColor:'auto'   保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色。excludeComponents:['toolbox'] , //保存为图片时忽略的组件列表，默认忽略工具栏。show:true,     //是否显示该工具。// icon:'image://http://xxx.xxx.xxx/a/b.png',   设置图标iconStyle:{color:'red'},      //保存为图片 icon 样式设置。   emphasis:{},      //移入设置样式，同toolbox的emphasispixelRatio:1,    //保存图片的分辨率比例，默认跟容器相同大小   number},restore:{          //还原show:true,      //是否显示该组件title:'这是还原',    //名称// icon:'',      图标设置iconStyle:{color:'blue'},    //图标样式emphasis:{iconStyle:{color:'red'}},     //移入显示样式，同上},dataView:{         //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show:true,    //是否显示该工具      布尔值title:'数据视图',    //移入显示的名字   stringiconStyle:{color:'yellow'},    //icon emphasis同上readOnly:false,      //是否不可编辑（只读）。//optionToContent:fun,    //自定义函数展示数据//contentToOption:fun,   //如果支持数据编辑后的刷新，需要自行通过该函数实现组装 option 的逻辑lang:['数据视图的', '关闭了啊', '刷新一哈'],   //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']。},dataZoom:{        //数据区域缩放。目前只支持直角坐标系的缩放。},magicType:{      //动态类型切换show:true,    //是否显示type:['line', 'bar', 'stack', 'tiled'],   //启用的动态类型title:{line:'切换为折线图',bar:'切换为柱状图',stack:'切换为堆叠',tiled:'切换为平铺',},icon:{// line:'image://http://xxx.xxx.xxx/a/b.png',   配置各个icon},iconStyle:{color:'pink'},     //配置icon的样式emphasis:{iconStyle:{}},     //移入样式option:{line:{}},      //配置每一个的样式seriesIndex:{line:[]},    //各个类型对应的系列的列表   },brush:{type:['rect','polygon'],icon:{},     //没个按钮的icontitle:{     //标题文本。rect:'矩形选择',}}}},series : [{name: '学生成绩区间',       //数据项名称type: 'pie',      //饼图radius: '60%',   //设置半径， ['30%','70%']表示内圆30%，外圆70%也就是环图，只写一个值就是饼图itemStyle:{},     //图形样式emphasis:{},    //高亮的扇区和标签样式hoverOffset:15,   //高亮扇区的偏移距离roseType:false,   //是否设置为南丁格尔图labelLine:{show:true,   //是否显示引导线length:10,   //引导线第一段的长度length2:50,   //引导线第二段的长度smooth:0.5,    //0-1 平滑程度lineStyle:{    //引导线的样式color:'red',   //引导线的颜色，支持rgba，还可以设置渐变和纹理width:2,     // number   线宽type:'dashed',  // 线的类型 'solid'\'dashed'\'dotted'//还支持阴影的设置opacity:0.5,      //t透明度。同css的opacity},emphasis:{     //高亮状态下引导线的样式lineStyle:{color:'blue'}      //同上面的lineStyle},     },data:[{value:235,name:'90-100',label:{show:true,position:'inside',color:'#000'},//position设置name值得位置，默认值为outside通过视觉引导线连到相应的扇区。labelLine:{},    // 同series.lineStyle  单独设置这一项数据的引导线样式emphasis:{lineStyle:{}},    // 同series.emphasis  单独设置这一项数据的高亮引导线样式tooltip:{}    //单独设置这一项数据的提示框},   {value:274, name:'80-90'},{value:310, name:'70-80'},{value:335, name:'60-70'},{value:400, name:'60分以下',selected:true}    //selected设置默认选中],center:['50%', '50%']     //圆心的位置，可以设置为绝对值和像素两种方式}]}myChart.setOption(options);
</script>
</html>

🌟写在最后

更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！

前端数据可视化之【series、series饼图配置】配置项

目录

🌟Echarts配置项

🌟series

🌟饼图 type:‘pie’

🌟写在最后

相关文章：

前端数据可视化之【series、series饼图配置】配置项

03.MySQL事务及存储引擎笔记

input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？

ArmSoM-RK3588编解码之mpp解码demo解析：mpi_dec_test

v-for列表渲染

【引流技术】最新头条全自动引流脚本，解放双手自动引流【引流脚本+技术教程】

智能PDU的“智能”体现在哪些方面？

Flutter和SwiftUI比较

使用ngrok内网穿透后，调用相关接口报ERR_NGROK_6024 异常

举个栗子！Alteryx 技巧（6）：从 API 中提取数据

算法、语言混编、分布式锁与分布式ID、IO模型

代码随想录 Day26 贪心 01 全集 LeetCode455 分发饼干 LeetCodeT346摆动序列 LeetCdoe T53 最大子数组和

【前端vue面试】TypeScript

vue-next-admin框架的认识

【2024秋招】2023-9-14 最右线下后端开发二面

LeetCode 2678. 老人的数目

java--三元运算符、运算符的优先级

在推荐系统中，BPRloss、Embloss、CrossEntropyloss是怎么计算的，代表的意义是什么

【Python语言速回顾】——异常文件操作

SAP POorPI RFC接口字段调整后需要的操作-针对SP24及以后的PO系统

XML Group端口详解

在软件开发中正确使用MySQL日期时间类型的深度解析

【杂谈】-递归进化：人工智能的自我改进与监管挑战

K8S认证|CKS题库+答案| 11. AppArmor

【Linux】C语言执行shell指令

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

力扣-35.搜索插入位置

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

排序算法总结（C++）