1.最终样式如下：
关键点在于没有数据得地方用"-"补齐
直接上代码
var ScenicFlowCapacity = { color: ['#216fda', '#ff5840', '#fcbd24'], title: { x: 0, y: 0, show: false, textStyle: { color: '#76DCFF', fontSize: fonts20, fontWeight: 'normal' } }, xAxis: { type: 'category', data: d5, axisTick: { show: false }, splitLine: { show: false, }, axisLabel: {
fontWeight: 'normal',
fontSize: fonts12,
color: '#ADCBDD'
},
axisLine: {
lineStyle: {
color: '#ffffff',
width: 1,
type: 'solid'
}
}
},
legend: {
show: false,
data: ['实时客流'],
top: -10,
right: 10,
textStyle: {
color: ['#09AF9E', '#178acc', '#FF9D15', '#FF9F22'],
fontSize: fonts12,
padding: 1
},
padding: [15, 0, 0, 0],
itemGap: 10,
},
yAxis: [
// {
// nameTextStyle: {
// color: "#ADCBDD",
// fontSize: 12
// },
// name:'客流',
// type: 'value',
// margin: 10,
// axisTick: {
// show: false
// },
// nameTextStyle: {
// color: '#fff'
// },
// axisLabel: {
// color: '#fff'
// },
// splitLine: {
// show: false
// },
// axisLabel: {
// fontWeight: 'normal',
// fontSize: 12,
// color: '#ADCBDD'
// },
// splitLine: {
// show: true,
// lineStyle: {
// type: 'dashed',
// color: ['rgba(255,255,255,0.1)']
// }
// },
// axisLine: {
// lineStyle: {
// color: '#ffffff',
// width: 1,
// type: 'solid'
// }
// }
// },
{
nameTextStyle: {
color: "#ADCBDD",
fontSize: 12
},
name: '客流数',
type: 'value',
margin: 10,
axisTick: {
show: false
},
nameTextStyle: {
color: '#fff'
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
axisLabel: {
fontWeight: 'normal',
fontSize: 12,
color: '#ADCBDD',
formatter: '{value}'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: ['rgba(255,255,255,0.1)']
}
},
}
],
grid: {
left: '4%',
right: '1%',
top: '35px',
bottom: '1%',
containLabel: true
},
tooltip: {
show: true
},
series: [{
name: '客流数',
yAxisIndex: 0,
connectNulls: true,
lineStyle: {
normal: {
width: 2
}
},
data: d5,
type: 'line',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
color: '#1DE0FF',
normal:{
lineStyle:{
type:'dotted' //'dotted'虚线 'solid'实线
}}
},
tooltip: {
padding: 5,
backgroundColor: '#061840',
borderColor: '#0289D5',
borderWidth: 3,
textStyle: {
color: '#1DE0FF'
},
formatter: '预测{a}:{c}'
},
},
{
name: '客流数',
yAxisIndex: 0,
lineStyle: {
normal: {
width: 2
}
},
data: d2,
type: 'line',
symbolSize: 10,
symbol: 'circle',
itemStyle: {
color: '#1DE0FF'
},
tooltip: {
padding: 5,
backgroundColor: '#061840',
borderColor: '#0289D5',
borderWidth: 3,
textStyle: {
color: '#1DE0FF'
},
formatter: '{a}:{c}'
},
}, {
name: '超过客流承载量',
yAxisIndex: 0,
lineStyle: {
normal: {
width: 0
}
},
tooltip: {
padding: 5,
backgroundColor: '#061840',
borderColor: '#0289D5',
borderWidth: 3,
textStyle: {
color: '#1DE0FF'
},
formatter: '{a}<br />{c}%'
},
type: 'line',
symbolSize: 20,
symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAfCAYAAABkitT1AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDUvMTQvMjG71iQ0AAACTElEQVRYhc2Yz0tVQRTHP/flkwwVMaHf4K9c1CZpI29h4CKiVYRhm8IQlDZBi8iiRVAQ4h8gLUwxKojaJFkQuBRama3aCS5qE7R5qwSfizv3dd7tzr1nZoL8wsB3zjlzzvfOnTcz70a1Wo29itL/FpCHpoRURyq+OSLgKvCI+GEfA4vAjk+y1tW1Og+duQh4DbwE+oAeYB74YHxBCBU3BYxm2M8DdwNzB4nrAuZy/E+AowH5g8S9UcS8I+D1+oq7CJwT/SowYVpV2M8CVzxr/Pm1OqAFeJuynQa2DP8kOMALYIVG0Sr4zNxTYH/K9l3wHylfE7DgUcdZ3BngWoa9bOEJRoEhx1pO4vYBHy2+A4K3WGKWyRZuhYu4e8Ahi69N8HZLTBfw0KGeWtxx4uPJhg4LT+M+0K2sqRIXEe9XeTgoeGdB7HuUe59G3BgwWBAjT4JjBbGngOuKuoXi2oDnijyHLdyGZ+S/fqBY3BK6jbpb8BOK+BLwShNkQwW4pCgE0Cv4SeWYC8BwXoBNXJl44WrRa+FFWAaabU6buBkUa0JgQPB+h3HtwKzNmSWuH7jtUCBBzTTXI/EWjQ9XRzpRifgG4YPPwBfPsSsZWv4yTKJf0BKXiQ/2QcNd0QfcTBuj5H9rdaTSAfzySAzxot42vAz89szT2bq6VtcgZ+6OZ0JonG2fmU8wLTtSXNY9TYt14IFp6wF5JmVH7v4/0e3uWWgm/9aixabsyJm78Q+Sh2JcdqS4DeAI8Qb8Dc/PCY7YMbVmTO2v0hnt5a9Mu8kVUCglkiusAAAAAElFTkSuQmCC",
lineStyle: {
color: '#5470C6',
width: 4,
type: 'dashed'
},
itemStyle: {
borderWidth: 3,
borderColor: '#EE6666',
color: 'yellow'
}
}
]
};
var dom_j = document.getElementById("ScenicFlowCapacity");
var myChart_ScenicFlowCapacity = echarts.init(dom_j);
myChart_ScenicFlowCapacity.setOption(ScenicFlowCapacity);
getRealTimeFlow();
function getRealTimeFlow(serdata) {
console.log(serdata);
var d1 = [],
d2 = [],
d3 = [],
d4 = [],
d5 = [];
$.ajax({
url: weburl + 'travelapi/dgzwyTouristNum/getScenicFlowCapacityZXGC',
async: true,
cache: false,
dataType: 'json',
headers: heder,
data: serdata,
success: function(resp, textStatus) {
//console.log(resp);
var jsonObj = resp;
checkusr(jsonObj);
$("#RealFlowHZ").html('0');
s = eval('(' + jsonObj.msg + ')');
console.log(s,666)
for (var i = 0; i < s.length; i++) {
d2[i] = s[i].hjCount;
if (d2[i] >= 20000) {
d4[i] = d2[i]
}
//$("#RealFlowHZ").html(d2[i]);
}
// d4[n]=t;
console.log(d2,2)
},
error: function() {}
});
$.ajax({
url: weburl + 'travelapi/dgzwyTouristNum/getScenicFlowCapacityForecastZXGC',
async: true,
cache: false,
dataType: 'json',
headers: heder,
data: serdata,
success: function(resp, textStatus) {
//console.log(resp);
var jsonObj = resp;
checkusr(jsonObj);
s = eval('(' + jsonObj.msg + ')');
console.log(s,666)
for (var i = 0; i < s.length; i++) {
d3[i] = s[i].hjCount;
if (d3[i] >= 20000) {
d4[i] = d3[i]
}
//$("#RealFlowHZ").html(d2[i]);
}
// d4[n]=t;
console.log(d2,3333)
var index=24-d3.length
var index2=24-d2.length
var index1=d2.length-1
console.log(index)
console.log(index1)
console.log(d3[index1])
console.log(d3,3)
for(var t=0;t<index2;t++){
d2.push('-')
}
console.log(d2,222)
d3.unshift(d2[index1])
for(var h=0;h<index-1;h++){
d3.unshift('-')
}
console.log(d3,3333)
ScenicFlowCapacity.series[2].data = d4;
ScenicFlowCapacity.xAxis.data = ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时','18时','19时','20时','21时','22时','23时'];
myChart_ScenicFlowCapacity.setOption(ScenicFlowCapacity);
ScenicFlowCapacity.series[1].data = d2
ScenicFlowCapacity.series[0].data =d3
myChart_ScenicFlowCapacity.setOption(ScenicFlowCapacity);
},
error: function() {}
});
}
主要是一些数据得添加，给他补齐
如果对你有帮助，请点个赞吧
