| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| </head> |
| <body> |
| <style> |
| #main { |
| position: relative; |
| text-align: center; |
| } |
| .title { |
| display: block; |
| cursor: pointer; |
| text-decoration: none; |
| clear: both; |
| text-align: center; |
| margin: 0; |
| background: #eef; |
| line-height: 22px; |
| } |
| .block { |
| display: inline-block; |
| *display: inline; |
| *zoom: 1; |
| vertical-align: top; |
| margin: 30px 0 30px 50px; |
| } |
| .block .ec { |
| width: 800px; |
| height: 240px; |
| } |
| .block .info { |
| display: block; |
| text-align: left; |
| background: #eee; |
| border-radius: 3px; |
| font-size: 12px; |
| line-height: 18px; |
| padding: 0 5px; |
| } |
| .block .info td { |
| font-size: 12px; |
| border: 1px solid #bbb; |
| padding: 1px 3px; |
| } |
| strong { |
| color: red; |
| font-weight: bold; |
| font-size: 18px; |
| padding: 0 3px; |
| } |
| </style> |
| <div id="main"></div> |
| |
| |
| |
| |
| <script> |
| |
| var echarts; |
| var zrUtil; |
| var charts = []; |
| var els = []; |
| |
| require([ |
| 'echarts' |
| // 'zrender/core/util', |
| // 'echarts/chart/line', |
| // 'echarts/chart/scatter', |
| // 'echarts/component/legend', |
| // 'echarts/component/grid', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/toolbox', |
| // 'echarts/component/dataZoom' |
| ], function (ec) { |
| echarts = ec; |
| zrUtil = echarts.util; |
| |
| |
| renderTitle('Order sensitive in processing: no min/max on y (<strong>Try zooming y slider to check if normal</strong>)'); |
| makeChart(getOption( |
| makeSpecialTrendData(), |
| { |
| xAxisType: 'value', |
| xStart: 15, |
| xEnd: 80, |
| yScale: true, |
| symbolSize: 5 |
| } |
| ), 500); |
| |
| |
| renderTitle('Order sensitive in processing: min/max set on y (<strong>Try zooming y slider to check if normal</strong>)'); |
| makeChart(getOption( |
| makeSpecialTrendData(), |
| { |
| xAxisType: 'value', |
| xStart: 15, |
| xEnd: 80, |
| yScale: true, |
| symbolSize: 5, |
| yMin: 500, |
| yMax: 3000 |
| } |
| ), 500); |
| |
| |
| renderTitle('Order sensitive in processing: only max set on y and scale (<strong>Try zooming y slider to check if normal</strong>)'); |
| makeChart(getOption( |
| makeSpecialTrendData(), |
| { |
| xAxisType: 'value', |
| xStart: 15, |
| xEnd: 80, |
| yScale: true, |
| symbolSize: 5, |
| yMax: 3000 |
| } |
| ), 500); |
| |
| |
| renderTitle('Order sensitive in processing: only max set on y and no scale (<strong>Try zooming y slider to check if normal</strong>)'); |
| makeChart(getOption( |
| makeSpecialTrendData(), |
| { |
| xAxisType: 'value', |
| xStart: 15, |
| xEnd: 80, |
| yScale: false, |
| symbolSize: 5, |
| yMax: 3000 |
| } |
| ), 500); |
| }); |
| |
| |
| |
| function makeSpecialTrendData() { |
| var data = {data1: []}; |
| var base = -100; |
| for (var i = 0; i < 50; i++) { |
| if (i < 10) { |
| data.data1.push([i * 10, base += 197 + random(3)]); |
| } |
| else if (i < 20) { |
| data.data1.push([i * 10, base -= 17 + random(3)]); |
| } |
| else if (i < 30) { |
| data.data1.push([i * 10, base += 3 + random(3)]); |
| } |
| else if (i < 40) { |
| data.data1.push([i * 10, base -= 5 + random(3)]); |
| } |
| else { |
| data.data1.push([i * 10, base += 157 + random(3)]); |
| } |
| } |
| return data; |
| } |
| |
| |
| function renderTitle(label) { |
| var containerEl = document.getElementById('main'); |
| var el = document.createElement('a'); |
| el.className = 'title'; |
| var html = label; // label is html |
| el.innerHTML = html; |
| el.href = '#' + html.replace(/\s/g, '_'); |
| el.name = html.replace(/\s/g, '_'); |
| containerEl.appendChild(el); |
| } |
| |
| function makeChart(opt, height) { |
| var heightStyle = height ? ' style="height:' + height + 'px;" ' : ''; |
| |
| var containerEl = document.getElementById('main'); |
| var el = document.createElement('div'); |
| el.className = 'block'; |
| el.innerHTML = '<div ' + heightStyle + ' class="ec"></div><div class="info"></div>'; |
| containerEl.appendChild(el); |
| |
| var chart = echarts.init(el.firstChild, null, { }); |
| chart.setOption(opt); |
| |
| charts.push(chart); |
| els.push(el); |
| |
| chart.on('dataZoom', zrUtil.curry(renderProp, chart, el, false)); |
| renderProp(chart, el, true); |
| } |
| |
| function renderProp(chart, el, isInit) { |
| var resultOpt = chart.getOption(); |
| var dataZoomOpt = zrUtil.map(resultOpt.dataZoom, function (rawOpt) { |
| return '' |
| + '<tr>' |
| + '<td>name:</td><td>' + encodeHTML(rawOpt.name) + '</td>' |
| + '<td>start:</td><td>' + encodeHTML(rawOpt.start) + '</td>' |
| + '<td>end:</td><td>' + encodeHTML(rawOpt.end) + '</td>' |
| + '<td>startValue:</td><td>' + encodeHTML(rawOpt.startValue) + '</td>' |
| + '<td>endValue:</td><td>' + encodeHTML(rawOpt.endValue) + '</td>' |
| + '</tr>'; |
| }); |
| |
| el.lastChild.innerHTML = '' |
| + (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>' |
| + '<table><tbody>' + dataZoomOpt.join('') + '</tbody></table>'; |
| } |
| |
| function encodeHTML(source) { |
| return source == null |
| ? '' |
| : String(source) |
| .replace(/&/g, '&') |
| .replace(/</g, '<') |
| .replace(/>/g, '>') |
| .replace(/"/g, '"') |
| .replace(/'/g, '''); |
| } |
| |
| function random(max) { |
| return +(Math.random() * max).toFixed(3); |
| }; |
| |
| function getOption(data, args) { |
| args = zrUtil.defaults( |
| args || {}, |
| { |
| symbol: null, |
| xStart: 1, |
| xEnd: 5, |
| yStart: 0, |
| yEnd: 100, |
| yFitlerMode: 'empty', |
| symbolSize: 10 |
| } |
| ); |
| |
| var option = { |
| animation: false, |
| legend: { |
| data: ['n1', 'n2'] |
| }, |
| toolbox: { |
| feature: { |
| dataView: {}, |
| dataZoom: {show: true}, |
| restore: {show: true}, |
| saveAsImage: {} |
| } |
| }, |
| tooltip: { |
| trigger: 'axis' |
| }, |
| xAxis: { |
| type: args.xAxisType, |
| splitLine: { |
| show: true |
| }, |
| data: args.xAxisData |
| }, |
| yAxis: { |
| scale: args.yScale, |
| type: 'value', |
| min: args.yMin, |
| max: args.yMax, |
| splitLine: { |
| show: true |
| } |
| }, |
| dataZoom: [ |
| { |
| id: 'xSlider', |
| name: 'xSlider', |
| show: true, |
| handleIcon: 'image://http://echarts.baidu.com/images/favicon.png', |
| filterMode: args.xFilterMode, |
| xAxisIndex: [0], |
| start: args.xStart, |
| end: args.xEnd |
| }, |
| { |
| name: 'ySlider', |
| show: true, |
| handleIcon: 'image://http://echarts.baidu.com/images/favicon.png', |
| filterMode: args.yFitlerMode, |
| yAxisIndex: [0], |
| start: args.yStart, |
| end: args.yEnd |
| }, |
| { |
| name: 'xInside', |
| type: 'inside', |
| filterMode: args.xFilterMode, |
| xAxisIndex: [0], |
| start: args.xStart, |
| end: args.xEnd |
| }, |
| { |
| name: 'yInside', |
| type: 'inside', |
| filterMode: args.yFilterMode, |
| yAxisIndex: [0], |
| start: args.yStart, |
| end: args.yEnd |
| } |
| ], |
| series: [ |
| { |
| name: 'n1', |
| type: 'line', |
| symbolSize: args.symbolSize, |
| symbol: args.symbol, |
| data: data.data1 |
| }, |
| { |
| name: 'n2', |
| type: 'line', |
| symbol: args.symbol, |
| symbolSize: args.symbolSize, |
| data: data.data2 |
| } |
| ] |
| }; |
| |
| if (!data.data2) { |
| option.series.splice(1, 1); |
| } |
| |
| return option; |
| } |
| |
| |
| </script> |
| |
| </body> |
| </html> |
