一、概述
1.什么是E chart？
ECharts，apache公司开源项目。一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
官网：https://www.echartsjs.com/zh/index.html
2.什么是G2？
G2是AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
官网：https://g2.antv.vision/zh
3.能做什么？
简单来说，使用E chart或者G2，可以将Excel表格以及图标，实现在PC端或者手机端展示。直观一点说，在网页（html）上展示。
4.效果
二、（G2）安装
npm install @antv/g2
快速上手
在绘图前我们需要为 G2 准备一个 DOM 容器：import { Chart } from ‘@antv/g2’;
const data = [
{ genre: ‘Sports’, sold: 275 },
{ genre: ‘Strategy’, sold: 115 },
{ genre: ‘Action’, sold: 120 },
{ genre: ‘Shooter’, sold: 350 },
{ genre: ‘Other’, sold: 150 },
];// Step 1: 创建 Chart 对象
const chart = new Chart({
container: ‘c1’, // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300, // 指定图表高度
});// Step 2: 载入数据源
chart.data(data);// Step 3: 创建图形语法，绘制柱状图
chart.interval().position(‘genre*sold’);// Step 4: 渲染图表
chart.render();
⌨️ 本地开发# 安装依赖
$ npm install# 运行测试用例
$ npm run test# 打开 electron 运行测试用例，监听文件变化构建
$ npm run test-live# 运行 CI
$ npm run ci# 运行网站
$ npm start
三、利用js，直接由浏览器引入
既可以通过将脚本下载到本地也可以直接引入在线资源：
你也可以直接通过 unpkg 下载。
简单来说，在html中加入上边的代码，就可以使用，很方便吧。
四、开发示例
在 G2 引入页面后，我们就已经做好了创建第一个图表的准备了。
下面是以一个基础的柱状图为例开始我们的第一个图表创建。
1. 创建 div 图表容器
在绘图前我们需要为 G2 准备一个 DOM 容器：
2. 编写图表绘制代码
创建 div 容器后，我们就可以进行简单的图表绘制：
创建 Chart 图表对象，指定图表所在的容器 ID、图表的宽高、边距等信息；
载入图表数据源；
使用图形语法进行图表的绘制；
渲染图表。柱状图
这样，你的第一个柱状图就绘制完成了!
五、小白建设方案
以g2为例，完成“小白”也会用的展示可视化数据。
第一步：到蚂蚁G2官网找到自己想要用到的图标，获取源代码（开源项目）
第二步：新建以UTF-8编码格式的文本（脚本）文档，引入源代码。
第三步：将data数据改为自己真实数据，其他标签改为自己需要的内容。
第四步：数据比较多的，可以使用fetch函数直接调用json文件。
第五步：将后缀改为html，运行-完成。
第六步，将网页或者改好的代码挂到服务器。
第七部；浏览器访问，完成。
六、将Excel数据展示方案
此方案为简易型方案。首先，将Excel表另存为csv或者xml格式文件；其次，百度json格式转化，将csv或者xml格式文件转换为json文件；再次，将json文件挂到服务器或者云存储里（可访问），使用fetch函数调用；最后，浏览器引入，展示。
七、官网：
百度：apache E chart，蚂蚁金服G2。