| <!DOCTYPE html> |
| <!-- |
| 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="ut/lib/canteen.js"></script> --> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| </style> |
| |
| |
| |
| <div id="main0"></div> |
| <div id="main1"></div> |
| <div id="main2"></div> |
| <div id="main3"></div> |
| <div id="main4"></div> |
| <div id="main5"></div> |
| <div id="main6"></div> |
| <div id="main7"></div> |
| <div id="main8"></div> |
| <div id="main9"></div> |
| <div id="main10"></div> |
| <div id="main11"></div> |
| <div id="main12"></div> |
| <div id="main13"></div> |
| <div id="main14"></div> |
| <div id="main15"></div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['分类', '平均消费金额'], |
| ['a007', 100], |
| ['008', 100], |
| ['123', 100], |
| ['333', 100], |
| ['444', 100], |
| ['Test', 100] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| '**6 equivalent sectors** should be rendered with **labels different**' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['分类', '平均消费金额'], |
| // number-like as category |
| ['7', 100], |
| ['008', 100], |
| ['123', 100], |
| ['333', 100], |
| ['444', 100], |
| ['Test', 100] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: [ |
| '**6 equivalent sectors** should be rendered with **labels different**' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['分类', '平均消费金额'], |
| // [value, label] |
| [100, '7'], |
| [90, '008'], |
| [80, '123'], |
| [70, '333'], |
| [60, '444'], |
| [50, 'Test'] |
| ] |
| }, |
| series: [ |
| {type: 'funnel', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| '**6 decreased bars** should be rendered with **labels different**' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['分类', 'V100', 'V200', 'V300'], |
| // number-like as category |
| ['7', 100, 200, 300], |
| ['008', 100, 200, 300], |
| ['123', 100, 200, 300], |
| ['333', 100, 200, 300], |
| ['444', 100, 200, 300], |
| ['Test', 100, 200, 300] |
| ] |
| }, |
| xAxis: {type: 'category'}, |
| yAxis: {}, |
| series: [ |
| {type: 'bar'}, |
| {type: 'bar'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main3', { |
| title: [ |
| 'share category xAxis (number-like) and **series0: V100, series1: 200** bars' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['分类', 'V100', 'V200', 'V300'], |
| // number-like as category |
| ['7', 100, 200, 300], |
| ['008', 100, 200, 300], |
| ['123', 100, 200, 300], |
| ['333', 100, 200, 300], |
| ['444', 100, 200, 300], |
| ['Test', 100, 200, 300] |
| ] |
| }, |
| xAxis: {}, |
| yAxis: {}, |
| series: [ |
| {type: 'scatter'}, |
| {type: 'scatter'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main4', { |
| title: [ |
| 'both x y value axis. Should be **series0: "分类 V100", series1: "V200 V300"** ' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['分类', 'O', 'C', 'L', 'H', 'Column'], |
| ['7', 190, 250, 50, 490, 500], |
| ['008', 180, 240, 60, 480, 510], |
| ['123', 170, 230, 70, 470, 520], |
| ['333', 160, 220, 80, 460, 530], |
| ['444', 150, 210, 90, 450, 540], |
| ['Test', 140, 200, 100, 440, 550] |
| ] |
| }, |
| xAxis: {type: 'category'}, |
| yAxis: {}, |
| series: [ |
| {type: 'candlestick'}, |
| {type: 'line'}, |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main5', { |
| title: [ |
| 'candlestick series should be "O C L H"', |
| 'line series should be "Column"' |
| ], |
| option: option, |
| height: 300 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['A', 'B'], |
| // all-number like |
| ['74', '100'], |
| ['008', '101'], |
| ['123', '102'], |
| ['333', '103'], |
| ['444', '104'], |
| ['555', '105'] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main6', { |
| title: [ |
| 'all number-like. Should **6 different sectors** and **labels 100-105**' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['A', 'B'], |
| // all-number like |
| [74, 100], |
| [8, 101], |
| [123, 102], |
| [333, 103], |
| [444, 104], |
| [555, 105] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main7', { |
| title: [ |
| 'all pure number. Should **6 different size** sectors with **labels 100-105**.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['A', 'B'], |
| // all-number like |
| ['23', '-'], |
| ['8', 100], |
| ['123', 100], |
| ['333', 100], |
| ['444', 100], |
| ['555', 100] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main8', { |
| title: [ |
| 'Has empty "-". Should have **5 equivalent** sectors with **labels different**.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['A', 'B'], |
| // all-number like |
| ['23', null], |
| ['8', 100], |
| ['123', 100], |
| ['333', 100], |
| ['444', 100], |
| ['555', 100] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main9', { |
| title: [ |
| 'Has empty null. Should have **5 equivalent** sectors with **labels different**.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| {what: '007', name: 100}, |
| {what: '008', name: 101}, |
| {what: '123', name: 102}, |
| {what: '333', name: 103}, |
| {what: '444', name: 104}, |
| {what: 'Test', name: 105} |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main10', { |
| title: [ |
| 'dimension is named as "name" in Array.<Object>', |
| '**5 different size** sectors should be rendered with **labels 100-105**' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| {what: 212, name: 100}, |
| {what: 312, name: 101}, |
| {what: 456, name: 102}, |
| {what: 123, name: 103}, |
| {what: 344, name: 104}, |
| {what: 123, name: 105} |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main11', { |
| title: [ |
| 'dimension is named as "name" in Array.<Object>', |
| '**6 different size** sectors should be rendered with **labels 100-105**' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| [212], |
| [312], |
| [456], |
| [123], |
| [344], |
| [254] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main12', { |
| title: [ |
| 'Only one column of pure number, **6 different size** sectors with labels.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['212'], |
| ['312'], |
| ['456'], |
| ['123'], |
| ['344'], |
| ['254'] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main13', { |
| title: [ |
| 'Only one column of number-like str, **5 different size** sectors with labels.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| dimensions: [null, {type: 'ordinal'}], |
| source: [ |
| ['212', 100], |
| ['312', 101], |
| ['456', 102], |
| ['123', 103], |
| ['344', 104], |
| ['123', 105] |
| ] |
| }, |
| series: [ |
| {type: 'pie', radius: '50%'} |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main14', { |
| title: [ |
| 'dataset.dimensions type defined, **6 different size** sectors with **labels 100-105**.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| |
| option = { |
| animation: false, |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: [ |
| ['212', 100], |
| ['312', 101], |
| ['456', 102], |
| ['123', 103], |
| ['344', 104], |
| ['123', 105] |
| ] |
| }, |
| series: [ |
| { |
| type: 'pie', |
| radius: '50%', |
| dimensions: [null, {type: 'ordinal'}] |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main15', { |
| title: [ |
| 'series.dimensions type defined, **6 different size** sectors with **labels 100-105**.' |
| ], |
| option: option, |
| height: 200 |
| }); |
| }); |
| </script> |
| |
| |
| </body> |
| </html> |
| |
