| <!-- | |
| 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"> | |
| <script src="lib/simpleRequire.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'], 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, | |
| yFilterMode: '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://asset/echarts-logo.png', | |
| filterMode: args.xFilterMode, | |
| xAxisIndex: [0], | |
| start: args.xStart, | |
| end: args.xEnd | |
| }, | |
| { | |
| name: 'ySlider', | |
| show: true, | |
| handleIcon: 'image://asset/echarts-logo.png', | |
| filterMode: args.yFilterMode, | |
| 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> |