前端数据可视化之【series、series饼图配置】配置项
目录
- 🌟Echarts配置项
- 🌟series
- 🌟饼图 type:'pie'
- 🌟写在最后
🌟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:{}}, //高亮样式，对于itemStyle
tooltip:{}, //单个数据提示框的样式
},
]
🌟饼图 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, //鼠标是否可进入提示框浮层中默认为false
confine:true, //是否将提示框限制在图表内 ，在用与移动端或者响应式的时候比较有用
//position:'bottom', //提示框的位置
backgroundColor:'#ccc', //提示框的背景颜色
borderWidth:20, //边框的大小 number
borderColor:'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的emphasis
pixelRatio:1, //保存图片的分辨率比例，默认跟容器相同大小 number
},
restore:{ //还原
show:true, //是否显示该组件
title:'这是还原', //名称
// icon:'', 图标设置
iconStyle:{color:'blue'}, //图标样式
emphasis:{iconStyle:{color:'red'}}, //移入显示样式，同上
},
dataView:{ //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
show:true, //是否显示该工具 布尔值
title:'数据视图', //移入显示的名字 string
iconStyle:{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:{}, //没个按钮的icon
title:{ //标题文本。
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！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！