1.标题负责显示整个图表的标题
- Text:标题文字
- SubText:子标题
- Left,top,right,bottom标题位置
- borderColor:边框颜色
title:{
show:true,
text:'Echarts 入门示例', //标题
subtext:'学习ECharts', //子标题
left:'center',
borderColor:'red', //边框颜色
borderWidth:1 //边框的宽度
},
- 更多属性设置
工具栏组件
- 是否显示:show
- 具体显示的功能:feature
- 保存图片:saveAsImage
- 还原:restore
- dataView:数据视图
- dataZoom:缩放视图
- magicType:动态类型切换
toolbox:{
show:true,
feature:{
//若是咱们须要改数据视图里面的样式可能就须要改optionToContent方法
dataView:{
show:true
},
restore:{
show:true
},
dataZoom:{
show:true
},
//显示保存为图片
saveAsImage:{
show:true
},
magicType:{
type:['bar','line ']
}
}
},
3.tooltip组件(弹窗组件)
- 是否显示:show
- 触发类型
- item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
- axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图标中使用
tooltip:{
show:true,
trigger:'axis'
},
4.标记线和标记点
- 标记线:markline
- 标记线的添加
- 最大值,平均值,最小值的标记线
- 标记点:markpoint
series:[{
name:"销量",
type:'bar',
data:[5,20,44,10,10,20],
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{
data:[
{type:'average',name:'平均线'}
]
}
}],
};