| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <script src="../dist/echarts.js"></script> |
| <script src="lib/facePrint.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| h1 { |
| line-height: 60px; |
| background: #360; |
| text-align: center; |
| font-weight: bold; |
| color: #eee; |
| font-size: 14px; |
| margin: 0; |
| } |
| .chart { |
| height: 450px; |
| } |
| .by-dispatch-action { |
| padding: 5px; |
| } |
| </style> |
| |
| <div class="by-dispatch-action"> |
| by dispatchAction: |
| <button id="change-start-value">Change Start Value</button> |
| <button id="change-end-value">Change Start Value</button> |
| <button id="first-focus">First Focus</button> |
| </div> |
| |
| <div id="main"> |
| <div class="chart" id="chart"></div> |
| </div> |
| |
| <script> |
| |
| |
| $.getJSON('./data/ec-star.json', function (data) { |
| |
| $('#first-focus').on('click', firstFocus); |
| $('#change-start-value').on('click', changeStartValue); |
| $('#change-end-value').on('click', changeEndValue); |
| |
| var myChart = echarts.init(document.getElementById('chart')); |
| |
| var minStartValue = '2013-06-06'; |
| var maxEndValue = '2017-10-17'; |
| |
| var currStartValue = '2017-01-01'; |
| var currEndValue = maxEndValue; |
| |
| var option = { |
| animationDurationUpdate: 3000, |
| tooltip: { |
| trigger: 'axis' |
| }, |
| xAxis: [{ |
| type: 'time', |
| boundaryGap: false, |
| axisLabel:{ |
| textStyle:{ |
| fontSize:14 |
| } |
| }, |
| splitLine: { |
| show: false, |
| lineStyle:{ |
| color:'#f7f7f7' |
| } |
| } |
| }], |
| yAxis: [{ |
| type: 'value', |
| name: 'Github Star', |
| nameGap: 30, |
| nameTextStyle: { |
| fontSize: 20 |
| }, |
| axisLabel: { |
| fontSize: 15 |
| }, |
| splitLine: { |
| show: true, |
| lineStyle:{ |
| color:'#f7f7f7' |
| } |
| } |
| }], |
| grid: { |
| top: 120, |
| left: 30, |
| right: 30, |
| bottom: 50, |
| containLabel: true |
| }, |
| dataZoom: [{ |
| id: 'dz', |
| type: 'inside', |
| xAxisIndex: 0, |
| startValue: currStartValue, |
| endValue: currEndValue, |
| minValueSpan: 3600 * 24 * 1000 * 10 |
| }, { |
| type: 'slider', |
| xAxisIndex: 0, |
| startValue: currStartValue, |
| endValue: currEndValue, |
| height: 20, |
| handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.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.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', |
| handleSize: '90%', |
| minSpanValue: 3600 * 24 * 1000 * 10 |
| }], |
| visualMap: { |
| show: false, |
| type: 'continuous', |
| seriesIndex: 0, |
| min: 0, |
| max: 23000 |
| }, |
| series: [{ |
| type: 'line', |
| name: 'Star', |
| lineStyle: { |
| normal: { |
| width: 4 |
| } |
| }, |
| itemStyle: { |
| normal: { |
| borderColor: '#fff', |
| borderWidth: 2 |
| } |
| }, |
| showSymbol: false, |
| symbol: 'circle', |
| hoverAnimation: false, |
| symbolSize: 15, |
| sampling: 'average', |
| // smooth: true, |
| // symbol: 'none', |
| data: data |
| }] |
| }; |
| |
| myChart.setOption(option); |
| |
| $(window).resize(function() { |
| myChart.resize(); |
| }) |
| |
| // Control ------------------------- |
| |
| function changeStartValue(phase) { |
| currStartValue = '2014-09-01'; |
| myChart.dispatchAction({ |
| type: 'dataZoom', |
| id: 'dz', |
| startValue: currStartValue |
| }); |
| } |
| |
| function changeEndValue(phase) { |
| currEndValue = '2017-02-05'; |
| myChart.dispatchAction({ |
| type: 'dataZoom', |
| id: 'dz', |
| endValue: currEndValue |
| }); |
| } |
| |
| function firstFocus(phase) { |
| currStartValue = minStartValue; |
| currEndValue = '2013-11-06'; |
| myChart.dispatchAction({ |
| type: 'dataZoom', |
| id: 'dz', |
| startValue: currStartValue, |
| endValue: currEndValue |
| }); |
| } |
| }); |
| |
| </script> |
| </body> |
| </html> |
