| <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> |