常见的数据可视化库

D3.js 目前Web端评价最高的Javascript可视化工具库(入手难)
ECharts.js 百度出品的一个开源Javascript数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案
Highcharts和 Echarts就像是Office和 WPS的关系
数据可视化主要目的:借助于图形化手段，清晰有效地传达与沟通信息
数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
数据可视化库有很多，接下来我们重点学习ECharts
常用：折线图、柱状图、饼状图、散点图、雷达图、地图

项目技术

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

ECharts使用五步曲

步骤1∶下载并引入echarts.js文件 scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/4.5.0/echarts-en.common.js"
步骤2∶准备一个具备大小的DOM容器
生成的图表会放入这个容器内
步骤3∶初始化echarts实例对象 var myChart = echarts.init(document.querySelector(‘.box’));
步骤4∶指定配置项和数据(option) 复制图表所有代码var option ={XXX}
步骤5∶将配置项设置给echarts实例对象 myChart.setOption(option);

相关配置讲解

title: 标题组件
tooltip∶ 提示框组件
legend: 图例组件
toolbox: 工具栏
grid: 直角坐标系内绘图网格
xAxis: 直角坐标系grid 中的x轴y
Axis: 直角坐标系grid 中的y轴
series: 系列列表。每个系列通过type决定自己的图表类型(什么类型的图标)
color: 调色盘颜色列表
先了解以上9个配置的作用，其余配置还有具体细节我们查阅文档∶文档菜单—配置项手册学echarts关键在于学会查阅文档，根据需求修改配置
series:系列列表
type: 类型(什么类型的图表)比如line是折线 bar 柱形等
name: 系列名称，用于tooltip的显示，legend的图例筛选变化
stack:数据堆叠 如果设置相同值，则会数据堆叠。
数据堆叠: 第二个数据值=第一个数据值＋第二个数据值
第三个数据值=第二个数据值＋第三个数据值…依次叠加
如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠

地图

阿里云数据可视化-地图API http://datav.aliyun.com/portal/school/atlas/area_selector
Echarts实例化 https://echarts.apache.org/examples/zh/index.html