334 lines
11 KiB
Plaintext
334 lines
11 KiB
Plaintext
<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> |