前方高能【官方介绍】

特性 - Apache ECharts (incubating)

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

实践

1、 使用VS2019创建一个asp.net core web项目，选择ASP.NET Core Web 应用程序，并使用Web应用程序(模型视图控制器)模板

2、使用libman添加echarts库

在解决方案资源管理器中选择项目名称->wwwroot->lib，在lib文件夹上右击，选择：添加->客户端库，弹出窗口输入echarts，自动带出最新的版本，由于使用了cdnjs，上面最新版为4.3.0，在其他的如：jsdelivr、unpkg上面最新版为4.5.0。不过使用jsdelivr、unpkg现在4.5.0版本失败，所以选择了cdnjs上面的4.3.0版本。

插曲：在弹出的客户端库输入内容时，如果时中文输入法，已输入部分文字，切换为英文输入法时，会导致vs2019重启，所以在客户端库窗口输入内容时一定要前切换到英文输入法

3、添加一个action，名为Echarts,并添加相应的视图

在视图中添加如下代码，id为mychart的div用于放置echarts图表

<div class="row"> <div class="col-md-12"> <div id="myechart" style="width: 100%; height: 500px;">  </div> </div> </div>

添加相关js的引用

<script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/echarts/echarts.js"></script>

4、使用Echarts

准备的json数据存放到了github上面：https://github.com/mzy666888/datajson
在引用的的js库的下方编写js代码使用echarts显示图表。
首先定义了一个结构，用于存放数据。

function Series(type, xdata, seriesData) {         this.typeName = type;//相当于title         this.xdata = xdata;//X轴数据         this.seriesData = seriesData;//Y轴数据     }

声明一个charts实例。
> echartInstance.clear：
清空当前实例，会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。在多次查询时需要用到清除上次添加的内容