ECharts插件的运用

开发工具与关键技术：Visual Studio 2015 , MVC
作者：任浩基
撰写时间：2019/6/4

我们平时在VS中常常用到ECharts这一插件，那么ECharts插件有什么好处呢？其实运用ECharts插件，可以缩小代码量同时还能起到代码简洁的作用，让人觉得该代码通俗易懂的。下面我带大家了解一下ECharts插件的运用，请你们认真听噢。
其实理解ECharts并不难，只要我们认真学习即可理解其大意。那么我们先来看ECharts特性的介绍:ECharts是一个纯JavaScript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（如:IE8/9/10/11,Chrome,Firefox,Sanfari等），底层依赖轻量级的Canvas类库ZRender,提供直观、生动、可交互、可高度个性化定制的数据可视化图表。
还有一点就是ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
ECharts还有着丰富的图表类型:ECharts提供了常规的折线图，柱状图，散点图，饼图，k线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap,多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表图，并且支持图与图之间的混搭。
下面我先说一个实例：移动端的优化:我们都知道流量珍贵的移动端需要图表库的体积尽量小。ECharts和ZRender代码的重构，带来了核心部分体积的减小。ECharts组件众多，并且后面会持续增加，我们提供了更细粒度的按需打包能力。移动端交互也做优化，例如移动端小屏上适用于手指在坐标系中进行缩放、平移。PC端也可以用鼠标在图中进行缩放（用鼠标滚轮）、平移，
请看效果图:

那么上述的效果图是怎么来的呢?当然是通过代码运行得到的了
下图为代码图:

在书写代码时，我们首先要声明变量，然后再写for方法体。再然后就是对你想要的图像（图表）进行设计了。
下面说的是我在做项目时，用到ECharts插件设计出的一个饼图。
第一步:在书写代码时，我们首先要引入该插件:
第二步:要先准备好一个放图表的容器:

第三步:设置参数，以及初始化图表：

这样简单的一个统计图表就出来了，我使用的是饼图。
下图是代码运行的效果图:

好了技术讲述就到这里了，相信大家对ECharts插件的运用都有所理解了吧。