| <!-- | |
| 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/esl.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" /> | |
| </head> | |
| <body> | |
| <style> | |
| html, body, #main { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| #main { | |
| background: #fff; | |
| } | |
| </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> | |
| <div id="main7"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var data3 = []; | |
| var data4 = []; | |
| for (var i = 0; i < 100; i++) { | |
| xAxisData.push('类目' + i); | |
| data1.push((Math.random() * 5).toFixed(2)); | |
| data2.push(Math.random().toFixed(2)); | |
| data3.push((Math.random() + 0.5).toFixed(2)); | |
| data4.push((Math.random() + 0.3).toFixed(2)); | |
| } | |
| var data = [["4.70","4.69","2.48","0.77","3.08","4.57","2.68","3.35","0.37","1.86","2.68","0.64","1.82","1.88","0.31","0.45","4.48","3.08","1.58","2.98","1.87","0.96","3.43","2.58","0.41","2.69","0.59","3.47","4.33","1.75","0.51","1.01","1.60","3.62","2.29","2.40","1.52","2.30","0.18","3.99","0.26","2.92","2.94","0.54","2.98","3.71","2.24","0.32","1.98","2.56","1.81","4.67","2.49","1.73","1.79","2.79","3.39","1.83","3.24","3.76","1.23","1.69","3.55","2.66","1.83","3.69","2.70","0.75","0.71","1.44","3.23","1.49","1.50","3.61","4.41","1.26","2.93","2.84","4.11","0.80","2.67","2.59","2.71","4.85","1.28","1.21","4.32","4.04","1.15","4.38","4.41","4.94","4.13","0.86","1.97","3.58","3.02","1.29","1.47","3.75"],["0.78","0.90","0.54","0.75","0.68","0.68","0.84","0.87","0.78","0.79","0.77","0.34","0.81","0.80","0.28","0.87","0.98","0.92","0.66","0.87","0.88","0.56","0.34","0.67","0.60","0.00","0.22","0.87","0.81","0.69","0.41","0.02","0.18","0.55","0.48","0.90","0.62","0.17","0.37","0.35","0.31","0.78","0.34","0.56","0.22","0.87","0.55","0.94","0.58","0.66","0.33","0.73","0.78","0.44","0.79","0.12","0.81","0.77","0.33","0.30","0.86","0.87","0.09","0.91","0.90","0.34","0.76","0.93","0.55","0.41","0.63","0.96","0.80","0.41","0.53","0.53","0.66","0.24","0.24","0.99","0.92","0.85","0.44","0.92","0.28","0.61","0.20","0.74","0.52","0.91","0.42","0.08","0.00","0.57","0.81","0.39","0.41","0.72","0.02","0.20"],["1.17","0.65","0.98","1.08","1.02","1.41","1.01","1.17","0.63","0.94","0.78","1.43","0.67","1.09","1.29","0.60","0.50","1.38","0.76","0.94","0.79","1.44","0.55","1.48","1.13","0.63","1.07","0.57","1.43","0.81","0.87","0.70","1.04","1.43","1.00","0.50","0.54","0.57","0.97","0.58","1.19","0.73","0.76","0.75","1.39","0.93","0.60","1.28","1.14","1.18","0.60","0.59","1.46","0.64","1.44","0.59","1.49","0.84","0.71","1.44","1.11","1.18","1.40","0.64","1.15","1.07","1.35","0.86","1.13","1.41","1.03","0.57","1.44","0.93","1.47","1.16","1.40","1.14","0.97","0.78","1.49","0.59","0.99","1.35","0.88","1.02","1.16","1.07","0.81","0.87","1.34","0.98","1.17","1.46","0.71","1.13","0.80","1.24","0.76","0.68"],["1.04","0.54","0.55","1.05","1.20","1.13","0.53","0.63","0.82","0.52","0.86","0.33","0.64","1.14","0.47","0.72","0.97","1.18","1.02","0.53","1.14","1.24","1.13","0.60","0.47","0.94","0.64","0.43","0.71","0.33","0.46","0.82","0.80","0.97","0.43","1.29","0.65","0.92","0.63","0.58","0.31","1.09","0.35","0.43","1.19","0.47","0.59","0.52","0.79","0.69","0.54","0.39","0.33","1.26","0.40","0.76","0.80","0.96","0.82","1.26","0.70","0.50","0.67","1.27","1.24","0.49","0.94","0.97","0.90","1.03","1.28","0.46","0.57","1.23","0.40","0.71","1.08","0.51","1.03","0.38","0.81","0.44","1.02","0.79","1.08","1.01","0.66","0.80","0.65","0.97","0.56","0.33","0.61","0.92","0.40","0.77","1.05","1.21","0.34","0.84"]]; | |
| var option = { | |
| legend: { | |
| data: ['bar', 'bar2', 'bar3', 'bar4'], | |
| align: 'left' | |
| }, | |
| toolbox: { | |
| // y: 'bottom', | |
| feature: { | |
| magicType: { | |
| type: ['line', 'bar', 'stack', 'tiled'] | |
| }, | |
| dataZoom: { | |
| yAxisIndex: false | |
| }, | |
| dataView: {}, | |
| saveAsImage: { | |
| pixelRatio: 2 | |
| } | |
| } | |
| }, | |
| tooltip: {}, | |
| dataZoom: [{ | |
| startValue: 48, | |
| endValue: 99, | |
| type: 'inside' | |
| }, { | |
| startValue: 48, | |
| endValue: 99, | |
| type: 'slider' | |
| }], | |
| xAxis: { | |
| data: xAxisData, | |
| silent: false, | |
| splitLine: { | |
| show: false | |
| }, | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| splitArea: { | |
| show: false | |
| } | |
| }, | |
| series: [{ | |
| name: 'bar', | |
| type: 'bar', | |
| stack: 'one', | |
| data: data[0], | |
| showBackground: true | |
| }, { | |
| show: false, | |
| name: 'bar2', | |
| type: 'bar', | |
| stack: 'one', | |
| data: data[1] | |
| }, { | |
| name: 'bar3', | |
| type: 'bar', | |
| stack: 'two', | |
| data: data[2] | |
| }, { | |
| name: 'bar4', | |
| type: 'bar', | |
| stack: 'two', | |
| data: data[3], | |
| silent: true | |
| }], | |
| animationDelay: function (idx) { | |
| return idx * 5; | |
| }, | |
| animationDelayUpdate: function (idx) { | |
| return idx * 5; | |
| } | |
| } | |
| var chart = testHelper.create(echarts, 'main0', { | |
| option: option, | |
| }); | |
| chart.on('click', function (params) { | |
| console.log(params); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts'/*, 'map/js/china' */ | |
| ], function (echarts) { | |
| var option = { | |
| xAxis: [{ | |
| type: 'category' | |
| }, { | |
| gridIndex: 1 | |
| }], | |
| yAxis: [{ | |
| }, { | |
| type: 'category', | |
| gridIndex: 1 | |
| }], | |
| grid: [{ | |
| containLabel: true, | |
| left: 10, | |
| right: '55%' | |
| }, { | |
| containLabel: true, | |
| left: '55%', | |
| right: 10 | |
| }], | |
| tooltip: {}, | |
| series: [{ | |
| type: 'bar', | |
| large: true, | |
| largeThreshold: 2, | |
| data: [ | |
| ['mm', 33], | |
| ['yy', -44], | |
| ['tt', 55], | |
| ['rr', 66] | |
| ], | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(0, 0, 255, 0.2)' | |
| } | |
| }, { | |
| type: 'bar', | |
| large: true, | |
| largeThreshold: 2, | |
| xAxisIndex: 1, | |
| yAxisIndex: 1, | |
| encode: { | |
| x: 1, | |
| y: 0 | |
| }, | |
| data: [ | |
| ['mm', 33], | |
| ['yy', -44], | |
| ['tt', 55], | |
| ['rr', 66] | |
| ], | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(0, 0, 255, 0.2)' | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| option: option, | |
| title: [ | |
| 'Background with large render mode.' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts'/*, 'map/js/china' */ | |
| ], function (echarts) { | |
| var option = { | |
| xAxis: [{ | |
| type: 'category' | |
| }, { | |
| gridIndex: 1 | |
| }], | |
| yAxis: [{ | |
| }, { | |
| type: 'category', | |
| gridIndex: 1 | |
| }], | |
| grid: [{ | |
| containLabel: true, | |
| left: 10, | |
| right: '55%' | |
| }, { | |
| containLabel: true, | |
| left: '55%', | |
| right: 10 | |
| }], | |
| tooltip: {}, | |
| series: [{ | |
| type: 'bar', | |
| data: [ | |
| ['mm', 33], | |
| ['yy', -44], | |
| ['tt', 55], | |
| ['rr', 66] | |
| ], | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(0, 0, 255, 0.2)' | |
| } | |
| }, { | |
| type: 'bar', | |
| xAxisIndex: 1, | |
| yAxisIndex: 1, | |
| encode: { | |
| x: 1, | |
| y: 0 | |
| }, | |
| data: [ | |
| ['mm', 33], | |
| ['yy', -44], | |
| ['tt', 55], | |
| ['rr', 66] | |
| ], | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'rgba(0, 0, 255, 0.2)' | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2', { | |
| option: option, | |
| title: [ | |
| 'Background with normal render mode.' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| // 'echarts/chart/bar', | |
| // 'echarts/component/polar', | |
| // 'zrender/vml/vml' | |
| ], function (echarts) { | |
| var chart = echarts.init(document.getElementById('main3')); | |
| var option = { | |
| angleAxis: { | |
| type: 'category', | |
| data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], | |
| z: 10 | |
| }, | |
| tooltip: { | |
| }, | |
| radiusAxis: { | |
| }, | |
| polar: { | |
| center: ['50%', '50%'] | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| data: [1, 2, '-', 3, 0, 5, 7], | |
| coordinateSystem: 'polar', | |
| barMaxWidth: '50%', | |
| barMinHeight: 10, | |
| showBackground: true | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| option: option, | |
| title: [ | |
| 'Bar background on radial polar' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| // 'echarts/chart/bar', | |
| // 'echarts/component/polar', | |
| // 'zrender/vml/vml' | |
| ], function (echarts) { | |
| var chart = echarts.init(document.getElementById('main4')); | |
| var option = { | |
| angleAxis: { | |
| triggerEvent: true | |
| }, | |
| radiusAxis: { | |
| type: 'category', | |
| data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], | |
| z: 10, | |
| triggerEvent: true | |
| }, | |
| polar: { | |
| }, | |
| tooltip: {}, | |
| series: [{ | |
| type: 'bar', | |
| data: [1, '-', 4, 3, '-', 5, 7], | |
| coordinateSystem: 'polar', | |
| itemStyle: { | |
| normal: { | |
| color: '#00f' | |
| } | |
| }, | |
| barWidth: '50%', | |
| showBackground: true | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main4', { | |
| option: option, | |
| title: [ | |
| 'Bar background on tangential polar' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts', | |
| // 'echarts/chart/bar', | |
| // 'echarts/component/legend', | |
| // 'echarts/component/polar', | |
| // 'zrender/vml/vml' | |
| ], function (echarts) { | |
| var chart = echarts.init(document.getElementById('main5')); | |
| var option = { | |
| angleAxis: { | |
| type: 'category', | |
| data: ['周一', '周二', '周三', '周四'], | |
| z: 10 | |
| }, | |
| radiusAxis: { | |
| }, | |
| polar: { | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| data: [1, 2, 3, 4], | |
| coordinateSystem: 'polar', | |
| name: 'A', | |
| showBackground: true | |
| }, { | |
| type: 'bar', | |
| data: [2, 4, 6, 8], | |
| coordinateSystem: 'polar', | |
| name: 'B' | |
| }, { | |
| type: 'bar', | |
| data: [1, 2, 3, 4], | |
| coordinateSystem: 'polar', | |
| name: 'C' | |
| }], | |
| legend: { | |
| show: true, | |
| data: ['A', 'B', 'C'] | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main5', { | |
| option: option, | |
| title: [ | |
| 'Multiple bar series with background on radial polar' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| // 'echarts/chart/bar', | |
| // 'echarts/component/legend', | |
| // 'echarts/component/polar', | |
| // 'echarts/component/grid', | |
| // 'zrender/vml/vml' | |
| ], function (echarts) { | |
| var chart = echarts.init(document.getElementById('main6')); | |
| var option = { | |
| angleAxis: { | |
| // clockwise: false | |
| }, | |
| radiusAxis: { | |
| type: 'category', | |
| data: ['周一', '周二', '周三', '周四'], | |
| z: 10 | |
| }, | |
| polar: { | |
| }, | |
| series: [{ | |
| type: 'bar', | |
| data: [1, 2, 3, 4], | |
| coordinateSystem: 'polar', | |
| name: 'A', | |
| showBackground: true | |
| }, { | |
| type: 'bar', | |
| data: [2, 4, 6, 8], | |
| coordinateSystem: 'polar', | |
| name: 'B' | |
| }, { | |
| type: 'bar', | |
| data: [1, 2, 3, 4], | |
| coordinateSystem: 'polar', | |
| name: 'C' | |
| }], | |
| legend: { | |
| show: true, | |
| data: ['A', 'B', 'C'] | |
| } | |
| }; | |
| var chart = testHelper.create(echarts, 'main6', { | |
| option: option, | |
| title: [ | |
| 'polar bars' | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| // 'echarts/chart/bar', | |
| // 'echarts/component/legend', | |
| // 'echarts/component/polar', | |
| // 'echarts/component/grid', | |
| // 'zrender/vml/vml' | |
| ], function (echarts) { | |
| var chart = echarts.init(document.getElementById('main7')); | |
| var option = { | |
| xAxis: { | |
| type: 'category', | |
| data: ['Mon', '1', '3', '4', '5', '6', '7', '8'] | |
| }, | |
| yAxis: { | |
| type: 'value' | |
| }, | |
| series: [{ | |
| data: [110, 120, 150, 250, 350, 400, 500, 600], | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderWidth: 20, | |
| barBorderColor: 'rgba(50,50,50,0.3)' | |
| }, | |
| showBackground: true, | |
| backgroundStyle: { | |
| color: 'green', | |
| barBorderRadius: [20, 20, 20, 20], | |
| } | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main7', { | |
| option: option, | |
| title: [ | |
| 'background borderRadius' | |
| ], | |
| buttons: [{ | |
| text: 'update borderRadius to [30, 40, 0, 60]', | |
| onclick: function () { | |
| chart.setOption({ | |
| series: { | |
| backgroundStyle: { | |
| borderRadius: [30, 40, 0, 60] | |
| } | |
| } | |
| }); | |
| } | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |