| |
| <!-- |
| 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/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> |
