Echarts是基于canvas的数据可视化产品，由百度公司推出
参考官方文档，引入教程示例即可，注意有两种引入方式：
（1）直接引入
（2）模块化引入
grid:{设置图标整体的大小
//x:'20%',x,y表示左上角的相对位置，
//y:100,
//x2:200,x2,y2表示右下角的相对位
//y2:100,
width:'50%',宽度设置
left:'30%',left设置
//containLabel:true
},
xAxis:{
show:true,设置显示隐藏坐标轴
type:'category',设置坐标轴类型，共category，value，time三种类型
boundaryGap:true,设置是否在图形开始处于y轴留有间距
//position:'top',设置x轴的位置在顶端
axisLine:{
onZero:false,设置x轴不以y轴的0点开始
lineStyle:{设置x轴的样式
color:'red',
width:2,
type:'solid'
}
axisTick:{
show:true,设置x轴上标点显示
length:10,设置x轴上标点显示长度
lineStyle:{设置x轴上标点显示样式
axisLabel:{设置标点内容显示样式
show:true,
rotate:45,设置标点内容45度倾斜显示
margin:30,
textStyle:{
color:'blue',
fontFamily:'微软雅黑'
formatter:function(val){设置显示data中的内容，可以传函数val是data中元素
returnval+'函数'
splitLine:{设置x轴标点分割线样式
lineStyle:{
color:'skyblue',
type:'dashed',
width:1
splitArea:{设置x轴标点分割区域样式
name:'星期',
data:['周一','周二',{可以将数据设置成对象，单独设置样式
value:'周三',
fontSize:30,
fontWeight:'bold'
},'周四','周五','周六','周日']
yAxis:{
type:'value',
max:20,设置y轴的最大值
axisLabel:{
formatter:'{value}°C'
①折线显示
series:[{
name:'最低气温',
type:'line',设置数据显示为折线
设置折线上标记点的样式，可以引用图片，也可以写star
symbolSize:30,设置标记大小
showAllSymbol:true,设置显示所有标记
smooth:true,设置折线图平滑显示
legendHoverLink:false,关闭选择不同折线图时的高亮效果
data:[1,-2,2,5,{单独设置某个数据的样式
value:3,
symbolSize:50
},2,0],
itemStyle:{设置折线图的样式
normal:{设置默认样式
color:'black',
width:3,
color:'green'
areaStyle:{设置折线图与坐标进行填充
color:'yellow'
label:{
position:'bottom',设置折线上标记数据在下方显示
color:'red'
emphasis:{设置鼠标移动到数据上时的，强调显示效果
position:'top',
color:'gray'
}]
②柱形图显示
dataZoom:{开启数据图缩放功能
show:true
name:'蒸发量',
type:'bar',
barGap:'-50%',设置相同标记位柱形图之间的相对位置
barCategoryGap:'20%',设置不同标记位柱形图之间的位置
barWidth:10,设置柱形图的宽度
data:[2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],
markPoint:{
data:[{
type:'max',
name:'最大值'
},{
type:'min',
name:'最小值'
markLine:{
type:'average',
name:'平均值'
title:{
text:'某地区蒸\n发量和降水量',\n表示换行
subtext:'纯属虚构',副标题
x:100,x,y表示标题的位置设置，可以为left等
y:200
legend:{
data:[{可单独设置数据的样式，加入””空字符串可实现换行
color:'green',
},'降水量'],
borderColor:'red',
formatter:'{name}Echarts',设置模板显示，也可以写函数
itemWidth:20,设置图例样式的宽
itemHeight:20,设置图例样式的高
selected:{'降水量':false},
textStyle:{color:'blue'}设置图例文字的颜色
dataZoom:{
realtime:false,关闭实时变化功能
start:40,设置开始和结束的范围
end:60,
zoomLock:true开启锁定范围的功能
tooltip:{
//trigger:'axis',
trigger:'item',只当鼠标经过数据时显示
showContent:false,关闭数据详细信息框
showDelay:0,关闭显示延迟
transitionDuration:0,关闭动画延迟效果
hideDelay:1000,设置鼠标离开后延迟消失效果
axisPointer:{设置背景提示样式，有cross、line、shadow三种