|
<!--
|
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/esl.js"></script>
|
<script src="lib/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) {
|
echarts = ec;
|
zrUtil = echarts.util;
|
|
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, { });
|
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) {
|
var handleIcon = 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z'; // jshint ignore:line
|
|
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',
|
handleIcon: handleIcon,
|
show: true,
|
xAxisIndex: [0],
|
start: 1,
|
end: 5
|
},
|
{
|
name: 'ySlider',
|
show: true,
|
handleIcon: handleIcon,
|
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>
|
