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