title: 图表标题组件,显示大字标题、
tooltip: 提示框组件,增强用户体验,增加用户提示,当用户鼠标滑至或点击图表时弹出显示库,显示出阅读帮助信息。
toolbox: 工具按钮组件
legend:图例组件
1.title标题组件:
控制文字样式:textStyle 控制文字标题位置:left-top-bottom-right 控制标题边框:borderColor-borderRadius-borderWidth
以下内容皆配置在option对象下
//标题组件
title:{
text: 'titleName',
textStyle:{ //标题样式
color: 'pink'
},
borderColor: '#1e3' , //边框颜色
borderRadius: 5, //边框圆角
borderWidth: 5 , //边框宽度
left:100,
top:10},
2.tooltip提示框组件:
-
触发类型:trigger item:鼠标必须要移入到每条柱子上才显示提示信息。 axis:鼠标只要移入坐标轴就显示提示信息。
tooltip:{
//trigger:'axis'
trigger:'item'
},
-
触发时机:triggerOn click:用户点击柱子的时候才显示提示框内容 mouseover:默认方式,用户鼠标滑过时显示提示框内容
tooltip:{
//trigger:'axis'
trigger:'item'
},
-
格式化数据展示:formatter(在提示框中个性化展示你想输出给用户看的数据,一般搭配字符串模板进行使用,也可以用函数的形式)
https://www.jianshu.com/p/a3466a1b0329
3.toolbox工具栏组件:
由echarts官方提供,内置有导出图片(下载到本地)、数据视图(查看和修改原生数据)、动态类型图表的切换、数据区域显示缩放与还原、数据还原重置等五个工具供用户使用。
toolbox:{//显示工具栏按钮
feature:{
saveAsImage:{} ,//开启下载功能,将图表以图片的形式下载下来存储到本地
dataView:{}, //开启视图展示功能,方便查看原生数据和修改原生数据
restore:{}, //开启重置视图功能,恢复
dataZoom:{}, //开启视图缩放功能以及恢复功能,选中图表进行缩放
magicType:{ //开启图表的动态类型转换功能type:['bar','line'] //柱状图与折线图的切换
}
}
},
4.legend 图例组件:
用于筛选series系列数组里面的对象,legend组件需要搭配series使用
legend中的data是一个数组,legend中的data的值必须要和series数组中的某组数据的name值保持一致,不然无法显示图例组件