|  |  | 
|  | <!-- | 
|  | 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="lib/simpleRequire.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> | 
|  |  | 
|  | <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> | 
|  | <div id="multi-pie"></div> | 
|  | <div id="icon-circle"></div> | 
|  | <div id="only-single-item"></div> | 
|  | <div id="vary-size"></div> | 
|  | <div id="index-to-no-name"></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' | 
|  | ], 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: { | 
|  | selector: true, | 
|  | selectorLabel: { | 
|  | color: 'yellow', | 
|  | borderColor: 'green', | 
|  | backgroundColor: 'blue' | 
|  | }, | 
|  | emphasis: { | 
|  | selectorLabel: { | 
|  | backgroundColor: 'red' | 
|  | } | 
|  | }, | 
|  | data: seriesInfo.legendData, | 
|  | // backgroundColor: 'rgba(0,100,50,0.2)' | 
|  | }, | 
|  | tooltip: { | 
|  | }, | 
|  | xAxis: { | 
|  | data: seriesInfo.xAxisData | 
|  | }, | 
|  | yAxis: { | 
|  | splitArea: { | 
|  | show: true | 
|  | } | 
|  | }, | 
|  | series: seriesInfo.series | 
|  | }; | 
|  |  | 
|  | testHelper.create(echarts, 'plain', { | 
|  | title: [ | 
|  | 'No scroll, left not set (should be center)', | 
|  | 'color: yellow, borderColor: green, backgroundColor: blue, emphasis backgroundColor: red' | 
|  | ], | 
|  | option: option | 
|  | }); | 
|  | }) | 
|  | </script> | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  | <script> | 
|  | require([ | 
|  | 'echarts' | 
|  | ], 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, | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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, | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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, | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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', | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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', | 
|  | selector: true, | 
|  | data: seriesInfo.legendData, | 
|  | backgroundColor: 'rgba(0,100,50,0.2)' | 
|  | }, { | 
|  | type: 'scroll', | 
|  | bottom: 0, | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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, | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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, | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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', | 
|  | selector: true, | 
|  | 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' | 
|  | ], 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', | 
|  | selector: true, | 
|  | 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> | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  | <script> | 
|  |  | 
|  | var chart; | 
|  | var myChart; | 
|  | var option; | 
|  |  | 
|  | require([ | 
|  | 'echarts'/*, 'map/js/china' */ | 
|  | ], function (echarts) { | 
|  |  | 
|  | var option = { | 
|  | tooltip: { | 
|  | }, | 
|  | legend: { | 
|  | data: ['a', 'b', 'c'], | 
|  | selector: true | 
|  | }, | 
|  | series: [ | 
|  | { | 
|  | name: 'AAA', | 
|  | type: 'pie', | 
|  | center: ['75%', '50%'], | 
|  | radius: '30%', | 
|  | data: [ | 
|  | {name: 'a', value: 12}, | 
|  | {name: 'b', value: 34}, | 
|  | {name: 'c', value: 56} | 
|  | ] | 
|  | }, | 
|  | { | 
|  | name: 'BBB', | 
|  | type: 'pie', | 
|  | center: ['25%', '50%'], | 
|  | radius: '30%', | 
|  | data: [ | 
|  | {name: 'a', value: 12}, | 
|  | {name: 'b', value: 34}, | 
|  | {name: 'c', value: 56} | 
|  | ] | 
|  | } | 
|  | ] | 
|  | } | 
|  |  | 
|  | chart = myChart = testHelper.create(echarts, 'multi-pie', { | 
|  | title: 'Hover legend, the segments of BOTH pie should be hightlighted', | 
|  | option: option | 
|  | }); | 
|  | }); | 
|  |  | 
|  | </script> | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  | <script> | 
|  |  | 
|  | var chart; | 
|  | var myChart; | 
|  | var option; | 
|  |  | 
|  | require([ | 
|  | 'echarts'/*, 'map/js/china' */ | 
|  | ], function (echarts) { | 
|  | var data = []; | 
|  | for (var i = 0; i < 30; i++) { | 
|  | data.push({name: i + '', value: Math.random()}); | 
|  | } | 
|  |  | 
|  | var option = { | 
|  | tooltip: { | 
|  | }, | 
|  | legend: { | 
|  | type: 'scroll', | 
|  | selector: true, | 
|  | top: 10, | 
|  | left: 0, | 
|  | data: echarts.util.map(data, function (item) { | 
|  | return { | 
|  | name: item.name, | 
|  | icon: 'circle' | 
|  | }; | 
|  | }) | 
|  | }, | 
|  | series: [{ | 
|  | type: 'pie', | 
|  | data: data | 
|  | }] | 
|  | }; | 
|  |  | 
|  | testHelper.create(echarts, 'icon-circle', { | 
|  | title: 'The first icon should not be overflow', | 
|  | option: option | 
|  | }); | 
|  | }); | 
|  |  | 
|  | </script> | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  | <script> | 
|  |  | 
|  | var chart; | 
|  | var myChart; | 
|  | var option; | 
|  |  | 
|  | require([ | 
|  | 'echarts'/*, 'map/js/china' */ | 
|  | ], function (echarts) { | 
|  | var data = []; | 
|  | for (var i = 0; i < 6; i++) { | 
|  | data.push({name: i + '哈哈哈嘿嘿嘿', value: Math.random()}); | 
|  | } | 
|  |  | 
|  | var option = { | 
|  | tooltip: { | 
|  | }, | 
|  | legend: { | 
|  | type: 'scroll', | 
|  | top: 10, | 
|  | left: 50, | 
|  | width: 105, | 
|  | data: echarts.util.map(data, function (item) { | 
|  | return { | 
|  | name: item.name, | 
|  | icon: 'circle' | 
|  | }; | 
|  | }) | 
|  | }, | 
|  | series: [{ | 
|  | type: 'pie', | 
|  | radius: 20, | 
|  | label: {show: false}, | 
|  | labelLine: {show: false}, | 
|  | data: data | 
|  | }] | 
|  | }; | 
|  |  | 
|  | testHelper.create(echarts, 'only-single-item', { | 
|  | title: 'Page up/down should be normal when only single item displayed', | 
|  | option: option, | 
|  | draggable: true | 
|  | }); | 
|  | }); | 
|  |  | 
|  | </script> | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  | <script> | 
|  | require([ | 
|  | 'echarts', | 
|  | ], function (echarts) { | 
|  | var data = []; | 
|  | for (var i = 0; i < 26; i++) { | 
|  | var name = ''; | 
|  | var nameNumber = Math.floor(Math.random() * 10); | 
|  | for (var j = 0; j < nameNumber; j++) { | 
|  | name += j; | 
|  | } | 
|  | data.push({ | 
|  | name: name, | 
|  | value: Math.random() | 
|  | }); | 
|  | } | 
|  |  | 
|  | var option = { | 
|  | legend: [{ | 
|  | type: 'scroll', | 
|  | selector: true, | 
|  | itemGap: 30, | 
|  | backgroundColor: 'rgba(0,100,50,0.2)' | 
|  | }], | 
|  | tooltip: { | 
|  | }, | 
|  | grid: { | 
|  | left: 280 | 
|  | }, | 
|  | series: { | 
|  | type: 'pie', | 
|  | label: {show: false}, | 
|  | labelLine: {show: false}, | 
|  | radius: 30, | 
|  | data: data | 
|  | } | 
|  | }; | 
|  |  | 
|  | testHelper.create(echarts, 'vary-size', { | 
|  | option: option, | 
|  | draggable: true | 
|  | }); | 
|  | }) | 
|  | </script> | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  |  | 
|  | <script> | 
|  | require([ | 
|  | 'echarts', | 
|  | ], function (echarts) { | 
|  |  | 
|  | var seriesInfo = makeSeries(50, 3); | 
|  | var series = seriesInfo.series.slice(); | 
|  | series.shift(); | 
|  |  | 
|  | var option = { | 
|  | legend: [{ | 
|  | type: 'scroll', | 
|  | selector: true, | 
|  | data: seriesInfo.legendData | 
|  | }], | 
|  | tooltip: { | 
|  | }, | 
|  | xAxis: { | 
|  | data: seriesInfo.xAxisData | 
|  | }, | 
|  | yAxis: { | 
|  | }, | 
|  | series: series | 
|  | }; | 
|  |  | 
|  | testHelper.create(echarts, 'index-to-no-name', { | 
|  | option: option, | 
|  | title: [ | 
|  | 'Pager should be OK when legend 0 (legendData index 0) is not be displayed.', | 
|  | 'should be at **page 1** at the beginning' | 
|  | ], | 
|  | draggable: true | 
|  | }); | 
|  | }) | 
|  | </script> | 
|  |  | 
|  |  | 
|  | </body> | 
|  | </html> |