| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="esl.js"></script> |
| <script src="config.js"></script> |
| </head> |
| <body> |
| <style> |
| #main { |
| position: relative; |
| text-align: center; |
| margin-right: 200px; |
| } |
| .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; |
| } |
| .code-panel { |
| width: 200px; |
| position: fixed; |
| top: 0; |
| right: 0; |
| border: 2px solid #aaa; |
| } |
| .code-line { |
| margin: 15px 5px; |
| font-size: 12px; |
| } |
| .code-line textarea{ |
| width: 190px; |
| height: 180px; |
| margin-bottom: 5px; |
| } |
| </style> |
| <div id="main"></div> |
| |
| <div class="code-panel"> |
| <div class="code-line"> |
| <textarea id="code1"> |
| chart.setOption({ |
| dataZoom: [ |
| { |
| id: 'xSlider', |
| startValue: '类目36', |
| endValue: '类目90' |
| } |
| ] |
| }); |
| </textarea> |
| chartIndex: <input id="chartIndex1" type="text" value="1"/> |
| <input type="button" value="run" onclick="runCode(1);"/> |
| </div> |
| |
| <div class="code-line"> |
| <textarea id="code2"> |
| chart.setOption({ |
| dataZoom: [ |
| { |
| id: 'xSlider', |
| startValue: '2011-02-04', |
| endValue: '2011-05-06' |
| } |
| ] |
| }); |
| </textarea> |
| chartIndex: <input id="chartIndex2" type="text" value="2"/> |
| <input type="button" value="run" onclick="runCode(2);"/> |
| </div> |
| </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, zu) { |
| echarts = ec; |
| zrUtil = zu; |
| |
| renderTitle('axisType_value'); |
| var data = {data1: [], data2: []}; |
| for (var i = 0; i < 500; i++) { |
| data.data1.push([random(1000), random(500), random(1)]); |
| data.data2.push([random(1000), random(500), random(1)]); |
| } |
| makeChart(getOption(data, 'value')); |
| |
| |
| renderTitle('axisType_category'); |
| var data = {data1: [], data2: []}; |
| var xAxisData = []; |
| for (var i = 0; i < 500; i++) { |
| data.data1.push(random(500)); |
| data.data2.push(random(500)); |
| xAxisData.push('类目' + i); |
| } |
| makeChart(getOption(data, 'category', xAxisData)); |
| |
| |
| renderTitle('axisType_time'); |
| var data = {data1: [], data2: []}; |
| var baseDate = +new Date(2010, 3, 3); |
| for (var i = 0; i < 500; i++) { |
| var date = new Date(baseDate + i * 3600 * 24 * 1000); |
| date = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'); |
| data.data1.push([date, random(500)]); |
| data.data2.push([date, random(500)]); |
| } |
| makeChart(getOption(data, 'time')); |
| |
| }); |
| |
| |
| |
| |
| |
| |
| function renderTitle(label) { |
| var containerEl = document.getElementById('main'); |
| var el = document.createElement('a'); |
| el.className = 'title'; |
| var html = encodeHTML(label); |
| el.innerHTML = html; |
| el.href = '#' + html.replace(/\s/g, '_'); |
| el.name = html.replace(/\s/g, '_'); |
| containerEl.appendChild(el); |
| } |
| |
| function makeChart(opt) { |
| var containerEl = document.getElementById('main'); |
| var el = document.createElement('div'); |
| el.className = 'block'; |
| el.innerHTML = '<div class="ec"></div><div class="info"></div>'; |
| containerEl.appendChild(el); |
| |
| var chart = echarts.init(el.firstChild, null, {renderer: 'canvas'}); |
| 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>'; |
| }); |
| var axisOpt = zrUtil.map(resultOpt.xAxis, function (rawOpt) { |
| return '' |
| + '<tr>' |
| + '<td>min:</td><td>' + encodeHTML(rawOpt.min) + '</td>' |
| + '<td>max:</td><td>' + encodeHTML(rawOpt.max) + '</td>' |
| + '<td>scale:</td><td>' + encodeHTML(rawOpt.scale) + '</td>' |
| + '<td>rangeStart:</td><td>' + encodeHTML(rawOpt.rangeStart) + '</td>' |
| + '<td>rangeEnd:</td><td>' + encodeHTML(rawOpt.rangeEnd) + '</td>' |
| + '</tr>'; |
| }); |
| |
| el.lastChild.innerHTML = '' |
| + (isInit ? 'ON_INIT: ' : 'ON_EVENT: ') + '<br>' |
| + '<table><tbody>' |
| + dataZoomOpt.join('') |
| + axisOpt.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, xAxisType, xAxisData) { |
| return { |
| animation: false, |
| legend: { |
| data: ['n1', 'n2'] |
| }, |
| toolbox: { |
| feature: { |
| dataView: {}, |
| dataZoom: {show: true}, |
| restore: {show: true}, |
| saveAsImage: {} |
| } |
| }, |
| tooltip: { |
| trigger: 'axis' |
| }, |
| xAxis: { |
| type: xAxisType, |
| splitLine: { |
| show: true |
| }, |
| data: xAxisData |
| }, |
| yAxis: { |
| type: 'value', |
| splitLine: { |
| show: true |
| } |
| }, |
| dataZoom: [ |
| { |
| id: 'xSlider', |
| name: 'xSlider', |
| show: true, |
| xAxisIndex: [0], |
| start: 1, |
| end: 5 |
| }, |
| { |
| name: 'ySlider', |
| show: true, |
| yAxisIndex: [0], |
| start: 0, |
| end: 100 |
| }, |
| { |
| name: 'xInside', |
| type: 'inside', |
| xAxisIndex: [0], |
| start: 1, |
| end: 5 |
| }, |
| { |
| name: 'yInside', |
| type: 'inside', |
| yAxisIndex: [0], |
| start: 0, |
| end: 100 |
| } |
| ], |
| series: [ |
| { |
| name: 'n1', |
| type: 'line', |
| symbolSize: 10, |
| data: data.data1 |
| }, |
| { |
| name: 'n2', |
| type: 'line', |
| symbolSize: 10, |
| data: data.data2 |
| } |
| ] |
| }; |
| } |
| |
| |
| </script> |
| |
| |
| <script type="text/javascript"> |
| function runCode(num) { |
| var id = 'code' + num; |
| var textarea = document.getElementById(id); |
| var chartIndex = +document.getElementById('chartIndex' + num).value; |
| var code = '' |
| + 'var chart = charts[chartIndex];' |
| + textarea.value |
| + ';renderProp(chart, els[chartIndex], true);'; |
| (new Function('charts', 'chartIndex', code))(charts, chartIndex); |
| } |
| </script> |
| |
| </body> |
| </html> |
