| <!-- | |
| 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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <script src="../dist/echarts.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/simpleRequire.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: 400px; | |
| } | |
| .by-dispatch-action { | |
| padding: 5px; | |
| } | |
| </style> | |
| <div id="main0"></div> | |
| <div id="main2"></div> | |
| <div id="main3"></div> | |
| <div id="main4"></div> | |
| <script> | |
| function makeButtons(ctx) { | |
| function printStates() { | |
| var option = ctx.chart.getOption(); | |
| var dzs = option.dataZoom; | |
| var info = [{ | |
| type: dzs[0].type, | |
| start: dzs[0].start, | |
| end: dzs[0].end, | |
| startValue: dzs[0].startValue, | |
| endValue: dzs[0].endValue | |
| }, { | |
| type: dzs[1].type, | |
| start: dzs[1].start, | |
| end: dzs[1].end, | |
| startValue: dzs[1].startValue, | |
| endValue: dzs[1].endValue | |
| }] | |
| console.log('!!! ' + ctx.hint + ' !!!\n' + JSON.stringify(info, null, 2)); | |
| // alert( | |
| // '!!! ' + ctx.hint + ' !!!\n' + JSON.stringify(info, null, 2) | |
| // ); | |
| } | |
| function dispatchPercent(start, end) { | |
| ctx.chart.dispatchAction({ | |
| type: 'dataZoom', | |
| batch: [ | |
| {id: 'dz-in', start: start, end: end}, | |
| {id: 'dz-s', start: start, end: end} | |
| ] | |
| }); | |
| } | |
| function dispatchValue(startValue, endValue) { | |
| ctx.chart.dispatchAction({ | |
| type: 'dataZoom', | |
| batch: [ | |
| {id: 'dz-in', startValue: startValue, endValue: endValue}, | |
| {id: 'dz-s', startValue: startValue, endValue: endValue} | |
| ] | |
| }); | |
| } | |
| var buttons = []; | |
| echarts.util.each(ctx.percentButttons, function (item) { | |
| buttons.push({ | |
| text: item.text, | |
| onclick: function () { | |
| dispatchPercent(item.start, item.end); | |
| printStates(); | |
| } | |
| }) | |
| }); | |
| echarts.util.each(ctx.valueButtons, function (item) { | |
| buttons.push({ | |
| text: item.text, | |
| onclick: function () { | |
| dispatchValue(item.startValue, item.endValue); | |
| printStates(); | |
| } | |
| }) | |
| }); | |
| return buttons; | |
| } | |
| function getDefaultPercentButtons() { | |
| return [{ | |
| text: '{start: -5, end: 5} over min', | |
| start: -5, | |
| end: 5 | |
| }, { | |
| text: '{start: 95, end: 105} over max', | |
| start: 95, | |
| end: 105 | |
| }, { | |
| text: '{start: 40, end: 60}', | |
| start: 40, | |
| end: 60 | |
| }, { | |
| text: '{start: 40, end: 90} (over maxSpan)', | |
| start: 40, | |
| end: 90 | |
| }, { | |
| text: '{start: 40, end: 41} (over minSpan)', | |
| start: 40, | |
| end: 41 | |
| }]; | |
| } | |
| </script> | |
| <script> | |
| require(['./data/ec-star.json'], function (data) { | |
| var minStartValue = '2013-06-06'; | |
| var maxEndValue = '2017-10-17'; | |
| var currStartValue = '2017-01-01'; | |
| var currEndValue = maxEndValue; | |
| var option = { | |
| animationDurationUpdate: 1000, | |
| 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 | |
| }] | |
| }; | |
| var myChart = testHelper.create(echarts, 'main0', { | |
| option: option, | |
| height: 300, | |
| buttons: [{ | |
| text: 'Change Start Value', | |
| onclick: function (phase) { | |
| currStartValue = '2014-09-01'; | |
| myChart.dispatchAction({ | |
| type: 'dataZoom', | |
| id: 'dz', | |
| startValue: currStartValue | |
| }); | |
| } | |
| }, { | |
| text: 'Change End Value', | |
| onclick: function (phase) { | |
| currEndValue = '2017-02-05'; | |
| myChart.dispatchAction({ | |
| type: 'dataZoom', | |
| id: 'dz', | |
| endValue: currEndValue | |
| }); | |
| } | |
| }, { | |
| text: 'firstFocus', | |
| onclick: function (phase) { | |
| currStartValue = minStartValue; | |
| currEndValue = '2013-11-06'; | |
| myChart.dispatchAction({ | |
| type: 'dataZoom', | |
| id: 'dz', | |
| startValue: currStartValue, | |
| endValue: currEndValue | |
| }); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| var option; | |
| var base = +new Date(1990, 9, 3); | |
| var oneDay = 24 * 3600 * 1000; | |
| var startValue = Math.random() * 300; | |
| var data1 = []; | |
| var category = []; | |
| var specialNormal = []; | |
| var specialLong = []; | |
| var specialShort = []; | |
| for (var i = 0; i < 100; i++) { | |
| var now = new Date(base += oneDay); | |
| var cat = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'); | |
| category.push(cat); | |
| value = Math.round((Math.random() - 0.5) * 20 + (!i ? startValue : data1[i - 1])); | |
| data1.push(value); | |
| if (i === 40) { | |
| specialNormal[0] = cat; | |
| specialLong[0] = cat; | |
| specialShort[0] = cat; | |
| } | |
| else if (i === 42) { | |
| specialShort[1] = cat; | |
| } | |
| else if (i === 55) { | |
| specialNormal[1] = cat; | |
| } | |
| else if (i === 85) { | |
| specialLong[1] = cat; | |
| } | |
| } | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| toolbox: { | |
| feature: { | |
| dataZoom: { | |
| yAxisIndex: 'none' | |
| }, | |
| restore: {}, | |
| saveAsImage: {} | |
| } | |
| }, | |
| xAxis: [{ | |
| type: 'category', | |
| boundaryGap: false, | |
| data: category | |
| }], | |
| yAxis: [{ | |
| type: 'value', | |
| boundaryGap: [0, '100%'] | |
| }], | |
| dataZoom: [{ | |
| type: 'inside', | |
| id: 'dz-in', | |
| start: 0, | |
| end: 10, | |
| minSpan: 5, | |
| maxSpan: 30, | |
| xAxisIndex: 0 | |
| }, { | |
| id: 'dz-s', | |
| start: 0, | |
| end: 10, | |
| minSpan: 5, | |
| maxSpan: 30, | |
| xAxisIndex: 0 | |
| }], | |
| series: [{ | |
| type:'line', | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }; | |
| function getBtnLabel(special, extra) { | |
| extra = extra || ''; | |
| return 'startValue: "' + special[0] + ', endValue: "' + special[1] + '" ' + extra; | |
| } | |
| var ctx = { | |
| hint: 'category axis value should be integer', | |
| percentButttons: getDefaultPercentButtons(), | |
| valueButtons: [{ | |
| text: getBtnLabel(specialNormal), | |
| startValue: specialNormal[0], | |
| endValue: specialNormal[1] | |
| }, { | |
| text: getBtnLabel(specialLong, 'over maxSpan'), | |
| startValue: specialLong[0], | |
| endValue: specialLong[1] | |
| }, { | |
| text: getBtnLabel(specialShort, 'over minSpan'), | |
| startValue: specialShort[0], | |
| endValue: specialShort[1] | |
| }, { | |
| }] | |
| }; | |
| ctx.chart = testHelper.create(echarts, 'main2', { | |
| option: option, | |
| title: [ | |
| '(category axis) dispatchAction: {type: "dataZoom"}', | |
| 'range should not out of bound', | |
| 'minSpan: 5, maxSpan: 30' | |
| ], | |
| height: 200, | |
| buttons: makeButtons(ctx) | |
| }); | |
| </script> | |
| <script> | |
| var option; | |
| var base = +new Date(1990, 9, 3); | |
| var oneDay = 24 * 3600 * 1000; | |
| var startValue = Math.random() * 300; | |
| var data2 = []; | |
| var specialNormal = []; | |
| var specialShort = []; | |
| var specialLong = []; | |
| for (var i = 0; i < 100; i++) { | |
| var now = new Date(base += oneDay); | |
| value = Math.round((Math.random() - 0.5) * 20 + (!i ? startValue : data2[i - 1][1])); | |
| data2.push([now, value]); | |
| if (i === 30) { | |
| specialNormal[0] = +now; | |
| specialShort[0] = +now; | |
| specialLong[0] = +now; | |
| } | |
| else if (i === 32) { | |
| specialShort[1] = +now; | |
| } | |
| else if (i === 38) { | |
| specialNormal[1] = +now; | |
| } | |
| else if (i === 70) { | |
| specialLong[1] = +now; | |
| } | |
| } | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis', | |
| position: function (pt) { | |
| return [pt[0], '10%']; | |
| } | |
| }, | |
| toolbox: { | |
| feature: { | |
| dataZoom: { | |
| yAxisIndex: 'none' | |
| }, | |
| restore: {}, | |
| saveAsImage: {} | |
| } | |
| }, | |
| xAxis: [{ | |
| type: 'time' | |
| }], | |
| yAxis: [{ | |
| }], | |
| dataZoom: [{ | |
| type: 'inside', | |
| id: 'dz-in', | |
| maxSpan: 30, | |
| minSpan: 5, | |
| start: 0, | |
| end: 10 | |
| }, { | |
| id: 'dz-s', | |
| maxSpan: 30, | |
| minSpan: 5, | |
| start: 0, | |
| end: 10 | |
| }], | |
| series: [{ | |
| type:'line', | |
| symbolSize: 10, | |
| data: data2 | |
| }] | |
| }; | |
| function fmt2Str(dt) { | |
| return echarts.format.formatTime('yyyy-MM-dd', +dt) | |
| } | |
| function getBtnLabel(special, extra) { | |
| extra = extra || ''; | |
| return 'startValue: "' + fmt2Str(special[0]) + '"(' | |
| + special[0] + '), endValue: "' + fmt2Str(special[1]) | |
| + '"(' + special[1] + ') ' + extra; | |
| } | |
| var ctx = { | |
| hint: 'time axis value should be integer', | |
| percentButttons: getDefaultPercentButtons(), | |
| valueButtons: [{ | |
| text: getBtnLabel(specialNormal), | |
| startValue: fmt2Str(specialNormal[0]), | |
| endValue: fmt2Str(specialNormal[1]) | |
| }, { | |
| text: getBtnLabel(specialShort, 'over minSpan'), | |
| startValue: fmt2Str(specialShort[0]), | |
| endValue: fmt2Str(specialShort[1]) | |
| }, { | |
| text: getBtnLabel(specialLong, 'over maxSpan'), | |
| startValue: fmt2Str(specialLong[0]), | |
| endValue: fmt2Str(specialLong[1]) | |
| }] | |
| }; | |
| ctx.chart = testHelper.create(echarts, 'main3', { | |
| option: option, | |
| title: [ | |
| '(time axis) dispatchAction: {type: "dataZoom"}', | |
| 'range should not out of bound', | |
| 'maxSpan: 30, minSpan: 5', | |
| ], | |
| height: 200, | |
| buttons: makeButtons(ctx) | |
| }); | |
| </script> | |
| <script> | |
| var option; | |
| var base = +new Date(1990, 9, 3); | |
| var oneDay = 24 * 3600 * 1000; | |
| var startValue = Math.random() * 300; | |
| var data1 = []; | |
| var category = [] | |
| for (var i = 0; i < 1000; i++) { | |
| var now = new Date(base += oneDay); | |
| category.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-')); | |
| value = Math.round((Math.random() - 0.5) * 20 + (!i ? startValue : data1[i - 1])); | |
| data1.push(value); | |
| } | |
| var option = { | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| toolbox: { | |
| feature: { | |
| dataZoom: { | |
| yAxisIndex: 'none' | |
| }, | |
| restore: {}, | |
| saveAsImage: {} | |
| } | |
| }, | |
| xAxis: [{ | |
| type: 'category', | |
| boundaryGap: false, | |
| data: category | |
| }], | |
| yAxis: [{ | |
| type: 'value', | |
| boundaryGap: [0, '100%'] | |
| }], | |
| dataZoom: [{ | |
| type: 'inside', | |
| id: 'dz-in', | |
| start: 0, | |
| end: 10, | |
| minValueSpan: 50, | |
| maxValueSpan: 300, | |
| xAxisIndex: 0 | |
| }, { | |
| id: 'dz-s', | |
| start: 0, | |
| end: 10, | |
| minValueSpan: 50, | |
| maxValueSpan: 300, | |
| xAxisIndex: 0 | |
| }], | |
| series: [{ | |
| type:'line', | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }; | |
| var ctx = { | |
| hint: 'category axis value should be integer', | |
| percentButttons: getDefaultPercentButtons(), | |
| valueButtons: [{ | |
| text: 'startValue: 30, endValue: 500, over maxValueSpan', | |
| startValue: 30, | |
| endValue: 500 | |
| }, { | |
| text: 'startValue: 30, endValue: 32, over minValueSpan', | |
| startValue: 30, | |
| endValue: 32 | |
| }] | |
| }; | |
| ctx.chart = testHelper.create(echarts, 'main4', { | |
| title: [ | |
| '(category axis)', | |
| 'dispatchAction: {type: "dataZoom"}', | |
| 'range should not out of bound', | |
| 'minValueSpan: 50, maxValueSpan: 300' | |
| ], | |
| option: option, | |
| height: 200, | |
| buttons: makeButtons(ctx) | |
| }); | |
| </script> | |
| </body> | |
| </html> |