| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <script src="lib/facePrint.js"></script> |
| <script src="lib/testHelper.js"></script> |
| <script src="lib/draggable.js"></script> |
| <link rel="stylesheet" href="lib/reset.css"> |
| </head> |
| <body> |
| <style> |
| h1 { |
| line-height: 60px; |
| height: 60px; |
| background: #146402; |
| text-align: center; |
| font-weight: bold; |
| color: #eee; |
| font-size: 14px; |
| } |
| .chart { |
| height: 300px; |
| } |
| </style> |
| |
| <h1>No scroll, left not set (should be center)</h1> |
| <div class="chart" id="plain"></div> |
| <h1>No scroll, width 300, right: 10</h1> |
| <div class="chart" id="plain2"></div> |
| <h1>No scroll, has '\n' after 'line3', bottom: 20</h1> |
| <div class="chart" id="plain3"></div> |
| <h1>No scroll, vertical, has '\n' after 'line3', right 20</h1> |
| <div class="chart" id="plain-v"></div> |
| <h1>No scroll, vertical, top 'middle', left: 20, heigth: 150</h1> |
| <div class="chart" id="plain-v2"></div> |
| <h1>Scroll</h1> |
| <div class="chart" id="scroll"></div> |
| <h1>Scroll auto: try to change window size (width: 80%, right: 30)</h1> |
| <div class="chart" id="scroll-auto"></div> |
| <h1>Scroll auto: left: 30, right: 30, bottom: 0, position: 'start'</h1> |
| <div class="chart" id="scroll-lr"></div> |
| <h1>Scroll vertically</h1> |
| <div class="chart" id="scroll-v"></div> |
| <h1>Scroll vertically, left: 10, top: 'center', position: 'start', height: 50% (Turn the second page and resize it until page button disappear)</h1> |
| <div class="chart" id="scroll-v2"></div> |
| |
| <div id="legendHoverLink"></div> |
| |
| |
| <script> |
| function makeSeries(seriesCount, categoryCount) { |
| var series = []; |
| var legendData = []; |
| var xAxisData = []; |
| |
| for (var j = 0; j < categoryCount; j++) { |
| xAxisData.push('category' + j); |
| } |
| |
| for (var i = 0; i < seriesCount; i++) { |
| var data = []; |
| for (var j = 0; j < categoryCount; j++) { |
| data.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| var seriesName = 'line' + i; |
| series.push({ |
| name: seriesName, |
| type: 'line', |
| stack: 'all', |
| symbol: 'circle', |
| symbolSize: 10, |
| data: data, |
| step: 'end' |
| }); |
| legendData.push(seriesName); |
| } |
| |
| return { |
| series: series, |
| legendData: legendData, |
| xAxisData: xAxisData |
| } |
| } |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(5, 3); |
| |
| var option = { |
| legend: { |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)' |
| }, |
| tooltip: { |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'plain', option); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(10, 3); |
| |
| var option = { |
| legend: { |
| right: 10, |
| width: 300, |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)' |
| }, |
| tooltip: { |
| }, |
| grid: { |
| top: 100, |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'plain2', option); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(10, 3); |
| seriesInfo.legendData.splice(4, 0, '\n'); |
| |
| var option = { |
| legend: { |
| bottom: 20, |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)' |
| }, |
| tooltip: { |
| }, |
| grid: { |
| bottom: 100 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'plain3', option); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(20, 3); |
| seriesInfo.legendData.splice(4, 0, '\n'); |
| |
| var option = { |
| legend: { |
| orient: 'vertical', |
| right: 20, |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)' |
| }, |
| tooltip: { |
| }, |
| grid: { |
| right: 240 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'plain-v', option); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(20, 3); |
| |
| var option = { |
| legend: { |
| orient: 'vertical', |
| left: 20, |
| top: 'center', |
| height: 150, |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)' |
| }, |
| tooltip: { |
| }, |
| grid: { |
| left: 280 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'plain-v2', option); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legendScroll', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(50, 3); |
| |
| var option = { |
| legend: [{ |
| type: 'scroll', |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)' |
| }, { |
| type: 'scroll', |
| bottom: 0, |
| data: seriesInfo.legendData, |
| backgroundColor: 'rgba(0,100,50,0.2)', |
| pageButtonPosition: 'start' |
| }], |
| tooltip: { |
| }, |
| grid: { |
| left: 280 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'scroll', option, {draggable: true}); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legendScroll', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(5, 3); |
| |
| var option = { |
| legend: { |
| type: 'scroll', |
| width: '80%', |
| right: 30, |
| data: seriesInfo.legendData, |
| pageIconSize: 50, |
| pageIconColor: 'red', |
| pageIconInactiveColor: 'green', |
| backgroundColor: 'rgba(0,100,50,0.2)', |
| pageTextStyle: { |
| color: 'yellow', |
| fontSize: 22 |
| } |
| }, |
| tooltip: { |
| }, |
| grid: { |
| left: 280 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'scroll-auto', option, {draggable: true, width: 400}); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legendScroll', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(55, 3); |
| |
| var option = { |
| legend: { |
| type: 'scroll', |
| bottom: 0, |
| right: 30, |
| left: 30, |
| data: seriesInfo.legendData, |
| pageIconSize: 5, |
| pageIconColor: 'red', |
| pageIconInactiveColor: 'green', |
| backgroundColor: 'rgba(0,100,50,0.2)', |
| pageButtonPosition: 'start', |
| pageButtonGap: 20, |
| pageTextStyle: { |
| fontSize: 9 |
| } |
| }, |
| tooltip: { |
| }, |
| grid: { |
| left: 280 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'scroll-lr', option, {draggable: true, width: 400}); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legendScroll', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(55, 3); |
| |
| var option = { |
| legend: { |
| type: 'scroll', |
| orient: 'vertical', |
| bottom: 0, |
| right: 30, |
| data: seriesInfo.legendData |
| }, |
| tooltip: { |
| }, |
| grid: { |
| right: 180 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'scroll-v', option, {draggable: true, width: 400}); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| // 'echarts/chart/line', |
| // 'echarts/component/title', |
| // 'echarts/component/legendScroll', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/dataZoomInside', |
| // 'zrender/svg/svg' |
| ], function (echarts) { |
| |
| var xAxisData = []; |
| var data1 = []; |
| var data2 = []; |
| var data3 = []; |
| |
| for (var i = 0; i < 100; i++) { |
| xAxisData.push('类目' + i); |
| if (i < 5 && i > 1) { |
| data1.push(0); |
| } |
| else { |
| data1.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| data2.push(+(Math.random() + 0.5).toFixed(3)); |
| data3.push(+(Math.random() + 0.5).toFixed(3)); |
| } |
| |
| var seriesInfo = makeSeries(5, 3); |
| |
| var option = { |
| legend: { |
| type: 'scroll', |
| orient: 'vertical', |
| top: 'middle', |
| left: 10, |
| height: '50%', |
| borderColor: '#819356', |
| borderWidth: 2, |
| borderRadius: 4, |
| data: seriesInfo.legendData, |
| pageButtonPosition: 'start' |
| }, |
| tooltip: { |
| }, |
| grid: { |
| left: 180 |
| }, |
| xAxis: { |
| data: seriesInfo.xAxisData |
| }, |
| yAxis: { |
| splitArea: { |
| show: true |
| } |
| }, |
| series: seriesInfo.series |
| }; |
| |
| testHelper.createChart(echarts, 'scroll-v2', option, {draggable: true, width: 400}); |
| }) |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| var chart; |
| var myChart; |
| var option; |
| |
| require([ |
| 'echarts'/*, 'map/js/china' */ |
| ], function (echarts) { |
| |
| var option = { |
| tooltip: { |
| }, |
| legend: { |
| data: ['AAA'] |
| }, |
| xAxis: { |
| data: ['A', 'B', 'C'] |
| }, |
| yAxis: { |
| }, |
| grid: { |
| right: '50%' |
| }, |
| series: [ |
| { |
| name: 'AAA', |
| type: 'bar', |
| data: [12, 33, 11] |
| }, |
| { |
| name: 'AAA', |
| type: 'pie', |
| legendHoverLink: false, |
| center: ['75%', '50%'], |
| label: { |
| show: false, |
| }, |
| emphasis: { |
| label: { |
| show: true |
| } |
| }, |
| data: [ |
| { value: 0, name: 'A' }, |
| { value: 367, name: 'B' }, |
| { value: 20, name: 'C' } |
| ] |
| } |
| ] |
| } |
| |
| chart = myChart = testHelper.create(echarts, legendHoverLink, { |
| title: 'legendHoverLink is disabled on pie', |
| option: option |
| }); |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
