| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <link rel="stylesheet" href="lib/reset.css"> |
| <style> |
| #main { |
| position: relative; |
| min-width: 1080px; |
| } |
| .block { |
| text-align: center; |
| display: inline-block; |
| *display: inline; |
| *zoom: 1; |
| position: relative; |
| height: 400px; |
| margin: 20px; |
| } |
| .block .ec { |
| float: left; |
| width: 600px; |
| height: 100%; |
| border: 3px solid #777; |
| } |
| .block label { |
| margin-left: 500px; |
| display: block; |
| width: 400px; |
| height: 100%; |
| background: #777; |
| color: #fff; |
| font-size: 12px; |
| line-height: 18px; |
| border: 3px solid #777; |
| text-align: left; |
| overflow: auto; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="main"></div> |
| <script> |
| |
| |
| require([ |
| 'echarts' |
| // 'zrender/core/util', |
| // 'echarts/chart/scatter', |
| // 'echarts/component/grid', |
| // 'echarts/component/visualMap' |
| ], function (echarts) { |
| var zrUtil = echarts.util; |
| makeChart({ |
| show: true, |
| splitNumber: 7, |
| minOpen: true, |
| maxOpen: true, |
| backgroundColor: '#eee', |
| padding: [10, 30, 5, 40], |
| visualSelected: { |
| data: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| show: true, |
| splitNumber: 7, |
| minOpen: true, |
| maxOpen: true, |
| showLabel: true, |
| text: ['Number Result'], |
| backgroundColor: '#eee', |
| padding: [10, 30, 5, 40], |
| visualSelected: { |
| data: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| show: true, |
| pieces: [ |
| {min: 10, max: 15, color: 'green'}, |
| {min: 15, max: 25, visualValue: 'blue'}, |
| {min: 25, max: 35}, |
| {min: 35, max: 55}, |
| {min: 55} |
| ], |
| left: 200, |
| backgroundColor: '#eee', |
| visualSelected: { |
| data: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| splitNumber: 5, |
| right: 0, |
| dimension: 3, |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'symbol', |
| data: ['roundRect', 'rect', 'diamond', 'line', 'circle'] |
| } |
| }); |
| makeChart({ |
| splitNumber: 5, |
| right: 0, |
| dimension: 3, |
| text: ['Number Result'], |
| showLabel: true, |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'symbol', |
| data: ['roundRect', 'rect', 'diamond', 'line', 'circle'] |
| } |
| }); |
| makeChart({ |
| splitNumber: 6, |
| top: 0, |
| left: 0, |
| orient: 'horizontal', |
| dimension: 3, |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorSaturation' |
| } |
| }); |
| makeChart({ |
| splitNumber: 5, |
| top: 20, |
| right: 0, |
| orient: 'horizontal', |
| dimension: 3, |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorLightness' |
| } |
| }); |
| makeChart({ |
| splitNumber: 5, |
| top: 20, |
| right: 0, |
| text: ['Number \nRe', 'Number \nRe2'], |
| showLabel: true, |
| orient: 'horizontal', |
| dimension: 3, |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorLightness' |
| } |
| }); |
| makeChart({ |
| splitNumber: 6, |
| top: 40, |
| orient: 'horizontal', |
| align: 'right', |
| dimension: 3, |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorAlpha' |
| } |
| }); |
| |
| // ------------------------------------------- |
| |
| makeChart({ |
| show: true, |
| splitNumber: 7, |
| text: ['高1', '低'], |
| inverse: true, |
| backgroundColor: '#eee', |
| padding: [10, 30, 5, 40], |
| visualSelected: { |
| data: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| show: true, |
| pieces: [ |
| {min: 10, max: 15, color: 'green'}, |
| {min: 15, max: 25, visualValue: 'blue'}, |
| {min: 25, max: 35}, |
| {min: 35, max: 55}, |
| {min: 55} |
| ], |
| left: 200, |
| text: ['高', '低'], |
| backgroundColor: '#eee', |
| visualSelected: { |
| data: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| splitNumber: 5, |
| right: 0, |
| dimension: 3, |
| text: ['高', '低'], |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'symbol', |
| data: ['roundRect', 'rect', 'diamond', 'line', 'circle'] |
| } |
| }); |
| makeChart({ |
| splitNumber: 6, |
| top: 0, |
| left: 0, |
| orient: 'horizontal', |
| dimension: 3, |
| text: ['高', '低'], |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorSaturation' |
| } |
| }); |
| makeChart({ |
| splitNumber: 5, |
| top: 20, |
| right: 0, |
| orient: 'horizontal', |
| dimension: 3, |
| text: ['高', '低'], |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorLightness' |
| } |
| }); |
| makeChart({ |
| splitNumber: 6, |
| top: 40, |
| orient: 'horizontal', |
| dimension: 3, |
| text: ['高', '低'], |
| backgroundColor: '#eee', |
| visualSelected: { |
| type: 'colorAlpha' |
| } |
| }); |
| |
| // ------------------------------------------- |
| |
| |
| makeChart({ |
| show: true, |
| splitNumber: 0, |
| backgroundColor: '#eee', |
| padding: [10, 30, 5, 40], |
| calculable: true, |
| inRange: { |
| color: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| left: 200, |
| show: true, |
| pieces: [ |
| {min: 10, max: 15, color: 'green'}, |
| {min: 15, max: 25, visualValue: 'blue'}, |
| {min: 25, max: 35}, |
| {min: 35, max: 55}, |
| {min: 55} |
| ], |
| inverse: true, |
| calculable: true, |
| backgroundColor: '#eee', |
| inRange: { |
| color: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| right: 0, |
| splitNumber: 5, |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: { |
| color: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| left: 0, |
| top: 0, |
| orient: 'horizontal', |
| splitNumber: 6, |
| calculable: true, |
| inverse: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorSaturation' |
| }); |
| makeChart({ |
| right: 0, |
| top: 20, |
| orient: 'horizontal', |
| splitNumber: 5, |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorLightness' |
| }); |
| makeChart({ |
| top: 40, |
| splitNumber: 6, |
| orient: 'horizontal', |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorAlpha' |
| }); |
| makeChart({ |
| left: 'center', |
| top: 'bottom', |
| orient: 'horizontal', |
| splitNumber: 6, |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorAlpha' |
| }); |
| |
| |
| // ------------------------------------------- |
| |
| |
| makeChart({ |
| show: true, |
| splitNumber: 7, |
| text: ['高2', '低'], |
| backgroundColor: '#eee', |
| inverse: true, |
| padding: [10, 30, 5, 40], |
| calculable: true, |
| inRange: { |
| color: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| left: 200, |
| show: true, |
| pieces: [ |
| {min: 10, max: 15, color: 'green'}, |
| {min: 15, max: 25, visualValue: 'blue'}, |
| {min: 25, max: 35}, |
| {min: 35, max: 55}, |
| {min: 55} |
| ], |
| inverse: true, |
| text: ['高', '低'], |
| calculable: true, |
| backgroundColor: '#eee', |
| inRange: { |
| color: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| right: 0, |
| splitNumber: 5, |
| text: ['高', '低'], |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: { |
| color: ['red', 'pink'] |
| } |
| }); |
| makeChart({ |
| left: 0, |
| top: 0, |
| orient: 'horizontal', |
| text: ['高', '低'], |
| splitNumber: 6, |
| calculable: true, |
| inverse: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorSaturation' |
| }); |
| makeChart({ |
| right: 0, |
| top: 20, |
| orient: 'horizontal', |
| text: ['高', '低'], |
| splitNumber: 5, |
| align: 'bottom', |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorLightness' |
| }); |
| makeChart({ |
| top: 40, |
| splitNumber: 6, |
| orient: 'horizontal', |
| text: ['高', '低'], |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorAlpha' |
| }); |
| makeChart({ |
| left: 'center', |
| bottom: 0, |
| orient: 'horizontal', |
| splitNumber: 6, |
| text: ['高', '低'], |
| calculable: true, |
| dimension: 3, |
| backgroundColor: '#eee', |
| inRange: 'colorAlpha' |
| }); |
| |
| |
| |
| |
| |
| |
| function makeChart(opt) { |
| var label = JSON.stringify(opt, null, 4); |
| opt = {visualMap: opt || {}}; |
| var containerEl = document.getElementById('main'); |
| var el = document.createElement('div'); |
| el.className = 'block'; |
| el.innerHTML = '<div class="ec"></div><label><pre>' + encodeHTML(label) + '</pre></label>'; |
| containerEl.appendChild(el); |
| |
| var chart = echarts.init(el.firstChild, null, { }); |
| chart.setOption(zrUtil.merge(opt, getOption())); |
| } |
| |
| function encodeHTML(source) { |
| return source == null |
| ? '' |
| : String(source) |
| .replace(/&/g, '&') |
| .replace(/</g, '<') |
| .replace(/>/g, '>') |
| .replace(/"/g, '"') |
| .replace(/'/g, '''); |
| }; |
| |
| function getOption() { |
| return { |
| grid: {top: 'center', left: 'center', width: 50, height: 50}, |
| xAxis: {type: 'value', splitLine: {show: false}}, |
| yAxis: {type: 'value', splitLine: {show: false}}, |
| series: [ |
| { |
| name: 'scatter', |
| type: 'scatter', |
| itemStyle: { |
| normal: { |
| opacity: 0.8, |
| shadowBlur: 10, |
| shadowOffsetX: 0, |
| shadowOffsetY: 0, |
| shadowColor: 'rgba(0, 0, 0, 0.5)' |
| } |
| }, |
| symbolSize: 20, |
| data: [[50, 50, 50, 50, 50]] |
| } |
| ] |
| }; |
| } |
| |
| |
| |
| }); |
| |
| |
| </script> |
| </body> |
| </html> |
