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

🌟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>