| <!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> |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var vaData = [[0, 2.57], [1, 6.49], [2, 8.42], [3, 8.72], [4, 1.97], [5, 8.83], [6, 0.94], [7, 0.14], [8, 5.55], [9, 4.54]]; |
| |
| |
| var option = { |
| xAxis: { |
| type: 'value', |
| axisLabel: { |
| customValues: [0, 4, 7, 8, 9] |
| }, |
| axisTick: { |
| alignWithLabel: true, |
| customValues: [0, 0.5, 1, 1.5, 2, 8, 9] |
| }, |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'line', |
| data: vaData, |
| smooth: true |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main0', { |
| title: [ |
| 'Value axis custom tick/label positions', |
| 'Ticks on 0, 0.5, 1, 1.5, 2, 8, 9', |
| 'Labels on 0, 4, 7, 8, 9' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var caData = [7.66, 7.70, 2.11, 7.62, 5.56, 5.09, 3.26, 0.24, -0.46, 8.11]; |
| |
| var option = { |
| xAxis: { |
| type: 'category', |
| data: ['1', '2', '3', 'four', 'five', '6', '7', '8', '9', '10'], |
| axisLabel: { |
| customValues: ["1", "four", 4, "10"] |
| }, |
| axisTick: { |
| alignWithLabel: true, |
| customValues: ["1", 3, "five", 6, "10"] |
| }, |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'line', |
| data: caData, |
| smooth: true |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main1', { |
| title: [ |
| 'Category axis custom tick/label positions', |
| 'Ticks on 1, four, five, 7, 10', |
| 'Labels on 1, four, five, 10' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var vals = [1.64, -0.84, -0.96, 8.03, 7.53, 4.14, 3.91, 8.39, 7.02, 2.28]; |
| var taData = []; |
| for (var i = 0; i < 10; i++) { |
| taData.push([new Date(2020, 1, i+1), vals[i]]); |
| } |
| |
| var option = { |
| xAxis: { |
| type: 'time', |
| axisLabel: { |
| customValues: [ |
| new Date(2020, 1, 1), |
| new Date(2020, 1, 4), |
| new Date(2020, 1, 5), |
| new Date(2020, 1, 10) |
| ] |
| }, |
| axisTick: { |
| alignWithLabel: true, |
| customValues: [ |
| new Date(2020, 1, 1), |
| new Date(2020, 1, 4), |
| new Date(2020, 1, 10) |
| ] |
| }, |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'line', |
| data: taData, |
| smooth: true |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main2', { |
| title: [ |
| 'Time axis custom tick/label positions', |
| 'Ticks on 1st, 4th, 10th', |
| 'Labels on 1, 4th, 5th, 10th' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var laData = [[1, 3.47], [2, 7.84], [3, 2.01], [4, 4.20], [5, 3.87], [6, 1.50], [7, 2.56], [8, 6.40], [9, 1.74], [10, 2.96]]; |
| |
| var option = { |
| xAxis: { |
| type: 'log', |
| axisLabel: { |
| customValues: [1, 4, 7, 8, 10] |
| }, |
| axisTick: { |
| alignWithLabel: true, |
| customValues: [1, 0.5, 1, 1.5, 2, 8, 10] |
| }, |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'line', |
| data: laData |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main3', { |
| title: [ |
| 'Log axis custom tick/label positions', |
| 'Ticks on 1, 1.5, 2, 8, 10', |
| 'Labels on 1, 4, 7, 8, 10' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = { |
| grid: { |
| left: 300 |
| }, |
| dataZoom: [ |
| { |
| show: true, |
| realtime: true, |
| start: 20, |
| end: 100 |
| }, |
| { |
| type: 'inside', |
| realtime: true, |
| start: 20, |
| end: 100 |
| } |
| ], |
| xAxis: { |
| axisTick: { |
| alignWithLabel: false, |
| customValues: ['a', 'c', 'd'] |
| }, |
| axisLabel: { |
| customValues: ['a', 'c', 'd'] |
| }, |
| type: 'category', |
| data: ['a', 'b', 'c', 'd'] |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| symbolSize: 8, |
| data: [ |
| ['a', 34], |
| ['b', 20], |
| ['c', 23] |
| ], |
| type: 'scatter' |
| } |
| ] |
| }; |
| |
| |
| var chart = testHelper.create(echarts, 'main4', { |
| title: [ |
| 'customValues should not overflow the grid (category axis)', |
| '`a` in the axis label should not be displayed' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var laData = [[1, 3.47], [2, 7.84], [3, 2.01], [4, 4.20], [5, 3.87], [6, 1.50], [7, 2.56], [8, 6.40], [9, 1.74], [10, 2.96]]; |
| |
| var option = { |
| grid: {}, |
| dataZoom: [ |
| { |
| show: true, |
| realtime: true, |
| start: 10, |
| end: 100 |
| }, |
| { |
| type: 'inside', |
| realtime: true, |
| start: 10, |
| end: 100 |
| } |
| ], |
| xAxis: { |
| // inverse: true, |
| min: 0.8232487, |
| max: 15.913814, |
| axisTick: { |
| alignWithLabel: false, |
| customValues: [ |
| 0.8232487, 1.0162385, 1.1550374, 1.2683247, 1.3663184, 1.4539799, |
| 1.5341381, 1.6085765, 1.678501, 1.7447696, 2.0390995, 2.2967868, |
| 2.5353202, 2.763711, 2.9876446, 3.2113228, 3.4383155, 3.6720607, |
| 3.9162545, 4.1752627, 4.4546794, 4.7622291, 5.1094275, 5.5150457, |
| 6.0135369, 6.6807831, 6.8487278, 7.0341985, 7.2417842, 7.4781695, |
| 7.7536565, 8.0853878, 8.5052466, 8.7672731, 9.0841154, 9.4869366, |
| 10.0451175, 10.1885089, 10.3480597, 10.5280286, 10.7346329, 10.9774775, |
| 11.2725888, 11.6498673, 11.8872372, 12.1760407, 12.5457607, 13.0622408, |
| 13.1956236, 13.3443503, 13.5124879, 13.7059808, 13.9340232, 14.2119776, |
| 14.5685523, 14.7935524, 15.0679412, 15.4201567, 15.913814 |
| ] |
| }, |
| axisLabel: { |
| customValues: [ |
| 0.8232487, 1.7447696, 2.5353202, 3.6720607, 5.1094275, 6.6807831, |
| 7.7536565, 10.0451175, 10.9774775, 13.0622408, 13.9340232, 15.913814 |
| ], |
| formatter: function (value, index, revers = true) { |
| switch (value) { |
| case 0.8232487: |
| return revers ? '1 %' : '99%'; |
| case 1.7447696: |
| return revers ? '10 %' : '90%'; |
| case 2.5353202: |
| return revers ? '25 %' : '75%'; |
| case 3.6720607: |
| return revers ? '50 %' : '50%'; |
| case 5.1094275: |
| return revers ? '75 %' : '25%'; |
| case 6.6807831: |
| return revers ? '90 %' : '10%'; |
| case 7.7536565: |
| return revers ? '95 %' : '5%'; |
| case 10.0451175: |
| return revers ? '99 %' : '1%'; |
| case 10.9774775: |
| return revers ? '99,5 %' : '0,5%'; |
| case 13.0622408: |
| return revers ? '99,9 %' : '0,1%'; |
| case 13.9340232: |
| return revers ? '99,9 %' : '0,05%'; |
| case 15.913814: |
| return revers ? '99,9 %' : '0,01%'; |
| default: |
| return '- %'; |
| } |
| } |
| } |
| }, |
| yAxis: {}, |
| series: [ |
| { |
| symbolSize: 8, |
| data: [ |
| [5.890028, 627], |
| [2.264864, 191], |
| [3.908172, 364], |
| [8.400104, 1040], |
| [3.298611, 301], |
| [1.921706, 164], |
| [3.445732, 318], |
| [4.426555, 440], |
| [1.490985, 145], |
| [1.72375, 160], |
| [5.050093, 498], |
| [2.099646, 176], |
| [4.245153, 422], |
| [7.3673, 686], |
| [3.15342, 254], |
| [1.182348, 118], |
| [2.720003, 244], |
| [3.595705, 320], |
| [2.421612, 199], |
| [3.009242, 251], |
| [3.749499, 325], |
| [4.072923, 393], |
| [4.619232, 484], |
| [5.573134, 573], |
| [4.825884, 494], |
| [2.86512, 246], |
| [6.26557, 652], |
| [5.296798, 530], |
| [2.572668, 241], |
| [6.733265, 659] |
| ], |
| type: 'scatter' |
| } |
| ] |
| }; |
| |
| |
| var chart = testHelper.create(echarts, 'main5', { |
| title: [ |
| 'customValues should not overflow the grid (time axis)' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var weeklyData = [ |
| ['2025-05-26', 116], |
| ['2025-06-02', 129], |
| ['2025-06-09', 135], |
| ['2025-06-16', 86], |
| ['2025-06-23', 73], |
| ['2025-06-30', 85], |
| ['2025-07-07', 73], |
| ['2025-07-14', 68], |
| ['2025-07-21', 92], |
| ['2025-07-28', 84], |
| ['2025-08-04', 79], |
| ['2025-08-11', 88], |
| ['2025-08-18', 91], |
| ['2025-08-25', 95] |
| ]; |
| |
| var timestamps = weeklyData.map(function(d) { return new Date(d[0]).getTime(); }); |
| |
| var option = { |
| xAxis: { |
| type: 'time', |
| axisLabel: { |
| customValues: timestamps, |
| formatter: function(value) { |
| var date = new Date(value); |
| var month = date.getMonth() + 1; |
| var day = date.getDate(); |
| return (day < 10 ? '0' + day : day) + '.' + (month < 10 ? '0' + month : month); |
| } |
| } |
| }, |
| yAxis: { |
| type: 'value' |
| }, |
| series: [{ |
| type: 'bar', |
| data: weeklyData |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main6', { |
| title: [ |
| 'Time axis customValues with formatter', |
| 'Should not throw TypeError about tick.time.level', |
| 'Labels formatted as DD.MM' |
| ], |
| option: option |
| }); |
| }); |
| </script> |
| |
| |
| </body> |
| </html> |
