| <!-- | |
| 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/facePrint.js"></script> | |
| <script src="lib/testHelper.js"></script> | |
| <!-- <script src="lib/canteen.js"></script> --> | |
| <!-- <script src="lib/draggable.js"></script> --> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id='main0'></div> | |
| <div id='main1'></div> | |
| <div id='main2_negative'></div> | |
| <div id='main_small_values'></div> | |
| <div id='main3'></div> | |
| <div id='main_singleAxis_dataZoom'></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option = { | |
| title: { | |
| text: '对数轴示例', | |
| x: 'center' | |
| }, | |
| tooltip: { | |
| trigger: 'item', | |
| formatter: '{a} <br/>{b} : {c}' | |
| }, | |
| legend: { | |
| left: 'left', | |
| //data: ['2的指数', '3的指数'] | |
| }, | |
| xAxis: [{ | |
| type: 'category', | |
| name: 'x', | |
| splitLine: {show: false}, | |
| data: ['一', '二', '三', '四', '五', '六', '七', '八', '九'] | |
| }], | |
| yAxis: [{ | |
| type: 'log', | |
| name: 'y', | |
| scale: false | |
| }], | |
| series: [ | |
| { | |
| name: '3的指数', | |
| type: 'line', | |
| data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669] | |
| }, | |
| { | |
| name: '2的指数', | |
| type: 'line', | |
| data: [1, 2, 4, 8, 16, 32, 64, 128, 256] | |
| }, | |
| { | |
| name: '0.1 的指数', | |
| type: 'line', | |
| data: [1, 0.1, 0.01, 1e-3, 1e-4, 1e-5, 1e-6, 1e-7, 1e-8] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'log test 1', | |
| ], | |
| option: option, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| // See #13154 | |
| var option = { | |
| xAxis: { | |
| type: 'value', | |
| }, | |
| yAxis: { | |
| type: 'log', | |
| logBase: 2, | |
| }, | |
| series: [ | |
| { | |
| type: 'scatter', | |
| itemStyle: { | |
| color: 'red', | |
| }, | |
| data: [ | |
| [1, .5], | |
| ], | |
| }, | |
| ], | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| title: [ | |
| 'log test 2', | |
| ], | |
| option: option, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts /*, data */) { | |
| const _ctx = { | |
| yAxisMin: undefined, | |
| lineConnectNulls: undefined, | |
| }; | |
| function makeSeriesOption(seriesType, data) { | |
| return { | |
| type: seriesType, | |
| symbolSize: 10, | |
| name: [ | |
| seriesType, | |
| seriesType === 'line' ? ` connectNulls: ${_ctx.lineConnectNulls};` : '', | |
| ` dataY: ${data.map(function (item) { return item[1]; }).join(', ')}` | |
| ].join(''), | |
| data: data, | |
| connectNulls: _ctx.lineConnectNulls, | |
| }; | |
| } | |
| function makeOption() { | |
| return { | |
| legend: { | |
| }, | |
| tooltip: {}, | |
| xAxis: [ | |
| { | |
| id: 0, | |
| nameMoveOverlap: true, | |
| nameLocation: 'middle', | |
| axisLine: {onZero: false}, | |
| position: ['bottom', 'top'] | |
| } | |
| ], | |
| yAxis: [ | |
| { | |
| id: 0, | |
| name: 'yAxis is log', | |
| type: 'log', | |
| min: _ctx.yAxisMin, | |
| nameMoveOverlap: true, | |
| nameLocation: 'middle', | |
| axisLine: {onZero: false}, | |
| position: ['left', 'right'] | |
| } | |
| ], | |
| grid: [ | |
| { | |
| left: 100, | |
| right: 10, | |
| top: 30, | |
| bottom: 120, | |
| show: true, | |
| } | |
| ], | |
| series: [ | |
| makeSeriesOption('scatter', [ | |
| [-50, 0], [-50, 1219212121] | |
| ]), | |
| makeSeriesOption('scatter', [ | |
| [10000000000, -832], | |
| [55555550000, 31133232233] | |
| ]), | |
| makeSeriesOption('line', [ | |
| [15555550000, 461293242], | |
| [20555550000, 581293242], | |
| [25000000000, -111832], | |
| [30555550000, 719293242], | |
| [35555550000, 519293242] | |
| ]), | |
| makeSeriesOption('line', [ | |
| [15555550000, 251293242], | |
| [20555550000, 231293242], | |
| [25000000000, 0], | |
| [30555550000, 319293242], | |
| [35555550000, 219293242] | |
| ]), | |
| ] | |
| }; | |
| } | |
| var chart = testHelper.create(echarts, 'main2_negative', { | |
| title: [ | |
| 'yAxis: non-positive points should be ignored; others are displayed.', | |
| 'yAxis extent should exclude the non-positive values.', | |
| 'When yAxis.min is non-positive, can show a defaults effect, but should be recoverable.', | |
| 'When yAxis.min is "dataMin", non-positive values should be ignored.', | |
| 'Check connectNulls.', | |
| ], | |
| option: makeOption(), | |
| inputStyle: 'compact', | |
| inputs: [{ | |
| text: 'yAxis min:', | |
| type: 'select', | |
| values: [_ctx.yAxisMin, -1000000, 0, 'dataMin', 2000000], | |
| onchange: function () { | |
| _ctx.yAxisMin = this.value; | |
| chart.setOption(makeOption()); | |
| } | |
| }, { | |
| text: 'line connectNulls:', | |
| type: 'select', | |
| values: [_ctx.lineConnectNulls, false, true], | |
| onchange: function () { | |
| _ctx.lineConnectNulls = this.value; | |
| chart.setOption(makeOption()); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| function genData(exponent) { | |
| return [ | |
| [0.00001782501876267492, `1.6783442046243093e${-9 + exponent}`], | |
| [0.20000000000000004, `1.5239855205892977e${-13 + exponent}`], | |
| [0.3097633237824966, `9.94535044331967e${-14 + exponent}`], | |
| [1, `2.966552224094815e${-19 + exponent}`], | |
| // [10, `1.6783442046243093e${-9 + exponent}`], | |
| // [100, `1.5239855205892977e${-13 + exponent}`] | |
| ]; | |
| } | |
| option = { | |
| style: { | |
| height: '100%', | |
| width: '100%' | |
| }, | |
| tooltip: {}, | |
| grid: [ | |
| { | |
| containLabel: true | |
| } | |
| ], | |
| yAxis: [ | |
| { | |
| type: 'log', | |
| logBase: 10, | |
| axisLabel: { | |
| formatter: function (value) { | |
| return value.toExponential(0); | |
| } | |
| } | |
| } | |
| ], | |
| xAxis: [ | |
| { | |
| // type: 'log', | |
| // logBase: 10 | |
| } | |
| ], | |
| series: [ | |
| { | |
| data: genData(0), | |
| type: 'line', | |
| // showSymbol: false | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main_small_values', { | |
| title: [ | |
| 'test small values', | |
| ], | |
| option: option, | |
| inputs: [ | |
| { | |
| type: 'select', | |
| text: 'exponent:', | |
| values: [0, -9, -19, -50], | |
| onchange: function () { | |
| chart.setOption({ | |
| series: [{ | |
| data: genData(this.value) | |
| }] | |
| }); | |
| } | |
| }, | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| option = { | |
| xAxis: { | |
| data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'] | |
| }, | |
| yAxis: { | |
| type: 'log', | |
| }, | |
| legend: {}, | |
| series: [{ | |
| name: 'A', | |
| type: 'candlestick', | |
| data: [ | |
| ['0.000000000012', '0.000000000034', '0.000000000010', '0.000000000038'], | |
| ['0.000000000032', '0.000000000054', '0.000000000015', '0.000000000058'] | |
| ] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| title: [ | |
| 'boxplot in LogScale' | |
| ], | |
| option: option, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| ], function (echarts) { | |
| var data2 = []; | |
| for (var i = 0; i < 12; i++) { | |
| data2.push([Math.random() * (i % 2 === 0 ? 100 : 1000000), Math.random() * 30]); | |
| } | |
| option = { | |
| tooltip: { | |
| trigger: 'axis' | |
| }, | |
| dataZoom: [{ | |
| type: 'inside', | |
| singleAxisIndex: [0] | |
| }, { | |
| type: 'slider', | |
| singleAxisIndex: [0] | |
| }], | |
| singleAxis: [{ | |
| type: 'log', | |
| id: 'c', | |
| bottom: 80, | |
| axisPointer: { | |
| snap: false, | |
| label: { | |
| show: true | |
| } | |
| }, | |
| splitArea: { | |
| show: true | |
| }, | |
| }], | |
| series: { | |
| type: 'scatter', | |
| coordinateSystem: 'singleAxis', | |
| singleAxisId: 'c', | |
| symbolSize: function (val) { | |
| return val[1]; | |
| }, | |
| data: data2 | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main_singleAxis_dataZoom', { | |
| title: [ | |
| 'singleAxis log with dataZoom', | |
| 'min/max precision should be proper after zooming', | |
| ], | |
| height: 300, | |
| option: option, | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |