1、全图默认背景
backgroundColor:'rgba(10,20,81,0.38)',
2、提示框
tooltip : {
trigger: 'axis',// 触发类型,默认数据触发,可选为:'item' ¦ 'axis'
showDelay: 20, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
hideDelay: 100, // 隐藏延迟,单位ms
transitionDuration : 0.4, // 动画变换时间,单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色,默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角,单位px,默认为4
borderWidth: 0, // 提示边框线宽,单位px,默认为0(无边框)
padding: 5, // 提示内边距,单位px,默认各方向内边距为5,
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'line' , // 默认为直线,可选为:'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 阴影指示器样式设置
width: 'auto', // 阴影大小
color: 'rgba(150,150,150,0.3)' // 阴影颜色
}
},
formatter: function (params){
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + params[0].value+'%'+ '<br/>'
+ params[1].seriesName + ' : ' + params[1].value + '%';
}
},
3、全局文本
textStyle: {
fontFamily: 'Arial, Verdana, sans-serif',
fontFamily2: '微软雅黑', // IE8- 字体模糊并且不支持不同字体混排,额外指定一份
// fontSize: 10,
color:'WhiteSmoke'
},
4、图例
legend: {
orient: 'horizontal', // 布局方式,默认为水平布局,可选为: 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置,默认为全图居中,可选为: 'center' ¦ 'left' ¦ 'right' // ¦ {number}(x坐标,单位px)
y: 'top', // 垂直安放位置,默认为全图顶端,可选为:'top' ¦ 'bottom' ¦ 'center' // ¦ {number}(y坐标,单位px)
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1, // 图例边框线宽,单位px,默认为0(无边框)
borderColor: '#ccc', // 图例边框颜色
padding: 5, // 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
itemGap: 10, // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: 'WhiteSmoke' // 图例文字颜色
},
data:['当前','历史']
},
5、网格
grid: {y: 30, y2:20, x2:20},
6、坐标轴
yAxis : [
{
name:'百分比',
type : 'value',
position: 'left', // 位置
nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end'
nameTextStyle:{color:'RGBA(6, 243, 250, 1)'},// 坐标轴文字样式,默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空白策略
splitNumber: 5, // 分割段数,默认为5
axisLine: { // 坐标轴线
show:true, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle控制线条样式
color: 'rgba(6,243,250,1)',
width: 2,
type: 'solid'
}
},
axisTick: { // 坐标轴小标记
show: false, // 属性show控制显示与否,默认不显示
inside : false, // 控制小标记是否在grid里
length :5, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'rgba(6,243,250,1)',
width: 1
}
},
axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
show: true,
rotate: 0,
margin: 8,
formatter: '{value} %',
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
color: 'rgba(6,243,250,1)'
}
},
splitLine: { // 分隔线
show: false, // 默认显示,属性show控制显示与否
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
color: ['#ccc'],
width: 1,
type: 'solid'
}
},
splitArea: { // 分隔区域
show: true, // 默认不显示,属性show控制显示与否
areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
}
}
}
],