*数据点过多,并且宽度过小的话,会有部分点位无法hover
legend: {
textStyle: {
color: '#666'
},
itemGap: 24,
data:[]
}
legend:操作栏,用户控制此条线是否显示
textStyle:操作栏的字体颜色
itemGap:每个操作栏的间隔
data:标题数据
注意:
*文字长度应该一样 比如01与10 和 1与10 他们的长度是不一样的
xAxis: {
type: 'category',
data: [],
axisLabel: {
formatter: function(value) {
return value.split(' ')[1];
},
interval: 35
},
boundaryGap: false
},
xAxis:x轴的配置
xAxis.data:x轴数据,例如 1:00 2:00 3:00
xAxis.axisLabel:x轴文本
xAxis.axisLabel.interval:x轴显示的间隔,例如每五分钟一个点,设置35则可以显示三小时作为一个刻度
xAxis.axisLabel.formatter:显示刻度,可以格式化显示文本
xAxis.boundaryGap:true显示在刻度中间,false显示在刻度下面
tooltip: {
backgroundColor: 'rgba(255,255,255,0.95)',
padding: 12,
axisPointer: {
type: 'line',
z: 2,
lineStyle: {
type: 'dashed',
width: 0.5
}
},
extraCssText: 'box-shadow: 2px 6px 16px 0px #D9D9D9;',
formatter: params => {
return `<div >test</div>`;
},
trigger: 'axis'
}
tooltip:悬浮框样式
tooltip.backgroundColor:悬浮框背景
tooltip.padding:内边距
tooltip.axisPointer:hover上去图标竖线样式
tooltip.axisPointer.z:此值用于显示竖线是否在最上层
tooltip.extraCssText:悬浮框阴影
tooltip.formatter:悬浮框格式化内容,可传入html
series: [{
name: '',
data: [],
type: 'line',
showSymbol: false,
smooth: true,
yAxisIndex: 0
}]
series:y轴的数据
series.showSymbol:是否显示数据点
series.smooth 是否显示平滑曲线