echatrs同一個頁面多圖表展示，柱狀圖，折線圖，油表，地圖……
阿新 • • 發佈：2019-02-03
/* 卸車時間 */
function drawUninstall(ec) {
var myBarChart = ec.init(document.getElementById('uninstallGoods'));
var option1 = {
backgroundColor : '#1B1B1B',
title : {
text : '2017 年 8 月液硫卸車時間'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '單位：分鐘' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar', 'stack', 'tiled' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
splitLine : {
show : false
},
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'category',
boundaryGap : false,
data : [ '8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日',
'8月7日', '8月8日', '8月9日', '8月10日', '8月11日', '8月12日',
'8月13日', '8月14日', '8月15日', '8月16日', '8月17日',
'8月18日', '8月19日', '8月20日', '8月21日', '8月22日',
'8月23日', '8月24日', '8月25日', '8月26日', '8月27日',
'8月28日', '8月29日', '8月30日', '8月31日' ]
} ],
yAxis : [ {
type : 'value',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
}
} ],
series : [
{
name : '平均卸車時間（分鐘）',
type : 'line',
stack : '平均',
data : [ 25, 22, 22, 27, 23, 24, 27, 24, 23, 31,
26, 25, 21, 25, 32, 23, 21, 25, 31, 22, 24,
30, 33, 25, 25, 22, 20, 37, 23, 20, 21 ]
},
{
name : '最長卸車時間（分鐘）',
type : 'line',
stack : '最大',
data : [ 52, 31, 20, 47, 28, 41, 44, 33, 30, 43,
40, 39, 30, 53, 51, 28, 24, 42, 54, 27, 34,
47, 77, 52, 46, 42, 24, 71, 32, 27, 27 ]
},
{
name : '最短卸車時間（分鐘）',
type : 'line',
stack : '最小',
data : [ 37, 38, 37, 39, 39, 36, 39, 36, 38, 36,
34, 39, 37, 37, 36, 39, 36, 37, 36, 37, 38,
38, 38, 37, 38, 36, 36, 40, 36, 35, 37 ]
} ]
};
myBarChart.setOption(option1, true);
}
/* 國際貨物流向 */
function drawInternal(ec) {
var myBarChart = ec.init(document.getElementById('internalFlow'));
var option2 = {
backgroundColor : '#333333',
title : {
text : 'AT88 export report-country-2017',
subtext : '',
sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
left : 'center',
top : 'top'
},
tooltip : {
trigger : 'item',
formatter : function(params) {
var value = (params.value + '').split('.');
value = value[0].replace(
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
+ '.' + value[1];
return params.seriesName + '<br/>' + params.name
+ ' : ' + value;
}
},
toolbox : {
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
readOnly : false
},
restore : {},
saveAsImage : {}
}
},
visualMap : {
min : 0,
max : 15000,
text : [ 'High', 'Low' ],
realtime : false,
calculable : true,
inRange : {
color : [ 'lightskyblue', 'yellow', 'orangered' ]
}
},
series : [ {
name : '',
type : 'map',
mapType : 'world',
roam : true,
itemStyle : {
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : 'USA',
value : 17045.82
}, {
name : 'Mexico',
value : 13007.38
}, {
name : 'Thailand',
value : 12509.54
}, {
name : 'Pakistan',
value : 4520
}, {
name : 'Indonesia',
value : 6382.4
}, {
name : 'Malaysia',
value : 4193.6
}, {
name : 'Singapore',
value : 3905.6
}, {
name : 'Columbia',
value : 3021.2
}, {
name : 'Taiwan',
value : 2236.22
}, {
name : 'BANGLADESH',
value : 1640
}, {
name : 'Philippines',
value : 1570.4
}, {
name : 'Vietnam',
value : 1490.4
}, {
name : 'India',
value : 1359.66
}, {
name : 'Chile',
value : 1108.8
}, {
name : 'Australia',
value : 928.8
}, {
name : 'MYanmar',
value : 700
}, {
name : 'Canada',
value : 651.26
}, {
name : 'Russia',
value : 777.6
}, {
name : 'South Africa',
value : 564.92
}, {
name : 'Turkey',
value : 453.6
}, {
name : 'Sri Lanka',
value : 397.6
}, {
name : 'Peru',
value : 259.2
}, {
name : 'Pap.New Guinea',
value : 237.6
}, {
name : 'New Zealand',
value : 237.6
}, {
name : 'Brunei',
value : 129.6
}, {
name : 'Fiji',
value : 108
} ]
} ]
};
myBarChart.setOption(option2, true);
}
function drawDomestic(ec) {
var myBarChart = ec.init(document.getElementById('domesticHtml'));
var option3 = {
backgroundColor : '#1B1B1B',
title : {
text : '2017 國內貨運流向分佈',
subtext : ''
},
legend : {
x : 'right',
selectedMode : false,
data : [ '北京', '上海', '廣東' ]
},
tooltip : {
trigger : 'item'
},
dataRange : {
orient : 'horizontal',
min : 220000,
max : 18462000,
text : [ '高', '低' ], // 文字，預設為數值文字
splitNumber : 0
},
toolbox : {
orient : 'vertical',
x : 'right',
y : 'center',
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
}
}
},
series : [ {
name : '2017 國內貨運流向分佈',
type : 'map',
mapType : 'china',
mapLocation : {
x : 'left'
},
selectedMode : 'multiple',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : '山東',
value : 14462000
}, {
name : '廣東',
value : 9694000
}, {
name : '遼寧',
value : 5313600
}, {
name : '北京',
value : 2730000
}, {
name : '河南',
value : 2310000
}, {
name : '陝西',
value : 1320000
}, {
name : '雲南',
value : 520000
}, {
name : '四川',
value : 240000
} ]
} ],
animation : false
};
myBarChart.setOption(option3, true);
}
function drawWait(ec) {
var myBarChart = ec.init(document.getElementById('waitHtml'));
var option4 = {
backgroundColor : '#1b1b1b',
tooltip : {
formatter : "{a} <br/>{c} {b}"
},
toolbox : {
feature : {
mark : {
show : true
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
series : [
{
name : '速度',
type : 'gauge',
min : 0,
max : 220,
splitNumber : 11,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.09, 'lime' ],
[ 0.82, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 3,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisLabel : { // 座標軸小標記
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
length : 15, // 屬性length控制線長
lineStyle : { // 屬性lineStyle控制線條樣式
color : 'auto',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
splitLine : { // 分隔線
length : 25, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : { // 分隔線
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
fontSize : 20,
fontStyle : 'italic',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
detail : {
backgroundColor : 'rgba(30,144,255,0.8)',
borderWidth : 1,
borderColor : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 5,
offsetCenter : [ 0, '50%' ], // x, y，單位px
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
color : '#fff'
}
},
data : [ {
value : 40,
name : 'km/h'
} ]
},
{
name : '轉速',
type : 'gauge',
center : [ '25%', '55%' ], // 預設全域性居中
radius : '50%',
min : 0,
max : 7,
endAngle : 45,
splitNumber : 7,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.29, 'lime' ],
[ 0.86, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisLabel : { // 座標軸小標記
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
length : 12, // 屬性length控制線長
lineStyle : { // 屬性lineStyle控制線條樣式
color : 'auto',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
splitLine : { // 分隔線
length : 20, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : {
width : 5,
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
offsetCenter : [ 0, '-30%' ], // x, y，單位px
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
fontStyle : 'italic',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
detail : {
//backgroundColor: 'rgba(30,144,255,0.8)',
// borderWidth: 1,
borderColor : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 5,
width : 80,
height : 30,
offsetCenter : [ 25, '20%' ], // x, y，單位px
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
color : '#fff'
}
},
data : [ {
value : 1.5,
name : 'x1000 r/min'
} ]
},
{
name : '油表',
type : 'gauge',
center : [ '75%', '50%' ], // 預設全域性居中
radius : '50%',
min : 0,
max : 2,
startAngle : 135,
endAngle : 45,
splitNumber : 2,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.2, 'lime' ],
[ 0.8, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
length : 12, // 屬性length控制線長
lineStyle : { // 屬性lineStyle控制線條樣式
color : 'auto',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisLabel : {
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
},
formatter : function(v) {
switch (v + '') {
case '0':
return 'E';
case '1':
return 'Gas';
case '2':
return 'F';
}
}
},
splitLine : { // 分隔線
length : 15, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : {
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
show : false
},
detail : {
show : false
},
data : [ {
value : 0.5,
name : 'gas'
} ]
},
{
name : '水錶',
type : 'gauge',
center : [ '75%', '50%' ], // 預設全域性居中
radius : '50%',
min : 0,
max : 2,
startAngle : 315,
endAngle : 225,
splitNumber : 2,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.2, 'lime' ],
[ 0.8, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
show : false
},
axisLabel : {
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
},
formatter : function(v) {
switch (v + '') {
case '0':
return 'H';
case '1':
return 'Water';
case '2':
return 'C';
}
}
},
splitLine : { // 分隔線
length : 15, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : {
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
show : false
},
detail : {
show : false
},
data : [ {
value : 0.5,
name : 'gas'
} ]
} ]
};
myBarChart.setOption(option4, true);
}
function drawBar1(ec) {
var myBarChart = ec.init(document.getElementById('bar1'));
var option5 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option5, true);
}
function drawBar2(ec) {
var myBarChart = ec.init(document.getElementById('bar2'));
var option6 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option6, true);
}
function drawBar3(ec) {
var myBarChart = ec.init(document.getElementById('bar3'));
var option6 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option6, true);
}
function drawBar4(ec) {
var myBarChart = ec.init(document.getElementById('bar4'));
var option8 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option8, true);
}
function drawUninstall(ec) {
var myBarChart = ec.init(document.getElementById('uninstallGoods'));
var option1 = {
backgroundColor : '#1B1B1B',
title : {
text : '2017 年 8 月液硫卸車時間'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '單位：分鐘' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar', 'stack', 'tiled' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
splitLine : {
show : false
},
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'category',
boundaryGap : false,
data : [ '8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日',
'8月7日', '8月8日', '8月9日', '8月10日', '8月11日', '8月12日',
'8月13日', '8月14日', '8月15日', '8月16日', '8月17日',
'8月18日', '8月19日', '8月20日', '8月21日', '8月22日',
'8月23日', '8月24日', '8月25日', '8月26日', '8月27日',
'8月28日', '8月29日', '8月30日', '8月31日' ]
} ],
yAxis : [ {
type : 'value',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
}
} ],
series : [
{
name : '平均卸車時間（分鐘）',
type : 'line',
stack : '平均',
data : [ 25, 22, 22, 27, 23, 24, 27, 24, 23, 31,
26, 25, 21, 25, 32, 23, 21, 25, 31, 22, 24,
30, 33, 25, 25, 22, 20, 37, 23, 20, 21 ]
},
{
name : '最長卸車時間（分鐘）',
type : 'line',
stack : '最大',
data : [ 52, 31, 20, 47, 28, 41, 44, 33, 30, 43,
40, 39, 30, 53, 51, 28, 24, 42, 54, 27, 34,
47, 77, 52, 46, 42, 24, 71, 32, 27, 27 ]
},
{
name : '最短卸車時間（分鐘）',
type : 'line',
stack : '最小',
data : [ 37, 38, 37, 39, 39, 36, 39, 36, 38, 36,
34, 39, 37, 37, 36, 39, 36, 37, 36, 37, 38,
38, 38, 37, 38, 36, 36, 40, 36, 35, 37 ]
} ]
};
myBarChart.setOption(option1, true);
}
/* 國際貨物流向 */
function drawInternal(ec) {
var myBarChart = ec.init(document.getElementById('internalFlow'));
var option2 = {
backgroundColor : '#333333',
title : {
text : 'AT88 export report-country-2017',
subtext : '',
sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
left : 'center',
top : 'top'
},
tooltip : {
trigger : 'item',
formatter : function(params) {
var value = (params.value + '').split('.');
value = value[0].replace(
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
+ '.' + value[1];
return params.seriesName + '<br/>' + params.name
+ ' : ' + value;
}
},
toolbox : {
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
readOnly : false
},
restore : {},
saveAsImage : {}
}
},
visualMap : {
min : 0,
max : 15000,
text : [ 'High', 'Low' ],
realtime : false,
calculable : true,
inRange : {
color : [ 'lightskyblue', 'yellow', 'orangered' ]
}
},
series : [ {
name : '',
type : 'map',
mapType : 'world',
roam : true,
itemStyle : {
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : 'USA',
value : 17045.82
}, {
name : 'Mexico',
value : 13007.38
}, {
name : 'Thailand',
value : 12509.54
}, {
name : 'Pakistan',
value : 4520
}, {
name : 'Indonesia',
value : 6382.4
}, {
name : 'Malaysia',
value : 4193.6
}, {
name : 'Singapore',
value : 3905.6
}, {
name : 'Columbia',
value : 3021.2
}, {
name : 'Taiwan',
value : 2236.22
}, {
name : 'BANGLADESH',
value : 1640
}, {
name : 'Philippines',
value : 1570.4
}, {
name : 'Vietnam',
value : 1490.4
}, {
name : 'India',
value : 1359.66
}, {
name : 'Chile',
value : 1108.8
}, {
name : 'Australia',
value : 928.8
}, {
name : 'MYanmar',
value : 700
}, {
name : 'Canada',
value : 651.26
}, {
name : 'Russia',
value : 777.6
}, {
name : 'South Africa',
value : 564.92
}, {
name : 'Turkey',
value : 453.6
}, {
name : 'Sri Lanka',
value : 397.6
}, {
name : 'Peru',
value : 259.2
}, {
name : 'Pap.New Guinea',
value : 237.6
}, {
name : 'New Zealand',
value : 237.6
}, {
name : 'Brunei',
value : 129.6
}, {
name : 'Fiji',
value : 108
} ]
} ]
};
myBarChart.setOption(option2, true);
}
function drawDomestic(ec) {
var myBarChart = ec.init(document.getElementById('domesticHtml'));
var option3 = {
backgroundColor : '#1B1B1B',
title : {
text : '2017 國內貨運流向分佈',
subtext : ''
},
legend : {
x : 'right',
selectedMode : false,
data : [ '北京', '上海', '廣東' ]
},
tooltip : {
trigger : 'item'
},
dataRange : {
orient : 'horizontal',
min : 220000,
max : 18462000,
text : [ '高', '低' ], // 文字，預設為數值文字
splitNumber : 0
},
toolbox : {
orient : 'vertical',
x : 'right',
y : 'center',
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
}
}
},
series : [ {
name : '2017 國內貨運流向分佈',
type : 'map',
mapType : 'china',
mapLocation : {
x : 'left'
},
selectedMode : 'multiple',
itemStyle : {
normal : {
label : {
show : true
}
},
emphasis : {
label : {
show : true
}
}
},
data : [ {
name : '山東',
value : 14462000
}, {
name : '廣東',
value : 9694000
}, {
name : '遼寧',
value : 5313600
}, {
name : '北京',
value : 2730000
}, {
name : '河南',
value : 2310000
}, {
name : '陝西',
value : 1320000
}, {
name : '雲南',
value : 520000
}, {
name : '四川',
value : 240000
} ]
} ],
animation : false
};
myBarChart.setOption(option3, true);
}
function drawWait(ec) {
var myBarChart = ec.init(document.getElementById('waitHtml'));
var option4 = {
backgroundColor : '#1b1b1b',
tooltip : {
formatter : "{a} <br/>{c} {b}"
},
toolbox : {
feature : {
mark : {
show : true
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
series : [
{
name : '速度',
type : 'gauge',
min : 0,
max : 220,
splitNumber : 11,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.09, 'lime' ],
[ 0.82, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 3,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisLabel : { // 座標軸小標記
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
length : 15, // 屬性length控制線長
lineStyle : { // 屬性lineStyle控制線條樣式
color : 'auto',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
splitLine : { // 分隔線
length : 25, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : { // 分隔線
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
fontSize : 20,
fontStyle : 'italic',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
detail : {
backgroundColor : 'rgba(30,144,255,0.8)',
borderWidth : 1,
borderColor : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 5,
offsetCenter : [ 0, '50%' ], // x, y，單位px
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
color : '#fff'
}
},
data : [ {
value : 40,
name : 'km/h'
} ]
},
{
name : '轉速',
type : 'gauge',
center : [ '25%', '55%' ], // 預設全域性居中
radius : '50%',
min : 0,
max : 7,
endAngle : 45,
splitNumber : 7,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.29, 'lime' ],
[ 0.86, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisLabel : { // 座標軸小標記
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
length : 12, // 屬性length控制線長
lineStyle : { // 屬性lineStyle控制線條樣式
color : 'auto',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
splitLine : { // 分隔線
length : 20, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : {
width : 5,
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
offsetCenter : [ 0, '-30%' ], // x, y，單位px
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
fontStyle : 'italic',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
detail : {
//backgroundColor: 'rgba(30,144,255,0.8)',
// borderWidth: 1,
borderColor : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 5,
width : 80,
height : 30,
offsetCenter : [ 25, '20%' ], // x, y，單位px
textStyle : { // 其餘屬性預設使用全域性文字樣式，詳見TEXTSTYLE
fontWeight : 'bolder',
color : '#fff'
}
},
data : [ {
value : 1.5,
name : 'x1000 r/min'
} ]
},
{
name : '油表',
type : 'gauge',
center : [ '75%', '50%' ], // 預設全域性居中
radius : '50%',
min : 0,
max : 2,
startAngle : 135,
endAngle : 45,
splitNumber : 2,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.2, 'lime' ],
[ 0.8, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
length : 12, // 屬性length控制線長
lineStyle : { // 屬性lineStyle控制線條樣式
color : 'auto',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisLabel : {
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
},
formatter : function(v) {
switch (v + '') {
case '0':
return 'E';
case '1':
return 'Gas';
case '2':
return 'F';
}
}
},
splitLine : { // 分隔線
length : 15, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : {
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
show : false
},
detail : {
show : false
},
data : [ {
value : 0.5,
name : 'gas'
} ]
},
{
name : '水錶',
type : 'gauge',
center : [ '75%', '50%' ], // 預設全域性居中
radius : '50%',
min : 0,
max : 2,
startAngle : 315,
endAngle : 225,
splitNumber : 2,
axisLine : { // 座標軸線
lineStyle : { // 屬性lineStyle控制線條樣式
color : [ [ 0.2, 'lime' ],
[ 0.8, '#1e90ff' ],
[ 1, '#ff4500' ] ],
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
axisTick : { // 座標軸小標記
show : false
},
axisLabel : {
textStyle : { // 屬性lineStyle控制線條樣式
fontWeight : 'bolder',
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
},
formatter : function(v) {
switch (v + '') {
case '0':
return 'H';
case '1':
return 'Water';
case '2':
return 'C';
}
}
},
splitLine : { // 分隔線
length : 15, // 屬性length控制線長
lineStyle : { // 屬性lineStyle（詳見lineStyle）控制線條樣式
width : 3,
color : '#fff',
shadowColor : '#fff', //預設透明
shadowBlur : 10
}
},
pointer : {
width : 2,
shadowColor : '#fff', //預設透明
shadowBlur : 5
},
title : {
show : false
},
detail : {
show : false
},
data : [ {
value : 0.5,
name : 'gas'
} ]
} ]
};
myBarChart.setOption(option4, true);
}
function drawBar1(ec) {
var myBarChart = ec.init(document.getElementById('bar1'));
var option5 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option5, true);
}
function drawBar2(ec) {
var myBarChart = ec.init(document.getElementById('bar2'));
var option6 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option6, true);
}
function drawBar3(ec) {
var myBarChart = ec.init(document.getElementById('bar3'));
var option6 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option6, true);
}
function drawBar4(ec) {
var myBarChart = ec.init(document.getElementById('bar4'));
var option8 = {
backgroundColor : '#414141',
title : {
text : '',
subtext : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ '蒸發量', '降水量' ]
},
toolbox : {
feature : {
mark : {
show : true
},
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [ {
type : 'category',
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
show : true,
axisLine : {
show : false
},
axisTick : {
show : false
},
splitLine : {
show : false
},
data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
'9月', '10月', '11月', '12月' ]
} ],
yAxis : [ {
axisLabel : {
show : true,
textStyle : {
color : '#fff'
}
},
type : 'value'
} ],
series : [
{
name : '蒸發量',
type : 'bar',
data : [ 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,
162.2, 32.6, 20.0, 6.4, 3.3 ],
markPoint : {
data : [ {
type : 'max',
name : '最大值'
}, {
type : 'min',
name : '最小值'
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
},
{
name : '降水量',
type : 'bar',
data : [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6,
182.2, 48.7, 18.8, 6.0, 2.3 ],
markPoint : {
data : [ {
name : '年最高',
value : 182.2,
xAxis : 7,
yAxis : 183,
symbolSize : 18
}, {
name : '年最低',
value : 2.3,
xAxis : 11,
yAxis : 3
} ]
},
markLine : {
data : [ {
type : 'average',
name : '平均值'
} ]
}
} ]
};
myBarChart.setOption(option8, true);
}