Echarts数据可视化

Echarts数据可视化

数据可视化

目的：借助于图像化手段，清晰有效地传达与沟通信息
场景： 通用报表、移动端图表、大屏可视化、图编辑&图分析、地理可视化
常见数据可视化
Echarts.js 开源JavaScript数据可视化库

Echarts简介

是一个使用JavaScript实现的开源可视化库
Echarts官网地址

基本使用

五步曲
1.下载并引入echart.js文件
2.准备一个具备大小的DOM容器
3.初始化echarts实例对象
4.指定配置项和数据
5.将配置项给echarts实例对象

选择不同类型图表
官网-实例

相关配置
官网-文档-配置项手册
在于学会查阅文档，会根据需求修改配置

stack 数据堆叠
第二个数据值=第一个数据值+第二数据值
以此类推

边框图片

在css3中，新增了border-image属性，这个新属性允许指定一幅图像作为元素的边框
切图原理(重要)
把四个角切出去，中间部分可以铺排、拉伸或环绕
按照 上右下左顺序切割
哪个角大 照顾哪个角

边框图片语法（重要）

div {
	width:400px;
	height:300px;
	border:15px solid pink;
	border-image-source: url();
	border-image-slice: 30 30 30 30;
	/* border-image-slice: 30;  一个值相当于上下左右相同*/
	
	/* 这个属性默认是border  不会挤压文字*/
	border-image-width:30px;
	border-image-repeat:repeat;
}