绘制echarts图表

 

 

 

 

开发工具与关键技术：VS + C#

 

撰写时间：2019.6.15

 

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

如图下面是饼状图分析，饼状图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。

开始绘制图表之前，需要设置一个容器装绘制的图表，而这里我们用的是一个固定大小的div存放。因为有两个饼状图，所以在里面放入两个容器。

然后基于准备好的dom，初始化echarts实例。然后通过echarts.init(document.getElementById("ID"))，获取到存放图表容器的ID。

初始化之后，我们开始设置图表的配置项以及数据，首先设置的是标题组件。标题的文字是通过选择查询出来的信息拼接起来的，使用一个全局变量。然后设置标题的位置在左上角，再设置文本的格式。可参考配置项手册

然后就是提示框组件，什么是提示框？就是当我们鼠标放进图表中的时候，在对应的数据项弹出来的一个提示框，里面填写着该数据项一些相关的信息。

另外 Echarts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。itemStyle都会有normal和emphasis两个选项，normal选项是正常展示下的样式，emphasis是鼠标 hover 时候的高亮样式。

然后就是图例组件，例如左边的饼状图，只有两个图例（合格，不合格），设置图例的排列方向，位置，data（系列中的数据内容数组）

最后是系列列表，也就是图表的数据。首先设置它的系列名称，然后选择我们需要的图表类型（常用：pie:饼图, bar:柱状图, line:折线图），每个系列通过 type 决定自己的图表类型，并且饼状图需要设置内外半径以及根据容器去定位设置饼状图中心的坐标位置。

注：然后还有很重要的一步，需要使用指定的配置项和数据显示图表，否则无法正常运行

以上是简单介绍一下如何创建简单的图表，想要深入了解学习，可浏览参考Echarts官方文件。