Echarts
需要了解：
浏览器画图原理：
Echarts库简介：
Echarts简单使用
Echarts组件使用
Echarts高级图例介绍
Canvas:
1.基于像素。
2.单个html,类似于画笔在画布上画画。
3.Echarts基于canvas画图
Svg:
基于对象模型。
多个图形元素。
高保真。
常见的图形组件：
1.标题，工具栏，图形，提示框
坐标轴：x轴，y轴。
介绍一下标题组件：
text:标题文字.
subtext:副标题
borderColor:边框颜色
borderWidth:边框宽度
工具栏组件：toolbox
show:是否显示。
Feature:具体显示的功能。
saveAslmage:保存图片。
Restore:还原。
dataView:数据视图。
dataZoom:缩放视图。
magicType:动态类型切换。
tooltip组件：
show:是否显示
trigger:出发方式，axis就是X轴出发。
标记线和标记点
标记线：markline
最大值，平均值，最小值的标记线
Echarts可视化：常见图表
饼图展示数据的特点：
展示百分比
Type是pie
Center 圆心坐标
Radius:半径
Name:图例名字
selectedMode 是否支持多选。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第一个实例</title>
<script type="text/javascript" src="echarts.min.js"></script>
<style type="text/css">
.zft{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="main" class="zft"></div>
<script type="text/javascript">
//初始化echarts
var myChat=echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option={
//标题
title:{
text:'第一个实例',
subtext:"学习吧骚年",
left:150
// left:'right',
//数字就是像素值，也可以是center,left ,right这种值
// borderColor:'red',
// borderWidth:5,
// textStyle:{
// fontSize:23
// }
},
//工具条
toolbox:{
show:true,
feature:{
//保存图片
saveAsImage:{
show:true
},
//数据视图
dataView:{
show:true
},
//还原
restore:{
show:true
},
//数据缩放视图
dataZoom:{
show:true
},
//做动态类型切换
magicType:{
type:['line','bar']
}
}
},
//弹出组件
tooltip:{
trigger:'axis'
},
//图例
legend:{
data:['销量']
},
//X轴
xAxis:{
data:["衬衫","羊毛衫","裤子","高跟鞋","袜子","毛衣"]
},
//Y轴
yAxis:{},
series:[{
name:"销售",
type:"bar",
data:[5,20,36,10,10,50],
//最大值，最小值
markPoint:{
data:[
{type:"max",name:"最大值"},
{type:"min",name:"最小值"}
]
},
//平均数
markLine:{
data:[
{type:"average",name:"平均值"}]
}
}]
};
//使用配置参数和数据显示图表
myChat.setOption(option);
</script>
</body>
</html>
效果图
