| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.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(0, 112, 6); |
| color: #fff; |
| } |
| </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> |
| |
| |
| |
| |
| |
| |
| |
| |
| <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] |
| ]; |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| |
| var option = { |
| legend: {}, |
| tooltip: {}, |
| xAxis: {type: 'category'}, |
| yAxis: {}, |
| dataset: { |
| source: arrayRows0 |
| }, |
| series: [ |
| {type: 'bar'}, |
| {type: 'bar'}, |
| {type: 'bar'} |
| ] |
| }; |
| |
| testHelper.create(echarts, 'layout0', { |
| title: '[Default] seriesLayoutBy, enocde, name, head, legend', |
| option: option, |
| dataTable: arrayRows0 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| |
| var option = { |
| legend: {}, |
| tooltip: {}, |
| dataset: { |
| source: arrayRows0 |
| }, |
| xAxis: [ |
| {type: 'category', gridIndex: 0}, |
| {type: 'category', gridIndex: 1} |
| ], |
| yAxis: [ |
| {gridIndex: 0}, |
| {gridIndex: 1} |
| ], |
| grid: [ |
| {bottom: '55%'}, |
| {top: '55%'} |
| ], |
| series: [ |
| {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}}, |
| {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}}, |
| {type: 'bar', xAxisIndex: 0, yAxisIndex: 0, label: {show: true, position: 'top'}}, |
| {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'}, |
| {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'}, |
| {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'}, |
| {type: 'bar', xAxisIndex: 1, yAxisIndex: 1, seriesLayoutBy: 'row'}, |
| ] |
| }; |
| |
| testHelper.create(echarts, 'layout1', { |
| title: 'seriesLayoutBy: "row" and "column" \n[Default] enocde, name, head, legend', |
| option: option, |
| dataTable: arrayRows0, |
| height: 500, |
| info: { |
| grid: option.grid, |
| series: option.series |
| } |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| |
| var option = { |
| legend: {}, |
| tooltip: { |
| trigger: 'axis', |
| showContent: false |
| }, |
| dataset: { |
| source: arrayRows1 |
| }, |
| xAxis: {type: 'category'}, |
| yAxis: {gridIndex: 0}, |
| grid: {top: '55%'}, |
| series: [ |
| {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
| {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
| {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
| {type: 'line', smooth: true, seriesLayoutBy: 'row'}, |
| { |
| type: 'pie', |
| id: 'pie', |
| radius: '30%', |
| center: ['50%', '25%'], |
| label: { |
| formatter: '{b}: {@2012} ({d}%)' |
| }, |
| encode: { |
| itemName: 'product', |
| value: '2012', |
| tooltip: '2012' |
| } |
| } |
| ] |
| }; |
| |
| var chart = testHelper.create(echarts, 'layout2', { |
| title: 'seriesLayoutBy: row and column, setOption, pie \n [Default] enocde, name, head, legend', |
| option: option, |
| dataTable: arrayRows1, |
| height: 500 |
| }); |
| |
| chart && chart.on('updateAxisPointer', function (event) { |
| var xAxisInfo = event.axesInfo[0]; |
| if (xAxisInfo) { |
| var dimension = xAxisInfo.value + 1; |
| chart.setOption({ |
| series: { |
| id: 'pie', |
| label: { |
| formatter: '{b}: {@[' + dimension + ']} ({d}%)' |
| }, |
| encode: { |
| value: dimension, |
| tooltip: dimension |
| } |
| } |
| }); |
| } |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| |
| // Thanks to: https://github.com/lzp4ever |
| var option = { |
| legend: {}, |
| tooltip: { |
| trigger: 'axis', |
| }, |
| toolbox: { |
| top: 25, |
| // right: 20, |
| feature: { |
| magicType: { |
| type: ['stack', 'tiled'] |
| } |
| } |
| }, |
| dataset: { |
| source: [ |
| ['series', '1', '2', '3', '4', '5', '6'], |
| ['a', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7], |
| ['b', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1], |
| ['c', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5], |
| ['d', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1], |
| ], |
| }, |
| xAxis: { type: 'category' }, |
| yAxis: { gridIndex: 0 }, |
| series: [ |
| { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} }, |
| { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} }, |
| { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} }, |
| { type: 'line', stack: 'sameStack', smooth: true, seriesLayoutBy: 'row', areaStyle: {}, label: {show: true} }, |
| |
| ], |
| }; |
| |
| var chart = testHelper.create(echarts, 'layout3', { |
| title: 'stack', |
| option: option, |
| dataTable: option.dataset.source |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = { |
| dataset: [{ |
| source: [ |
| ['2012-12-12', 323, 11.2], |
| ['2012-12-13', 167, 8.3], |
| ['2012-12-14', 284, 12], |
| ['2012-12-18', 413, 4.1], |
| ['2012-12-19', 287, 13.5] |
| ] |
| }, { |
| source: [ |
| [new Date(2012, 11, 12), 323 + 100, 11.2 + 100], |
| [new Date(2012, 11, 13), 167 + 100, 8.3 + 100], |
| [new Date(2012, 11, 14), 284 + 100, 12 + 100], |
| [new Date(2012, 11, 18), 413 + 100, 4.1 + 100], |
| [new Date(2012, 11, 19), 287 + 100, 13.5 + 100] |
| ] |
| }], |
| legend: {}, |
| xAxis: { |
| type: 'time' |
| }, |
| yAxis: {}, |
| dataZoom: [{ |
| type: 'slider', |
| }, { |
| type: 'inside' |
| }], |
| grid: { |
| bottom: 80 |
| }, |
| series: [{ |
| name: 'A1', |
| encode: {x: 0, y: 1}, |
| type: 'line' |
| }, { |
| name: 'A2', |
| encode: {x: 0, y: 2}, |
| type: 'line' |
| }, { |
| name: 'B1', |
| encode: {x: 0, y: 1}, |
| datasetIndex: 1, |
| type: 'line' |
| }, { |
| name: 'B2', |
| encode: {x: 0, y: 2}, |
| datasetIndex: 1, |
| type: 'line' |
| }] |
| }; |
| |
| testHelper.create(echarts, 'layout4', { |
| title: 'time axis', |
| option: option, |
| dataTables: [ |
| option.dataset[0].source, |
| option.dataset[1].source |
| ] |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| |
| var option = { |
| dataset: { |
| source: [ |
| ['2012-12-12 15:18:09.321', 323, 11.2], |
| ['2012-12-12 15:18:10.432', 167, 8.3], |
| ['2012-12-12 15:18:11.543', 284, 12], |
| ['2012-12-12 15:18:12.654', 413, 4.1], |
| ['2012-12-12 15:18:13.765', 287, 13.5] |
| ] |
| }, |
| legend: {}, |
| xAxis: { |
| type: 'time', |
| axisLabel: { |
| formatter: function (val) { |
| return echarts.format.formatTime('hh:mm:ss.SSS\nyyyy-MM-dd', val) |
| } |
| } |
| }, |
| yAxis: {}, |
| dataZoom: [{ |
| type: 'slider', |
| }, { |
| type: 'inside' |
| }], |
| grid: { |
| bottom: 80 |
| }, |
| series: [{ |
| name: 'A1', |
| encode: {x: 0, y: 1}, |
| label: { |
| show: true, |
| formatter: function (param) { |
| return echarts.format.formatTime('hh:mm:ss.SSS', param.value[0]) |
| }, |
| textBorderColor: '#fff', |
| textBorderWidth: 3 |
| }, |
| type: 'line' |
| }, { |
| name: 'A2', |
| encode: {x: 0, y: 2}, |
| type: 'line' |
| }] |
| }; |
| |
| testHelper.create(echarts, 'layout5', { |
| title: 'time axis2', |
| option: option, |
| dataTable: option.dataset.source |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| </body> |
| </html> |
