| <!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"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| .test-title { | |
| background: rgb(182, 120, 7); | |
| color: #fff; | |
| } | |
| .test-chart { | |
| height: 250px; | |
| } | |
| </style> | |
| <div id="layout0"></div> | |
| <div id="layout1"></div> | |
| <div id="layout2"></div> | |
| <div id="layout3"></div> | |
| <div id="layout4"></div> | |
| <div id="layout5"></div> | |
| <div id="layout6"></div> | |
| <div id="layout7"></div> | |
| <div id="layout7.5"></div> | |
| <div id="layout8"></div> | |
| <div id="layout9"></div> | |
| <div id="layout10"></div> | |
| <div id="layout11"></div> | |
| <div id="layout12"></div> | |
| <script> | |
| var arrayRows0 = [ | |
| ['product', '2015', '2016', '2017'], | |
| ['Matcha Latte', 43.3, 85.8, 93.7], | |
| ['Milk Tea', 83.1, 73.4, 55.1], | |
| ['Cheese Cocoa', 86.4, 65.2, 82.5], | |
| ['Walnut Brownie', 72.4, 53.9, 39.1] | |
| ]; | |
| var arrayRows1 = [ | |
| ['product', '2012', '2013', '2014', '2015', '2016', '2017'], | |
| ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], | |
| ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], | |
| ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], | |
| ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] | |
| ]; | |
| var arrayRowsNoColumnHeader = [ | |
| ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], | |
| ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], | |
| ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], | |
| ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1] | |
| ]; | |
| var arrayRowsNoRowHeader = [ | |
| ['2012', '2013', '2014', '2015', '2016', '2017'], | |
| [41.1, 30.4, 65.1, 53.3, 83.8, 98.7], | |
| [86.5, 92.1, 85.7, 83.1, 73.4, 55.1], | |
| [24.1, 67.2, 79.5, 86.4, 65.2, 82.5], | |
| [55.2, 67.1, 69.2, 72.4, 53.9, 39.1] | |
| ]; | |
| var arrayRowsPairValueColumns = [ | |
| ['2012', null, '2013', null, '2014', 'amount'], | |
| [41.1, 2585, 30.4, 2473, 65.1, 3418], | |
| [86.5, 2316, 92.1, 3255, 85.7, 2485], | |
| [24.1, 1532, 67.2, 1452, 79.5, 4689], | |
| [55.2, 5312, 67.1, 3266, 69.2, 1354] | |
| ]; | |
| var errorData = [ | |
| ['name', 'Price', 'Prime cost', 'Prime cost min', 'Prime cost max', 'Price min', 'Price max'], | |
| ['Blouse "Blue Viola"', 101.88, 99.75, 76.75, 116.75, 69.88, 119.88], | |
| ['Dress "Daisy"', 155.8, 144.03, 126.03, 156.03, 129.8, 188.8], | |
| ['Trousers "Cutesy Classic"', 203.25, 173.56, 151.56, 187.56, 183.25, 249.25], | |
| ['Dress "Morning Dew"', 256, 120.5, 98.5, 136.5, 236, 279], | |
| ['Turtleneck "Dark Chocolate"', 408.89, 294.75, 276.75, 316.75, 385.89, 427.89], | |
| ['Jumper "Early Spring"', 427.36, 430.24, 407.24, 452.24, 399.36, 461.36], | |
| ['Breeches "Summer Mood"', 356, 135.5, 123.5, 151.5, 333, 387], | |
| ['Dress "Mauve Chamomile"', 406, 95.5, 73.5, 111.5, 366, 429], | |
| ['Dress "Flying Tits"', 527.36, 503.24, 488.24, 525.24, 485.36, 551.36], | |
| ['Dress "Singing Nightingales"', 587.36, 543.24, 518.24, 555.24, 559.36, 624.36], | |
| ['Sundress "Cloudy weather"', 603.36, 407.24, 392.24, 419.24, 581.36, 627.36], | |
| ['Sundress "East motives"', 633.36, 477.24, 445.24, 487.24, 594.36, 652.36], | |
| ['Sweater "Cold morning"', 517.36, 437.24, 416.24, 454.24, 488.36, 565.36], | |
| ['Trousers "Lavender Fields"', 443.36, 387.24, 370.24, 413.24, 412.36, 484.36], | |
| ['Jumper "Coffee with Milk"', 543.36, 307.24, 288.24, 317.24, 509.36, 574.36], | |
| ['Blouse "Blooming Cactus"', 790.36, 277.24, 254.24, 295.24, 764.36, 818.36], | |
| ['Sweater "Fluffy Comfort"', 790.34, 678.34, 660.34, 690.34, 762.34, 824.34] | |
| ]; | |
| // No 北京 上海 江苏 | |
| var nameValueGeo0 = [ | |
| {name: '天津', value: 514}, | |
| {name: '上海', value: 863}, | |
| {name: '重庆', value: 224}, | |
| {name: '河北', value: 671}, | |
| {name: '河南', value: 888}, | |
| {name: '云南', value: 992}, | |
| {name: '辽宁', value: 136}, | |
| {name: '黑龙江', value: 406}, | |
| {name: '湖南', value: 101}, | |
| {name: '安徽', value: 885}, | |
| {name: '新疆', value: 187}, | |
| {name: '浙江', value: 1}, | |
| {name: '江西', value: 138}, | |
| {name: '湖北', value: 337}, | |
| {name: '广西', value: 410}, | |
| {name: '甘肃', value: 22}, | |
| {name: '山西', value: 814}, | |
| {name: '内蒙古', value: 449}, | |
| {name: '陕西', value: 324}, | |
| {name: '吉林', value: 429}, | |
| {name: '福建', value: 377}, | |
| {name: '贵州', value: 811}, | |
| {name: '广东', value: 954}, | |
| {name: '青海', value: 653}, | |
| {name: '西藏', value: 297}, | |
| {name: '四川', value: 981}, | |
| {name: '宁夏', value: 66}, | |
| {name: '海南', value: 667}, | |
| {name: '台湾', value: 345}, | |
| {name: '香港', value: 970}, | |
| {name: '澳门', value: 683} | |
| ]; | |
| var nameValueGeo1 = [ | |
| {name: '北京', value: 507}, | |
| {name: '天津', value: 263}, | |
| {name: '上海', value: 732}, | |
| {name: '重庆', value: 976}, | |
| {name: '河北', value: 299}, | |
| {name: '安徽', value: 465}, | |
| {name: '新疆', value: 259}, | |
| {name: '浙江', value: 822}, | |
| {name: '江西', value: 922}, | |
| {name: '山西', value: 379}, | |
| {name: '内蒙古', value: 544}, | |
| {name: '吉林', value: 190}, | |
| {name: '福建', value: 66}, | |
| {name: '广东', value: 842}, | |
| {name: '西藏', value: 827}, | |
| {name: '四川', value: 71}, | |
| {name: '宁夏', value: 428}, | |
| {name: '香港', value: 466}, | |
| {name: '澳门', value: 119} | |
| ] | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| dataset: { | |
| source: arrayRows0 | |
| }, | |
| series: [ | |
| {type: 'pie', id: 'pie'} | |
| ] | |
| }; | |
| testHelper.create(echarts, 'layout0', { | |
| title: 'pie, default encoding, legend', | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var encode = { | |
| value: '2016', | |
| itemName: 'product' | |
| }; | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| dataset: { | |
| source: arrayRows0 | |
| }, | |
| series: [ | |
| {type: 'pie', id: 'pie', encode: encode} | |
| ] | |
| }; | |
| testHelper.create(echarts, 'layout1', { | |
| title: 'pie, give encoding, default legend', | |
| option: option, | |
| dataTable: arrayRows0, | |
| infoKey: 'encode', | |
| info: encode | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| dataset: { | |
| source: arrayRows0 | |
| }, | |
| series: [ | |
| { | |
| type: 'pie', | |
| id: 'pie', | |
| seriesLayoutBy: 'row', | |
| encode: { | |
| value: 'Milk Tea', | |
| itemName: 'product', | |
| tooltip: 'Milk Tea' | |
| } | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'layout2', { | |
| title: 'pie, give encoding, default legend', | |
| option: option, | |
| dataTable: arrayRows0, | |
| info: { | |
| legend: '<default>', | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| dataset: [{ | |
| source: arrayRowsNoColumnHeader | |
| }, { | |
| source: arrayRowsNoRowHeader | |
| }], | |
| series: [{ | |
| type: 'pie', | |
| radius: 50, | |
| center: ['25%', '25%'], | |
| sourceHeader: false | |
| }, { | |
| type: 'pie', | |
| radius: 50, | |
| center: ['50%', '25%'] | |
| }, { | |
| type: 'pie', | |
| radius: 50, | |
| center: ['75%', '25%'], | |
| sourceHeader: true | |
| }, { | |
| type: 'pie', | |
| radius: 50, | |
| center: ['25%', '75%'], | |
| seriesLayoutBy: 'row', | |
| sourceHeader: false, | |
| datasetIndex: 1 | |
| }, { | |
| type: 'pie', | |
| radius: 50, | |
| center: ['50%', '75%'], | |
| seriesLayoutBy: 'row', | |
| datasetIndex: 1 | |
| }, { | |
| type: 'pie', | |
| radius: 50, | |
| center: ['75%', '75%'], | |
| seriesLayoutBy: 'row', | |
| sourceHeader: true, | |
| datasetIndex: 1 | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout3', { | |
| title: 'no sourceHeader', | |
| height: 400, | |
| option: option, | |
| dataTables: [ | |
| arrayRowsNoColumnHeader, | |
| arrayRowsNoRowHeader | |
| ], | |
| info: { | |
| legend: '<default>', | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts', 'map/js/china'], function (echarts) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| dataset: [{ | |
| source: nameValueGeo0 | |
| }, { | |
| source: nameValueGeo1 | |
| }], | |
| visualMap: { | |
| min: 0, | |
| max: 1500, | |
| calculable : true | |
| }, | |
| series: [{ | |
| name: 'A', | |
| type: 'map', | |
| label: { | |
| show: true | |
| }, | |
| mapType: 'china' | |
| }, { | |
| name: 'B', | |
| type: 'map', | |
| label: { | |
| show: true | |
| }, | |
| mapType: 'china', | |
| datasetIndex: 1 | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout4', { | |
| option: option, | |
| height: 400, | |
| dataTables: [ | |
| nameValueGeo0, | |
| nameValueGeo1 | |
| ], | |
| info: { | |
| legend: option.legend, | |
| tooltip: option.tooltip, | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| xAxis: {}, | |
| yAxis: {}, | |
| dataset: [{ | |
| source: arrayRowsPairValueColumns | |
| }], | |
| series: [{ | |
| type: 'scatter' | |
| }, { | |
| type: 'scatter' | |
| }, { | |
| type: 'scatter' | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout5', { | |
| title: 'column (dimension name duplicated)', | |
| height: 400, | |
| option: option, | |
| dataTables: [ | |
| arrayRowsPairValueColumns | |
| ], | |
| info: { | |
| legend: '<default>', | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| function renderItem(params, api) { | |
| var children = []; | |
| var coordDims = ['x', 'y']; | |
| for (var baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) { | |
| var otherDimIdx = 1 - baseDimIdx; | |
| var encode = params.encode; | |
| var baseValue = api.value(encode[coordDims[baseDimIdx]][0]); | |
| var param = []; | |
| param[baseDimIdx] = baseValue; | |
| param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]); | |
| var highPoint = api.coord(param); | |
| param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]); | |
| var lowPoint = api.coord(param); | |
| var halfWidth = 5; | |
| var style = api.style({ | |
| stroke: api.visual('color'), | |
| fill: null | |
| }); | |
| children.push({ | |
| type: 'line', | |
| shape: makeShape( | |
| baseDimIdx, | |
| highPoint[baseDimIdx] - halfWidth, highPoint[otherDimIdx], | |
| highPoint[baseDimIdx] + halfWidth, highPoint[otherDimIdx] | |
| ), | |
| style: style | |
| }, { | |
| type: 'line', | |
| shape: makeShape( | |
| baseDimIdx, | |
| highPoint[baseDimIdx], highPoint[otherDimIdx], | |
| lowPoint[baseDimIdx], lowPoint[otherDimIdx] | |
| ), | |
| style: style | |
| }, { | |
| type: 'line', | |
| shape: makeShape( | |
| baseDimIdx, | |
| lowPoint[baseDimIdx] - halfWidth, lowPoint[otherDimIdx], | |
| lowPoint[baseDimIdx] + halfWidth, lowPoint[otherDimIdx] | |
| ), | |
| style: style | |
| }); | |
| } | |
| function makeShape(baseDimIdx, base1, value1, base2, value2) { | |
| var shape = {}; | |
| shape[coordDims[baseDimIdx] + '1'] = base1; | |
| shape[coordDims[1 - baseDimIdx] + '1'] = value1; | |
| shape[coordDims[baseDimIdx] + '2'] = base2; | |
| shape[coordDims[1 - baseDimIdx] + '2'] = value2; | |
| return shape; | |
| } | |
| return { | |
| type: 'group', | |
| children: children | |
| }; | |
| } | |
| var option = { | |
| dataset: { | |
| source: errorData | |
| }, | |
| tooltip: { | |
| }, | |
| legend: { | |
| }, | |
| dataZoom: [{ | |
| type: 'slider' | |
| }, { | |
| type: 'inside' | |
| }], | |
| visualMap: { | |
| min: 0, | |
| max: 1000, | |
| dimension: 1, | |
| calculable: true | |
| }, | |
| xAxis: {}, | |
| yAxis: {}, | |
| series: [{ | |
| type: 'scatter', | |
| name: 'error', | |
| encode: { | |
| x: 2, | |
| y: 1, | |
| tooltip: [2, 1, 3, 4, 5, 6], | |
| itemName: 0 | |
| }, | |
| itemStyle: { | |
| normal: { | |
| color: '#77bef7' | |
| } | |
| } | |
| }, { | |
| type: 'custom', | |
| name: 'error', | |
| renderItem: renderItem, | |
| encode: { | |
| x: [2, 3, 4], | |
| y: [1, 5, 6], | |
| tooltip: [2, 1, 3, 4, 5, 6], | |
| itemName: 0 | |
| }, | |
| z: 100 | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout6', { | |
| title: 'error data (custom)', | |
| height: 400, | |
| dataTables: [ | |
| errorData | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts', 'data/stock-DJI.json.js'], function (echarts, source) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {trigger: 'axis'}, | |
| xAxis: {type: 'category'}, | |
| yAxis: {}, | |
| dataset: [{ | |
| source: source | |
| }], | |
| dataZoom: [{}, {type: 'inside'}], | |
| animation: false, | |
| series: [{ | |
| type: 'candlestick', | |
| encode: { | |
| x: 0, | |
| y: [1, 2, 3, 4] | |
| } | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout7', { | |
| height: 400, | |
| option: option, | |
| dataTables: [source], | |
| info: { | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts, source) { | |
| // Thanks to <https://github.com/OvidiuBuleandra> | |
| option = { | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| xAxis: { | |
| type: "category", | |
| scale: true | |
| }, | |
| yAxis: { | |
| type: "value", | |
| scale: true, | |
| boundaryGap: ['5%', '5%'] | |
| }, | |
| dataZoom: [{ | |
| type: 'slider' | |
| }, { | |
| type: 'inside' | |
| }], | |
| dataset: { | |
| dimensions: ["date","open","high","low","close","volume",{name: "haOpen", displayName: 'open'},"haHigh","haLow","haClose","sma9"], | |
| source: [ | |
| ["2018-01-09 14:30:00",14636.21,14682.6,14401.0,14659.57,349.069176,14647.89,14682.6,14401.0,14594.845,0.0], | |
| ["2018-01-09 15:00:00",14650.0,14700.0,14238.99,14347.43,459.735215,14621.3675,14700.0,14238.99,14484.105,0.0], | |
| ["2018-01-09 15:30:00",14374.72,14434.2,14011.05,14041.03,697.055035,14552.73625,14552.73625,14011.05,14215.25,0.0], | |
| ["2018-01-09 16:00:00",14072.87,14497.06,14064.13,14349.0,671.165463,14383.993125,14497.06,14064.13,14245.765,0.0], | |
| ["2018-01-09 16:30:00",14369.98,14640.99,14340.0,14560.48,416.750768,14314.8790625,14640.99,14314.8790625,14477.8625,0.0], | |
| ["2018-01-09 17:00:00",14551.42,14800.0,14551.41,14749.55,357.445717,14396.37078125,14800.0,14396.37078125,14663.095000000001,0.0], | |
| ["2018-01-09 17:30:00",14745.0,14766.2,14485.0,14654.96,306.727704,14529.732890625,14766.2,14485.0,14662.789999999999,0.0], | |
| ["2018-01-09 18:00:00",14655.01,14829.0,14585.01,14800.1,194.858965,14596.261445312499,14829.0,14585.01,14717.28,0.0], | |
| ["2018-01-09 18:30:00",14800.1,14998.62,14792.03,14951.01,313.268531,14656.770722656249,14998.62,14656.770722656249,14885.44,0.0], | |
| ["2018-01-09 19:00:00",14968.0,14982.0,14778.47,14810.0,214.504459,14771.105361328126,14982.0,14771.105361328126,14884.6175,16213.681111111111], | |
| ["2018-01-09 19:30:00",14810.0,14973.49,14799.95,14949.98,144.830078,14827.861430664063,14973.49,14799.95,14883.355,16245.94888888889], | |
| ["2018-01-09 20:00:00",14949.98,14990.0,14865.49,14916.91,145.574797,14855.608215332031,14990.0,14855.608215332031,14930.595000000001,16309.224444444444], | |
| ["2018-01-09 20:30:00",14914.03,14945.01,14799.01,14803.44,146.21296,14893.101607666016,14945.01,14799.01,14865.372500000001,16393.936666666665], | |
| ["2018-01-09 21:00:00",14803.46,14863.93,14700.44,14799.0,190.167582,14879.237053833009,14879.237053833009,14700.44,14791.7075,16443.936666666665], | |
| ["2018-01-09 21:30:00",14798.99,14798.99,14650.0,14717.82,209.543776,14835.472276916506,14835.472276916506,14650.0,14741.449999999999,16461.41888888889], | |
| ["2018-01-09 22:00:00",14717.82,14781.56,14600.0,14615.9,164.859485,14788.461138458253,14788.461138458253,14600.0,14678.82,16446.568888888887], | |
| ["2018-01-09 22:30:00",14647.09,14861.56,14615.4,14755.03,228.445843,14733.640569229126,14861.56,14615.4,14719.77,16457.687777777777], | |
| ["2018-01-09 23:00:00",14755.33,14780.0,14680.0,14702.33,150.779654,14726.705284614563,14780.0,14680.0,14729.415,16446.824444444443], | |
| ["2018-01-09 23:30:00",14709.49,14709.49,14420.0,14462.81,274.752199,14728.060142307282,14728.060142307282,14420.0,14575.447499999998,16392.579999999998], | |
| ["2018-01-10 00:00:00",14452.0,14536.36,14407.77,14435.0,279.156552,14651.753821153641,14651.753821153641,14407.77,14457.782500000001,16350.913333333334], | |
| ["2018-01-10 00:30:00",14435.0,14459.94,14182.84,14254.92,435.050575,14554.768160576821,14554.768160576821,14182.84,14333.175,16273.684444444445], | |
| ["2018-01-10 01:00:00",14234.7,14290.56,14125.0,14259.98,422.926221,14443.97158028841,14443.97158028841,14125.0,14227.560000000001,16200.692222222224], | |
| ["2018-01-10 01:30:00",14259.98,14454.95,14144.13,14400.0,377.788542,14335.765790144205,14454.95,14144.13,14314.765,16155.865555555552], | |
| ["2018-01-10 02:00:00",14401.0,14480.0,13750.0,13972.46,582.921859,14325.265395072103,14480.0,13750.0,14150.865,16064.027777777777] | |
| ] | |
| }, | |
| series: [{ | |
| type: "candlestick", | |
| encode: { | |
| x: "date", | |
| // y: ["open", "close", "low", "high"], | |
| y: ["haOpen","haClose","haLow","haHigh"], | |
| tooltip: ["haOpen", "haHigh", "haLow", "haClose"] | |
| } | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout7.5', { | |
| title: 'Check: Y use haOpen, haHigh, haLow, haClose, but display name of "haOpen" is open', | |
| height: 400, | |
| option: option, | |
| dataTable: option.dataset.source, | |
| info: { | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts', 'data/stock-DJI.json.js'], function (echarts, source) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {trigger: 'axis'}, | |
| xAxis: {type: 'time'}, | |
| yAxis: {}, | |
| dataset: [{ | |
| source: source | |
| }], | |
| dataZoom: [{}, {type: 'inside'}], | |
| animation: false, | |
| series: [{ | |
| type: 'candlestick', | |
| encode: { | |
| x: 0, | |
| y: [1, 2, 3, 4] | |
| } | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout8', { | |
| title: 'time axis', | |
| height: 400, | |
| option: option, | |
| dataTables: [source], | |
| info: { | |
| series: option.series | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts, source) { | |
| var option = { | |
| legend: {}, | |
| dataset: [{ | |
| source: arrayRows1 | |
| }], | |
| parallelAxis: [ | |
| {dim: 0, type: 'category'}, | |
| {dim: 1}, | |
| {dim: 2}, | |
| {dim: 3} | |
| ], | |
| parallel: { | |
| axisExpandable: true, | |
| axisExpandCenter: 15, | |
| axisExpandCount: 10, | |
| axisExpandWidth: 60, | |
| axisExpandTriggerOn: 'mousemove', | |
| parallelAxisDefault: { | |
| type: 'value', | |
| nameLocation: 'end', | |
| nameGap: 20, | |
| tooltip: { | |
| show: true | |
| }, | |
| nameTextStyle: { | |
| fontSize: 14 | |
| }, | |
| splitLine: { | |
| show: false | |
| } | |
| } | |
| }, | |
| series: [{ | |
| type: 'parallel' | |
| }] | |
| }; | |
| testHelper.create(echarts, 'layout9', { | |
| height: 400, | |
| option: option, | |
| dataTables: [arrayRows1] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| legend: {}, | |
| tooltip: {}, | |
| dataset: { | |
| source: arrayRows0 | |
| }, | |
| series: [ | |
| { | |
| label: { | |
| formatter: '{@product} {@[1]}' | |
| }, | |
| type: 'funnel', | |
| id: 'pie' | |
| } | |
| ] | |
| }; | |
| testHelper.create(echarts, 'layout10', { | |
| option: option, | |
| dataTable: arrayRows0 | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| dataset: { | |
| source: [ | |
| [12, 323, 11.2], | |
| [23, 167, 8.3], | |
| [81, 284, 12], | |
| [91, 413, 4.1], | |
| [13, 287, 13.5] | |
| ] | |
| }, | |
| xAxis: {}, | |
| yAxis: {}, | |
| visualMap: { | |
| show: false, | |
| dimension: 2, | |
| min: 2, | |
| max: 15, | |
| inRange: { | |
| symbolSize: [5, 60] | |
| } | |
| }, | |
| series: { | |
| type: 'scatter' | |
| } | |
| }; | |
| testHelper.create(echarts, 'layout11', { | |
| option: option, | |
| dataTable: option.dataset.source | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option = { | |
| dataset: { | |
| source: [ | |
| ['product', '2015', '2016', '2017'], | |
| ['Matcha Latte', 43.3, 85.8, 93.7], | |
| ['Milk Tea', 83.1, 73.4, 55.1], | |
| ['Cheese Cocoa', 86.4, 65.2, 82.5], | |
| ['Walnut Brownie', 72.4, 53.9, 39.1] | |
| ] | |
| }, | |
| xAxis: {type: 'category'}, | |
| yAxis: {}, | |
| series: [ | |
| {type: 'bar'}, | |
| {type: 'bar'}, | |
| {type: 'bar'} | |
| ], | |
| toolbox: { | |
| feature: { | |
| dataView: {} | |
| } | |
| } | |
| } | |
| testHelper.create(echarts, 'layout12', { | |
| option: option, | |
| dataTable: option.dataset.source | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |