目标

能够说出数据可视化的目的
能够说出ECharts的基本使用步骤
能够独立使用Echarts完成可视化项目开发

1. 什么是数据可视化

1.1 数据可视化概述

数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

1.2 数据可视化的场景

通用报表
移动端图标
大屏可视化
图编辑，图分析
地理可视化

1.3 常见的数据可视化库

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

1.4 小结

借助图形传递信息

重点学习 Echarts

2. 数据可视化项目概述

技术栈

HTML5 + CSS3布局csS3动画、渐变
jQuery库+原生JavaScript
flex布局和rem适配方案
图片边框border-image
ES6模板字符
ECharts可视化库等等

3. Echarts 简介

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

优点

丰富的可视化类型
多种数据格式支持
流数据的支持
移动端优化
跨平台使用
绚丽的特效
详细的文档说明

4. Echarts的基本使用

分为5步

下载并引入Echarts.js文件（图表依赖这个库）
准备一个具备大小的DOM容器（生成的东东放入这个容器里）
初始化Echarts实力对象（实例化echarts对象）
指定配置项和数据(option) （根据具体需求修改配置选项

） 5. 将配置项设置给echarts实例对象（让他生效）

    <script src="../js/Echarts.min.js"></script> //引入

    <div class="box"></div>

    <script>
        
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('.box'))

           // 指定图表的配置项和数据
           var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
复制代码

4.1 相关配置讲解

title :标题组件
tooltip∶提示框组件
legend:图例组件
toolbox:工具栏
grid:直角坐标系内绘图网格
xAxis:直角坐标系grid中的×轴
yAxis:直角坐标系grid中的y轴
series:系列列表。每个系列通过type 决定自己的图表类型(什么类型的图标)
color:调色盘颜色列表

更多的去查文档

series:系列列表

type:类型(什么类型的图表)比如line是折线bar柱形等
name:系列名称，用于tooltip的显示，legend 的图例筛选变化
stack:数据堆叠。如果设置相同值，则会数据堆叠。

数据堆叠:第二个数据值=第一个数据值＋第二个数据值第三个数据值=第二个数据值＋第三个数据值....依次叠加如果给stack指定不同值或者去掉这个属性则不会发生数据堆叠

一文了解数据可视化 包含（ECharts）

目标

目录