Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
unsatisfiableness
/
vendors
/
echarts
/
test
:
dataZoom-axis-type.html
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<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>