|  | 
 | <!-- | 
 | 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> |