476 lines
16 KiB
HTML
Generated
476 lines
16 KiB
HTML
Generated
|
||
<!--
|
||
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/simpleRequire.js"></script>
|
||
<script src="lib/config.js"></script>
|
||
<script src="lib/testHelper.js"></script>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="stylesheet" href="lib/reset.css" />
|
||
</head>
|
||
<body>
|
||
<style>
|
||
h1 {
|
||
line-height: 60px;
|
||
height: 60px;
|
||
background: #e0ebff;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
.chart {
|
||
height: 500px;
|
||
}
|
||
</style>
|
||
|
||
<h1>normal</h1>
|
||
<div class="chart" id="main0"></div>
|
||
<h1>data column 0 and column 2 is not used.</h1>
|
||
<div class="chart" id="main1"></div>
|
||
<h1>category is not specified but auto-collected.</h1>
|
||
<div class="chart" id="main2"></div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
// Schema:
|
||
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
|
||
var schema = [
|
||
{name: 'date', index: 0, text: '日期'},
|
||
{name: 'AQIindex', index: 1, text: 'AQI指数'},
|
||
{name: 'PM25', index: 2, text: 'PM2.5'},
|
||
{name: 'PM10', index: 3, text: 'PM10'},
|
||
{name: 'CO', index: 4, text: '一氧化碳 (CO)'},
|
||
{name: 'NO2', index: 5, text: '二氧化氮 (NO2)'},
|
||
{name: 'SO2', index: 6, text: '二氧化硫 (SO2)'},
|
||
{name: '等级', index: 7, text: '等级'}
|
||
];
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
|
||
require([
|
||
'data/aqi/BJdata',
|
||
'data/aqi/GZdata',
|
||
'data/aqi/SHdata',
|
||
'echarts'
|
||
], function (dataBJ, dataGZ, dataSH, echarts) {
|
||
var zrUtil = echarts.util;
|
||
|
||
var lineStyle = {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
};
|
||
|
||
var option = {
|
||
aria: {
|
||
show: true
|
||
},
|
||
animation: true,
|
||
legend: {
|
||
bottom: 30,
|
||
data: ['北京', '上海', '广州'],
|
||
itemGap: 20,
|
||
textStyle: {
|
||
// color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
tooltip: {
|
||
padding: 10,
|
||
backgroundColor: '#222',
|
||
borderColor: '#777',
|
||
borderWidth: 1
|
||
},
|
||
visualMap: {
|
||
show: true,
|
||
min: 0,
|
||
max: 150,
|
||
top: 'center',
|
||
dimension: 2,
|
||
inRange: {
|
||
color: ['#d94e5d','#eac736','#50a3ba'].reverse()
|
||
},
|
||
outOfRange: {
|
||
color: ['#ccc'],
|
||
opacity: 0.001
|
||
}
|
||
},
|
||
parallelAxis: [
|
||
{dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
|
||
{dim: 1, name: schema[1].text},
|
||
{dim: 2, name: schema[2].text},
|
||
{dim: 3, name: schema[3].text},
|
||
{dim: 4, name: schema[4].text},
|
||
{dim: 5, name: schema[5].text},
|
||
{dim: 6, name: schema[6].text},
|
||
{dim: 7, name: schema[7].text,
|
||
type: 'category',
|
||
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
|
||
}
|
||
],
|
||
parallel: {
|
||
bottom: 100,
|
||
parallelAxisDefault: {
|
||
type: 'value',
|
||
name: 'AQI指数',
|
||
nameLocation: 'end',
|
||
nameGap: 20,
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 14
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '北京',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataBJ
|
||
},
|
||
{
|
||
name: '上海',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataSH
|
||
},
|
||
{
|
||
name: '广州',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataGZ
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.createChart(echarts, 'main0', option);
|
||
|
||
chart && chart.on('axisAreaSelected', function (event) {
|
||
var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
|
||
console.log('北京: ', indices);
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
|
||
require([
|
||
'data/aqi/BJdata',
|
||
'data/aqi/GZdata',
|
||
'data/aqi/SHdata',
|
||
'echarts'
|
||
], function (dataBJ, dataGZ, dataSH, echarts) {
|
||
var zrUtil = echarts.util;
|
||
|
||
var lineStyle = {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
};
|
||
|
||
var option = {
|
||
animation: true,
|
||
legend: {
|
||
bottom: 30,
|
||
data: ['北京', '上海', '广州'],
|
||
itemGap: 20,
|
||
textStyle: {
|
||
// color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
tooltip: {
|
||
padding: 10,
|
||
backgroundColor: '#222',
|
||
borderColor: '#777',
|
||
borderWidth: 1,
|
||
formatter: function (obj) {
|
||
var value = obj[0].value;
|
||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||
+ obj[0].seriesName + ' ' + value[0] + '日期：'
|
||
+ value[7]
|
||
+ '</div>'
|
||
+ schema[1].text + '：' + value[1] + '<br>'
|
||
+ schema[2].text + '：' + value[2] + '<br>'
|
||
+ schema[3].text + '：' + value[3] + '<br>'
|
||
+ schema[4].text + '：' + value[4] + '<br>'
|
||
+ schema[5].text + '：' + value[5] + '<br>'
|
||
+ schema[6].text + '：' + value[6] + '<br>';
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: true,
|
||
min: 0,
|
||
max: 150,
|
||
top: 'center',
|
||
dimension: 2,
|
||
inRange: {
|
||
color: ['#d94e5d','#eac736','#50a3ba'].reverse()
|
||
},
|
||
outOfRange: {
|
||
color: ['#ccc'],
|
||
opacity: 0.001
|
||
}
|
||
},
|
||
parallelAxis: [
|
||
// {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
|
||
{dim: 1, name: schema[1].text},
|
||
// {dim: 2, name: schema[2].text},
|
||
{dim: 3, name: schema[3].text},
|
||
{dim: 4, name: schema[4].text},
|
||
{dim: 5, name: schema[5].text},
|
||
{dim: 6, name: schema[6].text},
|
||
{dim: 7, name: schema[7].text,
|
||
type: 'category',
|
||
data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
|
||
}
|
||
],
|
||
parallel: {
|
||
bottom: 100,
|
||
parallelAxisDefault: {
|
||
type: 'value',
|
||
name: 'AQI指数',
|
||
nameLocation: 'end',
|
||
nameGap: 20,
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 14
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '北京',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataBJ
|
||
},
|
||
{
|
||
name: '上海',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataSH
|
||
},
|
||
{
|
||
name: '广州',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataGZ
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.createChart(echarts, 'main1', option);
|
||
|
||
chart && chart.on('axisAreaSelected', function (event) {
|
||
var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
|
||
console.log('北京: ', indices);
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
|
||
require([
|
||
'data/aqi/BJdata',
|
||
'data/aqi/GZdata',
|
||
'data/aqi/SHdata',
|
||
'echarts'
|
||
], function (dataBJ, dataGZ, dataSH, echarts) {
|
||
var zrUtil = echarts.util;
|
||
|
||
var lineStyle = {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
};
|
||
|
||
var option = {
|
||
animation: true,
|
||
legend: {
|
||
bottom: 30,
|
||
data: ['北京', '上海', '广州'],
|
||
itemGap: 20,
|
||
textStyle: {
|
||
// color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
tooltip: {
|
||
padding: 10,
|
||
backgroundColor: '#222',
|
||
borderColor: '#777',
|
||
borderWidth: 1,
|
||
formatter: function (obj) {
|
||
var value = obj[0].value;
|
||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||
+ obj[0].seriesName + ' ' + value[0] + '日期：'
|
||
+ value[7]
|
||
+ '</div>'
|
||
+ schema[1].text + '：' + value[1] + '<br>'
|
||
+ schema[2].text + '：' + value[2] + '<br>'
|
||
+ schema[3].text + '：' + value[3] + '<br>'
|
||
+ schema[4].text + '：' + value[4] + '<br>'
|
||
+ schema[5].text + '：' + value[5] + '<br>'
|
||
+ schema[6].text + '：' + value[6] + '<br>';
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: true,
|
||
min: 0,
|
||
max: 150,
|
||
top: 'center',
|
||
dimension: 2,
|
||
inRange: {
|
||
color: ['#d94e5d','#eac736','#50a3ba'].reverse()
|
||
},
|
||
outOfRange: {
|
||
color: ['#ccc'],
|
||
opacity: 0.001
|
||
}
|
||
},
|
||
parallelAxis: [
|
||
// {dim: 0, name: schema[0].text, max: 31, inverse: true, nameLocation: 'end'},
|
||
{dim: 1, name: schema[1].text},
|
||
// {dim: 2, name: schema[2].text},
|
||
{dim: 3, name: schema[3].text},
|
||
{dim: 4, name: schema[4].text},
|
||
{dim: 5, name: schema[5].text},
|
||
{dim: 6, name: schema[6].text},
|
||
{dim: 7, name: schema[7].text,
|
||
type: 'category'
|
||
// data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']
|
||
}
|
||
],
|
||
parallel: {
|
||
bottom: 100,
|
||
parallelAxisDefault: {
|
||
type: 'value',
|
||
name: 'AQI指数',
|
||
nameLocation: 'end',
|
||
nameGap: 20,
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
nameTextStyle: {
|
||
fontSize: 14
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '北京',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataBJ
|
||
},
|
||
{
|
||
name: '上海',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataSH
|
||
},
|
||
{
|
||
name: '广州',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataGZ
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.createChart(echarts, 'main2', option);
|
||
|
||
chart && chart.on('axisAreaSelected', function (event) {
|
||
var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
|
||
console.log('北京: ', indices);
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html> |