已解决
前端数据可视化之【series、series饼图配置】配置项
来自网友在路上 180880提问 提问时间：2023-10-24 21:07:22阅读次数： 80
最佳答案 问答题库808位专家为你答疑解惑
目录
- 🌟Echarts配置项
- 🌟series
- 🌟饼图 type:'pie'
- 🌟写在最后
🌟Echarts配置项
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
想让ECharts展示出我们预期的效果，就要在 myChart.setOption()方法中传入一个指定的options配置项，其类型为Object；options中的配置项非常之多，记住所有的并不太现实，在这里列一些重要的做介绍
🌟series
每个系列通过 type 决定自己的图表类型
series是一个数组，里面可以写很多的对象，每一个对象就是一个图表类型，每个对象上的type属性来控制图表的类型，他们有很多都一样的样式
data是这里比较重要的，每种图表类型中都有，我在这里先总结了他们共有的部分，后面每种图表就只介绍他们特殊的部分。
data:[{name:'90-100', //数据项名称value: 500, //单个数据项的数值label:{}, //每种图表的解释不同itemStyle:{}, //折线拐点标志的样式,每种图标解释也不同emphasis:{itemStyle:{}}, //高亮样式，对于itemStyletooltip:{}, //单个数据提示框的样式},
]
🌟饼图 type:‘pie’
饼图简单案例
<!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！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"前端数据可视化之【series、series饼图配置】配置项"：http://eshow365.cn/6-23613-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！