slides/asset/ec-demo/color-mix-aqi.html (203 lines of code) (raw):
<html>
<head>
<meta charset="utf-8">
<script src="../common/esl.js"></script>
<script src="../common/config.js"></script>
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<style>
</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）'}
];
require([
'data/aqi/BJdata',
'data/aqi/GZdata',
'data/aqi/SHdata',
'echarts',
'common/dark'
], function (dataBJ, dataGZ, dataSH, echarts) {
var chart = echarts.init(document.getElementById('main'));
var itemStyle = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
chart.setOption({
legend: {
y: 'top',
data: ['北京', '上海', '广州'],
textStyle: {
color: '#fff',
fontSize: 18
}
},
grid: {
x: '10%',
x2: 200,
y: '15%',
y2: '10%'
},
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ obj.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>';
}
},
xAxis: {
type: 'value',
name: '日期',
nameGap: 16,
nameTextStyle: {
color: '#fff',
fontSize: 16
},
max: 31,
splitLine: {
show: false
},
axisTick: {
lineStyle: {
color: '#777'
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#fff',
fontSize: 20
},
axisTick: {
lineStyle: {
color: '#777'
}
},
splitLine: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
},
dataRange: [
{
x: 'right',
y: 'top',
dimension: 'z',
min: 0,
max: 250,
itemWidth: 30,
itemHeight: 100,
calculable: true,
precision: 0.1,
text: ['圆形大小：PM2.5'],
textGap: 30,
textStyle: {
color: '#fff'
},
inRange: {
symbolSize: [10, 70]
},
outOfRange: {
symbolSize: [10, 70],
color: ['rgba(255,255,255,.2)']
},
controller: {
outOfRange: {
color: ['#444']
}
}
},
{
x: 'right',
y: 'bottom',
dimension: 6,
min: 0,
max: 50,
itemHeight: 100,
calculable: true,
precision: 0.1,
text: ['明暗：二氧化硫'],
textGap: 30,
textStyle: {
color: '#fff'
},
inRange: {//HSL
colorL: [1, .5],
colorLightness: [1, .5]
},
outOfRange: {
color: ['rgba(255,255,255,.2)']
},
controller: {
outOfRange: {
color: ['#444']
}
}
}
],
series: [
{
name: '北京',
type: 'scatter',
itemStyle: itemStyle,
data: dataBJ
},
{
name: '上海',
type: 'scatter',
itemStyle: itemStyle,
data: dataSH
},
{
name: '广州',
type: 'scatter',
itemStyle: itemStyle,
data: dataGZ
}
]
});
})
</script>
</body>
</html>