数据可视化
数据可视化主要目的,借助于图形化手段清晰有效的传达与沟通信息
数据可视化把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理
Echarts简介
常见的数据可视化库:
- - D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
- - ECharts.js 百度出品的一个开源 Javascript 数据可视化库
- - Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- - AntV 蚂蚁金服全新一代数据可视化解决方案 等等
- - Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
> ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 提供直观,交互丰富,可高度个性化定制的数据可视化图表。
使用步骤:
1. 引入echarts 插件文件到html页面中
2. 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
3. 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
4. 指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
5. 将配置项设置给echarts实例对象
myChart.setOption(option)
Echarts-基础配置
需要了解的主要配置:`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color`
1. title:标题组件
2. tooltip:提示框组件 .
- trigger 'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
- 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
'none'
什么都不触发。
3. legend:图例组件 series里面有了name值legend里面的data可以删掉
4. toolbox:工具箱组件,可以另存为图片
5. grid:直角坐标系内绘图网格,可以控制图表大小
- containLabel: true是否显示刻度标签
6. xAxis:直角坐标系 grid 中的 x 轴
- type坐标轴类型。
-
'value'
数值轴,适用于连续数据。 -
'category'
类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,或者可通过 xAxis.data 设置类目数据。 -
'time'
时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。 -
'log'
对数轴。适用于对数数据。 - boundaryGap: false,是否让线条和坐标轴有缝隙
- data:数据
7. yAxis:直角坐标系 grid 中的 y 轴
8. series
- 系列列表。每个系列通过 `type` 决定自己的图表类型
- 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
数据堆叠,同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加。
color:调色盘颜色列表 数组