412 lines
15 KiB
HTML
Generated
412 lines
15 KiB
HTML
Generated
|
|
<!--
|
|
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/simpleRequire.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'
|
|
], 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> |