ECharts图形数据结构

1. 可视化面板介绍

1. 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用。
2. 可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

2. Echarts-介绍

2.1 常见的数据可视化库：

1. D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
2. ECharts.js 百度出品的一个开源 Javascript 数据可视化库
3. Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
4. AntV 蚂蚁金服全新一代数据可视化解决方案 等等
5. Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

2.2 ECharts是什么

1. ECharts，一个使用 JavaScript 实现的开源可视化库，

2. 可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），

3. 底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

4. 大白话：
   a. 是一个JS插件
   b. 性能好可流畅运行PC与移动设备
   c. 兼容主流浏览器
   d. 提供很多常用图表，且可定制。
   e. 折线图、柱状图、散点图、饼图、K线图

5. 官网地址：https://www.echartsjs.com/zh/index.html

3. Echarts使用

1. 官方教程：五分钟上手ECharts
2. 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0

3.1 使用步骤：

1. 引入echarts.js 插件文件到 html 页面中

   <script src="./js/echarts.min.js"></script>
   

2. 准备一个具备大小的DOM容器

   <div id="main" style="width: 600px;height:400px;"></div>
   

3. 初始化echarts实例对象

   <script>
   	var myChart = echarts.init(document.getElementById('main'))
   </script>
   

4. 指定配置项和数据(option)

   <script>
   	var option = {
        
    		xAxis: {
        
       		type: 'category',
       		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   	 	},
   		yAxis: {
        
      		 	type: 'value'
   		},
   	 	series: [{
        
       		data: [820