| DIR:/home/drsekaran/www/admin/vendors/echarts/test/ |
| Current File : /home/drsekaran/www/admin/vendors/echarts/test/parallel-aqi.html |
<html>
<head>
<meta charset="utf-8">
<script src="./esl.js"></script>
<script src="./config.js"></script>
<link rel="stylesheet" href="./reset.css">
</head>
<body>
<style>
body {
/*background: #000;*/
}
</style>
<div id="main"></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: '等级'}
];
require([
'data/aqi/BJdata',
'data/aqi/GZdata',
'data/aqi/SHdata',
'zrender/core/util',
'echarts',
'echarts/chart/parallel',
'echarts/component/legend',
'echarts/component/visualMap',
'echarts/component/parallel',
], function (dataBJ, dataGZ, dataSH, zrUtil, echarts) {
var chart = echarts.init(document.getElementById('main'));
var lineStyle = {
normal: {
width: 1
// opacity: 0.5,
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
chart.setOption({
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,
dimension: 2,
inRange: {
color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
// colorAlpha: [0, 1]
}
},
// dataZoom: {
// show: true,
// orient: 'vertical',
// parallelAxisIndex: [0]
// },
parallelAxis: [
{dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
{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,
nameTextStyle: {
// color: '#fff',
fontSize: 14
},
axisLine: {
lineStyle: {
// color: '#aaa'
}
},
axisTick: {
lineStyle: {
// color: '#777'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
// color: '#fff'
}
}
}
},
series: [
{
name: '北京',
type: 'parallel',
lineStyle: lineStyle,
data: dataBJ
// data: [
// [ 1, 32,12 , 19, 28,1.39,24, 8,"优"],
// ]
},
{
name: '上海',
type: 'parallel',
lineStyle: lineStyle,
data: dataSH
// data: [
// [ 1, 332,212 , 119, 128,12.39,124, 18,"良"],
// ]
},
{
name: '广州',
type: 'parallel',
lineStyle: lineStyle,
data: dataGZ
}
]
});
chart.on('axisAreaSelected', function (event) {
var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
console.log('北京: ', indices);
});
});
</script>
</body>
</html> |