568 lines
16 KiB
HTML
568 lines
16 KiB
HTML
<!DOCTYPE>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="esl.js"></script>
|
|
<script src="config.js"></script>
|
|
<script src="lib/jquery.min.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="reset.css">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
body {
|
|
}
|
|
.chart {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
font-weight: normal;
|
|
background: #A3AEFF;
|
|
}
|
|
</style>
|
|
|
|
<h2>cartesian category axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
|
|
<div class="chart" id="main1"></div>
|
|
|
|
<h2>cartesian category axis | xAxis: {min: undefined, max: undefined}</h2>
|
|
<div class="chart" id="main1.1"></div>
|
|
|
|
<h2>cartesian category axis | xAxis.data is empty</h2>
|
|
<div class="chart" id="main1.2"></div>
|
|
|
|
<h2>cartesian category axis | xAxis: {min: -10, max: '类目3'}</h2>
|
|
<div class="chart" id="main2"></div>
|
|
|
|
<h2>cartesian value axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
|
|
<div class="chart" id="main3"></div>
|
|
|
|
<h2>cartesian value axis | xAxis: {min: -10, max: 10}</h2>
|
|
<div class="chart" id="main4"></div>
|
|
|
|
<h2>cartesian time axis | xAxis: {min: 'dataMin', max: 'dataMax'}</h2>
|
|
<div class="chart" id="main5"></div>
|
|
|
|
<h2>cartesian time axis | xAxis: {min: '2012-08-12', max: '2012-10-01'}</h2>
|
|
<div class="chart" id="main6"></div>
|
|
|
|
<h2>polar category axis | radiuAxis: {min: 'dataMin', max: 'dataMax'}</h2>
|
|
<div class="chart" id="main90.1"></div>
|
|
|
|
<h2>parallel category axis | parallelAxis: {min: undefined, max: undefined}</h2>
|
|
<div class="chart" id="main91.1"></div>
|
|
|
|
<h2>single category axis | singleAxis: {min: 'dataMin', max: 'dataMax'}</h2>
|
|
<div class="chart" id="main92.1"></div>
|
|
|
|
|
|
<script>
|
|
|
|
function makeChart(id, option, noDataZoom) {
|
|
require([
|
|
'echarts',
|
|
'echarts/chart/line',
|
|
'echarts/chart/scatter',
|
|
'echarts/chart/parallel',
|
|
'echarts/component/polar',
|
|
'echarts/component/grid',
|
|
'echarts/component/legend',
|
|
'echarts/component/singleAxis',
|
|
'echarts/component/tooltip',
|
|
'echarts/component/dataZoom'
|
|
], function (echarts) {
|
|
var main = document.getElementById(id);
|
|
if (main) {
|
|
var chartMain = document.createElement('div');
|
|
chartMain.style.cssText = 'height:100%';
|
|
main.appendChild(chartMain);
|
|
var chart = echarts.init(chartMain);
|
|
chart.setOption(option);
|
|
|
|
if (!noDataZoom) {
|
|
var controller = document.createElement('div');
|
|
controller.style.cssText = 'position: absolute; right: 10px; top: 10px;';
|
|
main.appendChild(controller);
|
|
controller.innerHTML = [
|
|
'<button>Add DataZoom</button>',
|
|
'<button>Remove DataZoom</button>'
|
|
].join('');
|
|
|
|
var btns = $(controller).children();
|
|
$(btns[0]).on('click', function () {
|
|
option.dataZoom = [{type: 'inside'}, {type: 'slider'}];
|
|
chart.setOption(option, true);
|
|
});
|
|
$(btns[1]).on('click', function () {
|
|
delete option.dataZoom;
|
|
chart.setOption(option, true);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main1', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
|
|
min: 'dataMin',
|
|
max: 'dataMax'
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [43]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [43, 99]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main1.1', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: ['类目1', '类目2', '类目3', '类目4', '类目5']
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [43]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [43, 99]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main1.2', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
data: []
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [43]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [43, 99]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main2', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
grid: {
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
data: ['类目1', '类目2', '类目3', '类目4', '类目5'],
|
|
min: -10,
|
|
max: '类目3',
|
|
axisTick: {
|
|
interval: 0
|
|
},
|
|
axisLabel: {
|
|
interval: 0
|
|
}
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [43]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [43, 99]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main3', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [[2, 43]]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [[2, 43], [4, 99]]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main4', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {min: -10, max: 10},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [[2, 43]]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [[2, 43], [4, 99]]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main5', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {type: 'time'},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [
|
|
[new Date('2011-11-11'), 2112]
|
|
]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [
|
|
[new Date('2011-11-11'), 2112],
|
|
[new Date('2012-11-12'), 122]
|
|
]
|
|
}, {
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main6', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
min: '2012-8-12',
|
|
max: '2012-10-01'
|
|
},
|
|
yAxis: {},
|
|
series: [{
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [
|
|
[new Date('2012-9-12'), 11]
|
|
]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [
|
|
['2012-9-12', 11],
|
|
['2012-9-18', 14]
|
|
]
|
|
}, {
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main90.1', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
polar: {},
|
|
radiusAxis: {
|
|
min: 'dataMin',
|
|
max: 'dataMax',
|
|
data: ['类目1', '类目2', '类目3', '类目4', '类目5']
|
|
},
|
|
angleAxis: {},
|
|
series: [{
|
|
coordinateSystem: 'polar',
|
|
name: 'no point',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
coordinateSystem: 'polar',
|
|
name: 'one point',
|
|
type: 'line',
|
|
data: [43]
|
|
}, {
|
|
coordinateSystem: 'polar',
|
|
name: 'two points',
|
|
type: 'line',
|
|
data: [43, 99]
|
|
}]
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main91.1', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
parallelAxis: [{
|
|
type: 'value',
|
|
dim: 0
|
|
}, {
|
|
dim: 1,
|
|
type: 'category',
|
|
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
|
|
}],
|
|
parallel: {
|
|
},
|
|
series: [{
|
|
name: 'no point',
|
|
type: 'parallel',
|
|
data: []
|
|
}, {
|
|
name: 'one point',
|
|
type: 'parallel',
|
|
data: [[43, '良']]
|
|
}, {
|
|
name: 'two points',
|
|
type: 'parallel',
|
|
data: [[43, '良'], [99, '重度污染']]
|
|
}]
|
|
}, true);
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
makeChart('main92.1', {
|
|
legend: {
|
|
data: ['no point', 'one point', 'two points'],
|
|
selectedMode: 'single'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
singleAxis: {
|
|
type: 'category',
|
|
min: 'dataMin',
|
|
max: 'dataMax',
|
|
data: ['类目1', '类目2', '类目3', '类目4', '类目5']
|
|
},
|
|
series: [{
|
|
coordinateSystem: 'singleAxis',
|
|
name: 'no point',
|
|
type: 'scatter',
|
|
symbolSize: 20,
|
|
data: []
|
|
}, {
|
|
coordinateSystem: 'singleAxis',
|
|
name: 'one point',
|
|
type: 'scatter',
|
|
symbolSize: 20,
|
|
data: [[2]]
|
|
}, {
|
|
coordinateSystem: 'singleAxis',
|
|
name: 'two points',
|
|
type: 'scatter',
|
|
symbolSize: 20,
|
|
data: [[2], [4]]
|
|
}]
|
|
}, true);
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |