| <!-- | |
| 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/facePrint.js"></script> | |
| <link rel="stylesheet" href="lib/reset.css"> | |
| </head> | |
| <body> | |
| <style> | |
| .chart { | |
| height: 500px; | |
| } | |
| h1 { | |
| font-size: 20px; | |
| text-align: center; | |
| background: #bbb; | |
| padding: 10px 0; | |
| } | |
| </style> | |
| <h1>visual on hue</h1> | |
| <div class="chart" id="mainH"></div> | |
| <h1>visual on color opacity</h1> | |
| <div class="chart" id="mainZ"></div> | |
| <h1>pieces | auto split | check: min > dataMin; max < dataMax; </h1> | |
| <div class="chart" id="mainX"></div> | |
| <h1>pieces | auto split | check: minOpen/maxOpen</h1> | |
| <div class="chart" id="mainX2"></div> | |
| <h1>pieces | check: auto-sort</h1> | |
| <div class="chart" id="main0"></div> | |
| <h1>continuous | check: area that greater than dataMax</h1> | |
| <div class="chart" id="main1"></div> | |
| <h1>continuous | log axis | inverse axis | gradient on xAxis</h1> | |
| <div class="chart" id="main2"></div> | |
| <h1>continuous | positive and negative | check: min > dataMin; max < dataMax; </h1> | |
| <div class="chart" id="main4"></div> | |
| <h1>category axis</h1> | |
| <div class="chart" id="mainX0"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('mainH'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var data0 = []; | |
| var MAX_DIM1 = 100; | |
| var itemStyle = { | |
| normal: { | |
| opacity: 0.8, | |
| shadowBlur: 10, | |
| shadowOffsetX: 0, | |
| shadowOffsetY: 0, | |
| shadowColor: 'rgba(0, 0, 0, 0.3)' | |
| } | |
| }; | |
| var last = 60; | |
| var lastDelta = 20; | |
| for (var i = 0; i < MAX_DIM1; i++) { | |
| lastDelta += (Math.random() - 0.5) * 15; | |
| data0.push([ | |
| i, | |
| last += lastDelta | |
| ]); | |
| } | |
| chart.setOption({ | |
| grid: { | |
| top: 100, | |
| bottom: 100 | |
| }, | |
| xAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| visualMap: [ | |
| { | |
| show: true, | |
| left: 'center', | |
| bottom: 20, | |
| orient: 'horizontal', | |
| itemWidth: 20, | |
| itemHeight: 200, | |
| min: 0, | |
| max: MAX_DIM1, | |
| calculable: true, | |
| range: [5, 95], | |
| dimension: 0, | |
| inRange: { | |
| colorHue: [0, 300], | |
| colorLightness: 0.35, | |
| colorSaturation: 1 | |
| }, | |
| outOfRange: { | |
| color: '#eee' | |
| } | |
| } | |
| ], | |
| series: [ | |
| { | |
| name: 'hue', | |
| type: 'line', | |
| barMaxWidth: 10, | |
| itemStyle: itemStyle, | |
| areaStyle: {normal: {}}, | |
| data: data0 | |
| } | |
| ] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('mainZ'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var data2 = []; | |
| var min = Infinity; | |
| var max = -Infinity; | |
| var base1 = Math.round(Math.random() * 30); | |
| var base2 = base1; | |
| for (var i = 0; i < 10; i++) { | |
| xAxisData.push('类目' + i); | |
| base1 += Math.round(Math.random() * 60); | |
| if (i > 500 && i < 550) { | |
| data1.push(180); | |
| } | |
| else if (i > 700 && i < 740) { | |
| data1.push(-90); | |
| } | |
| else { | |
| data1.push(base1); | |
| } | |
| base2 += Math.round(Math.random() * 30 - 5); | |
| data2.push(base2); | |
| min = Math.min(data1[data1.length - 1], data2[data2.length - 1], min); | |
| max = Math.max(data1[data1.length - 1], data2[data2.length - 1], max); | |
| } | |
| chart.setOption({ | |
| color: ['#01003D', '#004202'], | |
| legend: { | |
| data: ['line1', 'line2'] | |
| }, | |
| visualMap: { | |
| type: 'piecewise', | |
| top: 'center', | |
| inRange: { | |
| opacity: [0.1, 1] | |
| }, | |
| outOfRange: { | |
| color: '#fff' | |
| }, | |
| min: min, | |
| max: max, | |
| minOpen: true, | |
| maxOpen: true | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line1', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'none', | |
| lineStyle: { normal: {width: 8}}, | |
| data: data1 | |
| }, { | |
| name: 'line2', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'none', | |
| lineStyle: { normal: {width: 8}}, | |
| data: data2 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('mainX0'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = Math.round(Math.random() * 30); | |
| for (var i = 0; i < 10; i++) { | |
| xAxisData.push('类目' + i); | |
| base += Math.round(Math.random() * 10 - 5); | |
| if (i > 500 && i < 550) { | |
| data1.push(180); | |
| } | |
| else if (i > 700 && i < 740) { | |
| data1.push(-90); | |
| } | |
| else { | |
| data1.push(base); | |
| } | |
| } | |
| chart.setOption({ | |
| visualMap: { | |
| type: 'piecewise', | |
| top: 'center', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| dimension: 0, | |
| min: 0, | |
| max: 10 | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('mainX'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = Math.round(Math.random() * 30); | |
| for (var i = 0; i < 1000; i++) { | |
| xAxisData.push('类目' + i); | |
| base += Math.round(Math.random() * 10 - 5); | |
| if (i > 500 && i < 550) { | |
| data1.push(180); | |
| } | |
| else if (i > 700 && i < 740) { | |
| data1.push(-90); | |
| } | |
| else { | |
| data1.push(base); | |
| } | |
| } | |
| chart.setOption({ | |
| visualMap: { | |
| type: 'piecewise', | |
| top: 'center', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| min: -70, | |
| max: 150 | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('mainX2'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = Math.round(Math.random() * 30); | |
| for (var i = 0; i < 1000; i++) { | |
| xAxisData.push('类目' + i); | |
| base += Math.round(Math.random() * 10 - 5); | |
| if (i > 500 && i < 550) { | |
| data1.push(180); | |
| } | |
| else if (i > 700 && i < 740) { | |
| data1.push(-90); | |
| } | |
| else { | |
| data1.push(base); | |
| } | |
| } | |
| chart.setOption({ | |
| visualMap: { | |
| type: 'piecewise', | |
| top: 'center', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| min: -70, | |
| max: 150, | |
| minOpen: true, | |
| maxOpen: true | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('main0'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = Math.round(Math.random() * 100); | |
| for (var i = 0; i < 1000; i++) { | |
| xAxisData.push('类目' + i); | |
| base += Math.round(Math.random() * 10 - 5); | |
| if (i > 500 && i < 550) { | |
| data1.push(130); | |
| } | |
| else if (i > 700 && i < 740) { | |
| data1.push(-20); | |
| } | |
| else { | |
| data1.push(base); | |
| } | |
| } | |
| chart.setOption({ | |
| visualMap: { | |
| type: 'piecewise', | |
| top: 'center', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| pieces: [{ | |
| lte: 120, | |
| gt: 100, | |
| color: 'red' | |
| }, { | |
| lt: 80, | |
| gt: 70 | |
| }, { | |
| lt: 90, | |
| gt: 50 | |
| }, { | |
| lte: 40 | |
| }] | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('main1'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = -Math.round(Math.random() * 500 + 500); | |
| var min = Infinity; | |
| var max = -Infinity; | |
| for (var i = 0; i < 1000; i++) { | |
| xAxisData.push('类目' + i); | |
| base -= Math.round(Math.random() * 2); | |
| data1.push(base); | |
| base > max && (max = base); | |
| base < min && (min = base); | |
| } | |
| max += 500; | |
| min -= 500; | |
| chart.setOption({ | |
| visualMap: { | |
| top: 'center', | |
| calculable: true, | |
| type: 'continuous', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| range: [min + 100, max - 100], | |
| min: min, | |
| max: max | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('main2'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = Math.round(Math.random() * 500 + 500); | |
| var min = Infinity; | |
| var max = -Infinity; | |
| for (var i = 0; i < 1000; i++) { | |
| xAxisData.push('类目' + i); | |
| base += Math.round(Math.random() * 500); | |
| data1.push(base); | |
| base > max && (max = base); | |
| base < min && (min = base); | |
| } | |
| max += 100; | |
| min -= 100; | |
| chart.setOption({ | |
| visualMap: { | |
| orient: 'horizontal', | |
| left: 'center', | |
| top: 0, | |
| inverse: true, | |
| calculable: true, | |
| type: 'continuous', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| range: [min + 80, max - 80], | |
| dimension: 0, | |
| min: min, | |
| max: max | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| yAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| xAxis: { | |
| type: 'log', | |
| inverse: true | |
| }, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var main = document.getElementById('main4'); | |
| if (!main) { | |
| return; | |
| } | |
| var chart = echarts.init(main); | |
| var xAxisData = []; | |
| var data1 = []; | |
| var base = Math.round(Math.random() * 100); | |
| var min = Infinity; | |
| var max = -Infinity; | |
| for (var i = 0; i < 1000; i++) { | |
| xAxisData.push('类目' + i); | |
| base += Math.round(Math.random() * 240 - 120); | |
| data1.push(base); | |
| base > max && (max = base); | |
| base < min && (min = base); | |
| } | |
| var span = max - min; | |
| max -= span / 6; | |
| min += span / 6; | |
| chart.setOption({ | |
| visualMap: { | |
| top: 'center', | |
| calculable: true, | |
| type: 'continuous', | |
| inRange: { | |
| color: ['red', 'green', 'black'] | |
| }, | |
| outOfRange: { | |
| color: '#aaa' | |
| }, | |
| min: min, | |
| max: max | |
| }, | |
| dataZoom: { | |
| orient: 'vertical' | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'line' | |
| } | |
| }, | |
| xAxis: { | |
| data: xAxisData, | |
| boundaryGap: false | |
| }, | |
| yAxis: {}, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| stack: 'all', | |
| symbol: 'circle', | |
| areaStyle: { normal: {} }, | |
| symbolSize: 10, | |
| data: data1 | |
| }] | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |