| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/map/js/world.js"></script> |
| <script src="../data/price-and-earnings.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| </head> |
| <body> |
| <style> |
| </style> |
| <div id="main"></div> |
| <script> |
| |
| var myChart = echarts.init(document.getElementById('main')); |
| var animation = location.href.split('?'); |
| if (animation[1]) { |
| var match = animation[1].match(/animation=([a-zA-Z0-9_]+)/); |
| animation = match[1] !== 'false' && match[1] !== '0' && !!match[1]; |
| } |
| else { |
| animation = true; |
| } |
| |
| |
| |
| var dataAxis = 'ABCDEFGHIJKLMNOPQRST'.split(''); |
| var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; |
| var yMax = 500; |
| var dataShadow = []; |
| |
| for (var i = 0; i < data.length; i++) { |
| dataShadow.push(yMax); |
| } |
| |
| option = { |
| animation: animation, |
| backgroundColor: '#eee', |
| xAxis: { |
| data: dataAxis, |
| max: dataAxis.length - 1, |
| axisLabel: { |
| inside: true, |
| textStyle: { |
| color: '#fff' |
| } |
| }, |
| axisTick: { |
| show: false |
| }, |
| axisLine: { |
| show: false |
| }, |
| z: 10 |
| }, |
| yAxis: { |
| axisLine: { |
| show: false |
| }, |
| axisTick: { |
| show: false |
| }, |
| axisLabel: { |
| textStyle: { |
| color: '#999' |
| } |
| } |
| }, |
| dataZoom: [ |
| { |
| type: 'inside' |
| } |
| ], |
| series: [ |
| { // For shadow |
| type: 'bar', |
| itemStyle: { |
| normal: {color: 'rgba(0,0,0,0.05)'} |
| }, |
| barGap:'-100%', |
| barCategoryGap:'40%', |
| data: dataShadow, |
| animation: false |
| }, |
| { |
| type: 'bar', |
| itemStyle: { |
| normal: { |
| color: new echarts.graphic.LinearGradient( |
| 0, 0, 0, 1, |
| [ |
| {offset: 0, color: '#83bff6'}, |
| {offset: 0.5, color: '#188df0'}, |
| {offset: 1, color: '#188df0'} |
| ] |
| ) |
| }, |
| emphasis: { |
| color: new echarts.graphic.LinearGradient( |
| 0, 0, 0, 1, |
| [ |
| {offset: 0, color: '#2378f7'}, |
| {offset: 0.7, color: '#2378f7'}, |
| {offset: 1, color: '#83bff6'} |
| ] |
| ) |
| } |
| }, |
| data: data |
| } |
| ] |
| }; |
| |
| // Enable data zoom when user click bar. |
| var zoomSize = 6; |
| myChart.on('click', function (params) { |
| console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); |
| myChart.dispatchAction({ |
| type: 'dataZoom', |
| startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], |
| endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] |
| }); |
| }); |
| |
| |
| |
| myChart.setOption(option); |
| |
| |
| |
| |
| |
| |
| |
| |
| </script> |
| </body> |
| </html> |
