Spaces:
Running
Running
| <!-- | |
| 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> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <style> | |
| h1 { | |
| line-height: 60px; | |
| height: 60px; | |
| background: #146402; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #eee; | |
| font-size: 14px; | |
| } | |
| </style> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <div id="main3"></div> | |
| <div id="main4"></div> | |
| <script> | |
| require([ | |
| 'echarts', | |
| 'data/life-expectancy-table.json' | |
| ], function (echarts, data) { | |
| var updateFrequency = 5000; | |
| var dimension = 1; | |
| var years = []; | |
| for (var i = 0; i < data.length; ++i) { | |
| if (years.length === 0 || years[years.length - 1] !== data[i][4]) { | |
| years.push(data[i][4]); | |
| } | |
| } | |
| var option = { | |
| grid: { | |
| left: 150, | |
| right: 150 | |
| }, | |
| xAxis: { | |
| max: 'dataMax', | |
| label: { | |
| formatter: function (n) { | |
| return Math.round(n); | |
| } | |
| }, | |
| splitLine: { | |
| lineStyle: { | |
| color: 'red' | |
| } | |
| } | |
| }, | |
| dataset: { | |
| source: data.slice(1).filter(d => { | |
| return d[4] === 1800; | |
| }) | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| inverse: true, | |
| max: 10, | |
| axisLabel: { | |
| show: true | |
| }, | |
| animationDuration: 300, | |
| animationDurationUpdate: 300 | |
| }, | |
| series: [{ | |
| realtimeSort: true, | |
| seriesLayoutBy: 'column', | |
| type: 'bar', | |
| encode: { | |
| x: dimension, | |
| y: 3 | |
| }, | |
| label: { | |
| show: true, | |
| position: 'right', | |
| formatter: function (param) { | |
| return param.value[dimension]; | |
| }, | |
| valueAnimation: true, | |
| fontFamily: 'monospace' | |
| } | |
| }], | |
| animationDurationUpdate: updateFrequency, | |
| animationEasing: 'linear', | |
| animationEasingUpdate: 'linear', | |
| graphic: { | |
| elements: [{ | |
| type: 'text', | |
| right: 160, | |
| bottom: 60, | |
| style: { | |
| text: '1960', | |
| font: 'bolder 80px monospace', | |
| fill: 'rgba(100, 100, 100, 0.25)' | |
| }, | |
| z: 100 | |
| }] | |
| } | |
| }; | |
| for (var i = 1; i < years.length; ++i) { | |
| (function (i) { | |
| setTimeout(function () { | |
| updateYear(years[i + 1]); | |
| }, (i - 1) * updateFrequency); | |
| })(i); | |
| } | |
| function updateYear(year) { | |
| var source = data.slice(1).filter(d => { | |
| return d[4] === year; | |
| }); | |
| option.series[0].data = source; | |
| option.graphic.elements[0].style.text = year; | |
| chart.setOption(option); | |
| } | |
| var chart = testHelper.create(echarts, 'main1', { | |
| title: [ | |
| 'Bar Racing' | |
| ], | |
| option: option | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], | |
| function (echarts) { | |
| var option = { | |
| xAxis: { | |
| max: 'dataMax' | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: ['A', 'B', 'C', 'D'], | |
| inverse: true, | |
| axisLabel: { | |
| formatter: function (label, id) { | |
| return label + 0 + id; | |
| } | |
| }, | |
| animationDuration: 300, | |
| animationDurationUpdate: 300, | |
| max: 2 | |
| }, | |
| series: [{ | |
| realtimeSort: true, | |
| name: 'X', | |
| type: 'bar', | |
| data: [{ | |
| value: 120, | |
| itemStyle: { | |
| color: 'red' | |
| } | |
| }, { | |
| value: 200, | |
| itemStyle: { | |
| color: 'orange' | |
| } | |
| }, { | |
| value: 90, | |
| itemStyle: { | |
| color: 'yellow' | |
| } | |
| }, { | |
| value: 240, | |
| itemStyle: { | |
| color: 'green' | |
| } | |
| }], | |
| label: { | |
| show: true, | |
| position: 'right', | |
| formatter: '{c}元', | |
| valueAnimation: true | |
| } | |
| }], | |
| legend: { | |
| show: true | |
| }, | |
| animationDurationUpdate: 5000, | |
| animationEasing: 'linear', | |
| animationEasingUpdate: 'linear' | |
| }; | |
| setTimeout(() => { | |
| var data = option.series[0].data; | |
| data[1].value += 100; | |
| chart.setOption(option); | |
| }, 1000); | |
| setTimeout(() => { | |
| var data = option.series[0].data; | |
| data[3].value += 100; | |
| chart.setOption(option); | |
| }, 3400); | |
| const buttons = []; | |
| const texts = ['A++', 'B++', 'C++', 'D++']; | |
| for (var x = 0; x < 4; ++x) { | |
| (function (x) { | |
| buttons.push({ | |
| text: texts[x], | |
| onclick() { | |
| var data = option.series[0].data; | |
| data[x].value += Math.round(100 * Math.random()); | |
| chart.setOption(option); | |
| } | |
| }); | |
| })(x); | |
| } | |
| var chart = testHelper.create(echarts, 'main2', { | |
| title: [ | |
| 'Update Data Dynamically' | |
| ], | |
| option: option, | |
| buttons | |
| }); | |
| } | |
| ); | |
| </script> | |
| <script> | |
| require(['echarts'], | |
| function (echarts) { | |
| var option = { | |
| title: { | |
| text: 'When yAxis max is larger than yAxis data length, it should not get error' | |
| }, | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: ['A', 'B', 'C'], | |
| max: 5 | |
| }, | |
| series: [{ | |
| realtimeSort: true, | |
| type: 'bar', | |
| data: [10, 8, 2] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| title: [ | |
| 'When yAxis max is larger than yAxis data length, it should not get error' | |
| ], | |
| option: option | |
| }); | |
| } | |
| ); | |
| </script> | |
| <script> | |
| require(['echarts'], | |
| function (echarts) { | |
| var data = [0, 1, 10, 100, 1000]; | |
| var option = { | |
| xAxis: { | |
| type: 'log' | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: ['a', 'b', 'c', 'd', 'e'] | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| data: data, | |
| label: { | |
| show: true, | |
| position: 'right', | |
| valueAnimation: true | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main4', { | |
| title: [ | |
| 'click "all +10"', | |
| 'check the x extent should be correct', | |
| 'the 0 bar should be displayed with animation' | |
| ], | |
| option: option, | |
| buttons: [{ | |
| text: 'all +10', | |
| onclick: function () { | |
| for (var i = 0; i < data.length; i++) { | |
| data[i] += 10; | |
| } | |
| chart.setOption({ | |
| series: { | |
| data: data | |
| } | |
| }); | |
| } | |
| }] | |
| }); | |
| } | |
| ); | |
| </script> | |
| <script> | |
| require(['echarts'], | |
| function (echarts) { | |
| var data = [4000, 3000, 2000]; | |
| var option = { | |
| xAxis: { | |
| }, | |
| yAxis: { | |
| type: 'category', | |
| data: ['a', 'b', 'c'], | |
| max: 1, | |
| inverse: true, | |
| animationDuration: 300, | |
| animationDurationUpdate: 300 | |
| }, | |
| series: [{ | |
| realtimeSort: true, | |
| type: 'bar', | |
| data: data, | |
| label: { | |
| show: true, | |
| position: 'right', | |
| valueAnimation: true | |
| }, | |
| animationDuration: 0, | |
| animationDurationUpdate: 5000, | |
| animationEasing: 'linear', | |
| animationEasingUpdate: 'linear' | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main4', { | |
| title: [ | |
| ], | |
| option: option, | |
| buttons: [{ | |
| text: 'next', | |
| onclick: function () { | |
| data[0] += 300; | |
| data[1] += 2000; | |
| data[2] += 2800; | |
| chart.setOption({ | |
| series: { | |
| data: data | |
| } | |
| }); | |
| } | |
| }] | |
| }); | |
| } | |
| ); | |
| </script> | |
| </body> | |
| </html> | |