配置项如下
var data = [
{name:'2016/12/01', value:['2016/12/01', 80]},
{name:'2016/12/08', value:['2016/12/08', 60]},
{name:'2016/12/15', value:['2016/12/15', 90]},
{name:'2016/12/15', value:['2016/12/15', 70]}
];
var anchor = [
{name:'2016/1/30 ', value:['2016/1/30', 0]},
{name:'2016/12/31', value:['2016/12/31', 0]}
];
option = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
grid:{ show:true,//是否显示直角坐标系的网格,true显示,false不显示
left:100,//grid组件离容器左侧的距离
containLabel:false,//grid 区域是否包含坐标轴的刻度标签,在无法确定坐标轴标签的宽度,容器有比较小无法预留较多空间的时候,可以设为 true 防止标签溢出容器。
},
xAxis: {
type: 'time',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '20%'],
splitLine: {
show: true
}
},
dataZoom: [ { type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35 },
{ type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35 },
],
series: [{
name: '模拟数据',
type: 'scatter',
showSymbol: false,
hoverAnimation: false,
data: data
},
{
name:'.anchor',
type:'scatter',
showSymbol:false,
data:anchor,
itemStyle:{normal:{opacity:0}},
lineStyle:{normal:{opacity:0}}
}]
};