<!-- | |
Licensed to the Apache Software Foundation (ASF) under one | |
or more contributor license agreements. See the NOTICE file | |
distributed with this work for additional information | |
regarding copyright ownership. The ASF licenses this file | |
to you under the Apache License, Version 2.0 (the | |
"License"); you may not use this file except in compliance | |
with the License. You may obtain a copy of the License at | |
http://www.apache.org/licenses/LICENSE-2.0 | |
Unless required by applicable law or agreed to in writing, | |
software distributed under the License is distributed on an | |
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
KIND, either express or implied. See the License for the | |
specific language governing permissions and limitations | |
under the License. | |
--> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="./lib/jquery.min.js"></script> | |
<script src="lib/esl.js"></script> | |
<script src="lib/config.js"></script> | |
</head> | |
<body> | |
<style> | |
html, | |
body { | |
padding: 0; | |
margin: 0; | |
} | |
.demo { | |
position: relative; | |
margin-top: 100px; | |
margin-left: 100px; | |
} | |
.pc-chart { | |
width: 540px; | |
height: 300px; | |
} | |
.mobile-box { | |
position: absolute; | |
left: 280px; | |
top: -40px; | |
width: 215px; | |
height: 360px; | |
z-index: 300; | |
user-select: none; | |
} | |
.mobile-content { | |
position: absolute; | |
overflow: hidden; | |
width: 150px; | |
height: 272px; | |
left: 312px; | |
top: 0; | |
background: #333; | |
z-index: 300; | |
} | |
.mobile-chart { | |
position: absolute; | |
top: -95px; | |
left: -75px; | |
width: 300px; | |
height: 460px; | |
} | |
</style> | |
<div class="demo"> | |
<div class="pc-chart"></div> | |
</div> | |
<script type="text/javascript"> | |
require([ | |
'echarts' | |
// 'echarts/chart/line', | |
// 'echarts/component/legend', | |
// 'echarts/component/grid', | |
// 'echarts/component/tooltip', | |
// 'echarts/component/title', | |
// 'echarts/component/dataZoom', | |
// 'echarts/scale/Time' | |
], function (echarts) { | |
var data = {"years":[1800,1810,1820,1830,1840,1850,1860,1870,1880,1890,1900,1910,1920,1930,1940,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015],"lifeExpectancy":[29.5734572,29.5734572,29.5734572,29.5734572,29.5734572,29.5734572,29.5734572,31.12082604,30.20106663,29.93047652,30.74960789,31.40217766,20.5,36.428,41.056,57.084,57.5768,57.9696,58.7624,60.7552,63.148,64.6408,63.7336,66.6264,67.3692,68.382,68.6248,68.2776,68.7404,69.5332,69.116,69.1788,68.9616,68.9144,68.3872,68.5,68.6,68.7,68.7,68.6,68.2,68,67.8,67.7,67.4,67.3,67.5,67.9,67.7,67.4,68.2,69.8,70.1,70,69.8,69.6,69.4,68,65.2,63.6,64.2,65.9,67.4,67.6,66.2,65.4,65.1,64.9,64.8,65,64.8,66.1,67.2,67.6,68.3,68.7,69.4,70.4,71.3,72.21,73.13],"income":[1430,1447,1464,1562,1666,1778,1896,2023,2158,2233,3087,3487,1489,3779,5632,7514,7424,7775,7981,8234,8787,9465,9496,10037,9755,10496,10908,11027,10620,11836,12363,12823,13256,13902,13972,14915,15170,15113,16236,16594,16530,17192,17487,17818,17632,17557,17619,17951,18417,18527,18576,19221,19355,19660,19906,19349,18332,15661,14320,12535,12013,11597,11779,11173,11925,13173,13902,14629,15768,16967,18118,19660,21374,22506,20739,21664,22570,23299,23561,23293,23038],"population":[31088398,31088398,31861526,34134430,37420913,41023821,44966686,49288504,53996807,59151534,64836675,71044207,77871987,85369549,93588981,102798657,104306354,105969442,107729541,109537868,111355224,113152347,114909562,116615781,118266807,119860289,121390327,122842753,124193114,125412397,126483874,127396324,128165823,128837792,129475269,130126383,130808492,131517584,132254362,133012558,133788113,134583945,135406786,136259517,137144808,138063062,139006739,139969243,140951400,141955200,142975753,144016095,145056221,146040116,146895053,147568552,148040354,148322473,148435811,148416292,148293265,148078355,147772805,147385440,146924174,146400951,145818121,145195521,144583147,144043914,143622566,143338407,143180249,143123163,143126660,143158099,143211476,143287536,143367341,143429435,143456918]}; | |
echarts.util.each(data.years, function (year, index) { | |
year = +new Date(year, 0, 1); | |
data.population[index] = [year, data.population[index]]; | |
data.lifeExpectancy[index] = [year, data.lifeExpectancy[index]]; | |
data.income[index] = [year, data.income[index]]; | |
}); | |
var series1Color = '#c23531'; | |
var series2Color = 'rgba(4,127,154,1)'; | |
var series3Color = '#2f4554'; | |
var series3AreaColor = { | |
x: 0, | |
x2: 0, | |
y: 0, | |
y2: 1, | |
colorStops: [ | |
{offset: 0, color: series3Color}, | |
{offset: 1, color: 'rgba(0,0,0,0)'} | |
] | |
}; | |
var series2AreaColor = { | |
x: 0, | |
x2: 0, | |
y: 0, | |
y2: 1, | |
colorStops: [ | |
{offset: 0, color: 'rgba(4,127,154,0.8)'}, | |
{offset: 1, color: 'rgba(0,0,0,0)'} | |
] | |
}; | |
var y3Formatter = function (val) { | |
return (val / 1000).toFixed(0) + ' k'; | |
}; | |
var y3AxisPointerFormatter = function (params) { | |
return (params.value / 1000).toFixed(0) + ' k'; | |
}; | |
var option = { | |
backgroundColor: '#3aadd1', | |
// textStyle: { | |
// fontFamily: 'Tahoma' | |
// }, | |
tooltip: { | |
trigger: 'axis', | |
axisPointer: { | |
type: 'cross' | |
}, | |
padding: 5, | |
backgroundColor: '#eee', | |
borderColor: '#999', | |
borderWidth: 1, | |
textStyle: { | |
color: '#222' | |
}, | |
extraCssText: 'z-index: 200' | |
}, | |
axisPointer: { | |
link: [{xAxisIndex: 'all'}], | |
label: { | |
textStyle: { | |
color: '#222' | |
} | |
}, | |
z: 500 | |
}, | |
xAxis: [{ | |
type: 'time', | |
splitLine: { | |
show: false | |
}, | |
axisTick: { | |
show: false | |
}, | |
axisLine: { | |
show: false, | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisLabel: { | |
show: false, | |
textStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisPointer: { | |
label: { | |
show: false | |
} | |
} | |
}, { | |
type: 'time', | |
gridIndex: 1, | |
splitLine: { | |
show: false | |
}, | |
axisTick: { | |
show: false, | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisLine: { | |
show: false, | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisLabel: { | |
textStyle: { | |
color: '#ddd' | |
} | |
} | |
}], | |
yAxis: [{ | |
splitNumber: 3, | |
nameTextStyle: { | |
color: '#ccc', | |
fontSize: 18 | |
}, | |
axisLine: { | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisTick: { | |
inside: true, | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
splitLine: { | |
show: false | |
}, | |
axisLabel: { | |
inside: true, | |
textStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisPointer: { | |
label: { | |
textStyle: { | |
color: series1Color | |
} | |
} | |
}, | |
z: 200 | |
}, { | |
position: 'right', | |
splitNumber: 3, | |
nameTextStyle: { | |
color: '#ccc', | |
fontSize: 18 | |
}, | |
axisLine: { | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisTick: { | |
inside: true, | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
splitLine: { | |
show: false | |
}, | |
axisLabel: { | |
inside: true, | |
formatter: function (value) { | |
return (value / 1000000).toFixed(0) + ' M'; | |
}, | |
textStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisPointer: { | |
label: { | |
formatter: function (param) { | |
return (param.value / 1000000).toFixed(0) + ' M'; | |
}, | |
textStyle: { | |
color: series2Color | |
} | |
} | |
}, | |
z: 200 | |
}, { | |
gridIndex: 1, | |
splitNumber: 1, | |
nameTextStyle: { | |
color: '#ccc', | |
fontSize: 18 | |
}, | |
axisLine: { | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisTick: { | |
inside: true, | |
lineStyle: { | |
color: '#ddd' | |
} | |
}, | |
splitLine: { | |
show: false | |
}, | |
axisLabel: { | |
inside: true, | |
formatter: y3Formatter, | |
textStyle: { | |
color: '#ddd' | |
} | |
}, | |
axisPointer: { | |
label: { | |
formatter: y3AxisPointerFormatter | |
} | |
}, | |
z: 40 | |
}], | |
grid: [{ | |
left: 20, | |
right: 20, | |
top: 30, | |
height: 130 | |
}, { | |
left: 20, | |
right: 20, | |
top: 175, | |
height: 60 | |
}], | |
dataZoom: [{ | |
bottom: 10, | |
height: 20, | |
left: 18, | |
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line | |
handleSize: '80%', | |
handleStyle: { | |
color: '#ddd' | |
}, | |
labelFormatter: '', | |
borderColor: 'rgba(0,0,0,0.2)', | |
xAxisIndex: [0, 1], | |
// startValue: +new Date(1860, 0, 1), | |
// endValue: +new Date(1969, 0, 1), | |
// minValueSpan: new Date(1969, 0, 1) - new Date(1965, 0, 1) | |
}, { | |
type: 'inside', | |
xAxisIndex: [0, 1], | |
// startValue: +new Date(1860, 0, 1), | |
// endValue: +new Date(1969, 0, 1) | |
}], | |
series: [ | |
{ | |
type: 'line', | |
name: 'seriesA', | |
id: 'gridScatter', | |
showSymbol: false, | |
symbolSize: 10, | |
hoverAnimation: false, | |
itemStyle: { | |
normal: { | |
color: series1Color | |
} | |
}, | |
data: data.lifeExpectancy | |
}, | |
{ | |
type: 'line', | |
name: 'seriesB', | |
yAxisIndex: 1, | |
showSymbol: false, | |
itemStyle: { | |
normal: { | |
color: series2Color | |
} | |
}, | |
areaStyle: { | |
normal: { | |
color: series2AreaColor | |
} | |
}, | |
data: data.population | |
}, | |
{ | |
type: 'line', | |
name: 'seriesC', | |
xAxisIndex: 1, | |
yAxisIndex: 2, | |
showSymbol: false, | |
symbolSize: 10, | |
hoverAnimation: false, | |
areaStyle: { | |
normal: { | |
color: series3AreaColor | |
} | |
}, | |
itemStyle: { | |
normal: { | |
color: series3Color | |
} | |
}, | |
data: data.income | |
} | |
] | |
}; | |
var myChart = echarts.init($('.pc-chart')[0]); | |
myChart.setOption(option); | |
}); | |
</script> | |
</body> | |
</html> |