开发工具与关键技术：VS ECherts
作者：沈金凤
年级：18级（4）班
撰写日期：2019年5月13日
Echarts提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式，下面我们来看如何使用Echarts来实现南丁格尔图，南丁格尔图是由饼状图转化而成的，饼状图主要是通过扇形的弧度表现不同类目的数据在总和中的占比例，它的数据格式比柱状图更简单，只有一维数值，不需要给类目，因为不在直角坐标系上，所以也不需要xAxis，yAxis。下面是个简单的饼状图样式和结果图：
上面的series：是系列列表中的name(系列名称，用于tooltip的显示，legend的图例筛选)，type：是你所做的图形、radius：半径、center：图形中心的坐标位置，这里的data属性不想柱状图那样每一项都是单个数值，而是一个包含name和value属性的对象，Echerts中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见Echerts中的data文档。
下面是南丁格尔图的绘制，首先我们可以设计背景颜色，title标题的组件中的text:标题内容、left位置、字体样式（fontSize:字体大小、color:字体颜色），tooltip:提示框的组件中trigger：数据项图形触发、formatter:(a:系列名称、b：数据项名称、c：数值、d：百分比)，如下：
右边的图片中的visualMap:视觉映射组件、show(:false)：是否显示标题组件、min：坐标轴刻度最小值、max：坐标轴刻度最大值、inRange：视觉元素、colorLightness：颜色暗度，下图：sort：数据排序、label：文本标签、textStyle：标签的字体样式、color：字体颜色、labelLine：标签的视觉引导线样式、normal：普通、linestyle：线的颜色、smooth：平滑程度、length：视觉引导线第一段的长度、length2：视觉引导线第二段的长度
itemStyle都会有normal和emphasis两个选项，normal选项是正常展示的样式，color：图形的颜色、shadowBlur：图形阴影的模糊大小、shadowColor：阴影颜色，如果阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感，所以我们得把阴影下面的扇形的颜色调的浅些才行，如下的结果图就是把阴影部分调好后的效果：
第二张是当你鼠标移近每一块扇形是会触发它所对应的内容也会有稍微的变化。