在echarts中有很多类型的图表,如柱状图,折线图,雷达图,地图等等,尽管这些不同的图表中配置项有着一些不同的配置属性,但是图表中有一些通用的配置如title(标题),tooltip(提示框)等。
title
title: {
text: '成绩展示',
//1 文字样式 textStyle
textStyle: {
color: 'red'
},
//2 标题边框
borderWidth: 5, //边框宽度
borderColor: 'blue', //边框颜色
borderRadius: 5, //边框圆角
//3 标题位置(left,top,bottom,right)
left: 50,
top: 10
}
tooltip
tooltip: {
//触发类型trigger(item axis)
// trigger: 'item',
trigger: 'axis',
//触发时机triggerOn(mouseover click)
triggerOn: 'click',
// 格式化formatter(字符串模板 回调函数)
//{a}(系列名称){b}(类目值){c}(数值){d}(无)
//formatter: '{b} 的成绩是 {c}',
formatter: function(arg) {
console.log(arg);
return arg[0].name + '的分数是' + arg[0].data
}
}
toolbox
toolbox: {
//添加一个feature节点,在此节点中将相应功能开启。
feature: {
saveAsImage: {}, //导出图片的功能
dataView: {}, //数据视图
restore: {}, //重置功能
dataZoom: {}, //区域缩放
//动态图标类型的切换
magicType: {
type: ['bar', 'line']
}
}
}
legend
//图例,用于筛选系列,配合series使用
legend: {
//含有一个data数组,data的值要与series中的name一致
data: ['语文', '数学']
}
代码:
var xDataArr = ['小明', '小李', '小飞', '小王', '小丽']
var yDataArr1 = [89, 78, 97, 98, 87]
var yDataArr2 = [82, 65, 67, 86, 99]
var option1 = {
title: {
text: '成绩展示',
//1 文字样式 textStyle
textStyle: {
color: 'red'
},
//2 标题边框
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5,
//3 标题位置
left: 50,
top: 10
},
tooltip: {
//触发类型trigger(item axis)
// trigger: 'item',
trigger: 'axis',
//触发时机triggerOn(mouseover click)
triggerOn: 'click',
// 格式化formatter(字符串模板 回调函数)
//{a}(系列名称){b}(类目值){c}(数值){d}(无)
//formatter: '{b} 的成绩是 {c}',
formatter: function(arg) {
console.log(arg);
return arg[0].name + '的分数是' + arg[0].data
}
},
toolbox: {
//添加一个feature节点,在此节点中将相应功能开启。
feature: {
saveAsImage: {}, //导出图片的功能
dataView: {}, //数据视图
restore: {}, //重置功能
dataZoom: {}, //区域缩放
//动态图标类型的切换
magicType: {
type: ['bar', 'line']
}
}
},
//图例,用于筛选系列,配合series使用
legend: {
//含有一个data数组,data的值要与series中的name一致
data: ['语文', '数学']
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {},
series: [{
name: '语文',
type: 'bar',
data: yDataArr1
}, {
name: '数学',
type: 'bar',
data: yDataArr2
}]
}
更多的echarts配置项学习可以在echarts官网查看 echarts官网配置项