var myChartOne = echarts.init(document.getElementById('cityTimeCount'));
optionOne = {
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器,座標軸觸發有效
type : 'line' // 默認爲直線,可選爲:'line' | 'shadow'
},
formatter:function(p){
var text = p[0].name+'<br>'+p[0].seriesName+':'+p[0].value+'人'+' '+'12:20'+'<br>'+p[1].seriesName+':'+p[1].value+'人'+' '+'12:20'+'<br>'+p[2].seriesName+':'+p[2].value+'人'+' '+'12:20'+'<br>'+'最大值'+':'+parseFloat(parseFloat(p[3].value)+parseFloat(p[1].value))+'人'+' '+'12:20'+'<br>';
return text;
},
},
legend: {
selectedMode:false,
textStyle:{color:'#92b1d8',},
bottom: '2.2%',
x:'center',
data:[{name:'上網用戶波動值',icon:'stack'},'區域歷史峯值','平均值']
},
grid: {
top:'6%',
left: '2%',
right: '2%',
bottom: '10%',
containLabel: true
},
calculable : true,
xAxis : [
{
axisLabel: {
show: true,
textStyle: {
color: '#92b1d8'
},
},
data : ['上海','北京','廣州','天津','合肥','長沙','湖北','鄭州','深圳','遼寧','甘肅','長春']
}
],
yAxis : [
{
splitLine: {
lineStyle: {
// 使用深淺的間隔色
color: ['#393e4c']
}
},
type : 'value',
axisLabel: {
show: true,
textStyle: {
color: '#92b1d8'
},
},
}
],
series : [
{
name:'區域歷史峯值',
type:'line',
step: 'middle',
showSymbol: false,
itemStyle:{
normal:{
color:'#35a165',
},
emphasis:{
color:'#35a165'
},
},
data:[82.0, 44.9, 47.0, 63.2, 35.6, 56.7, 125.6, 162.2, 72.6, 60.0, 46.4, 43.3],
},
{
name:'最低值',
barWidth:15,
type:'bar',
stack: '浮動',
itemStyle:{
normal:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
},
emphasis:{
barBorderColor:'rgba(0,0,0,0)',
color:'rgba(0,0,0,0)'
}
},
data:[12.6, 15.9, 19.0, 26.4, 28.7, 70.7, 35.6, 102.2, 48.7, 18.8, 16.0, 12.3],
},
{
name:'平均值',
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
symbolSize: 8,
label: {
normal: {
textStyle:{fontSize:'0'},
},
},
itemStyle:{
normal:{
barBorderColor:'#ff8000',
color:'#ff8000'
},
emphasis:{
barBorderColor:'#ff8000',
color:'#ff8000'
}
},
data: [70, 60, 39.0, 36.4, 40.7, 70, 115.6, 122.2, 68.7, 28.8, 40.0, 37.3],
},
{
z:2,
barMinHeight:2,
barWidth:15,
stack: '浮動',
name:'上網用戶波動值',
type:'bar',
data:[43,34,50,26,42,28,39,80,29,22,53,34],
itemStyle:{
normal:{
barBorderColor:'#366fb6',
color:'#366fb6'
},
emphasis:{
barBorderColor:'#366fb6',
color:'#366fb6'
}
},
},
]
};
myChartOne.setOption(optionOne);
}