mirror of
https://gitlab.com/JKANetwork/CheckServer.git
synced 2026-03-05 01:52:01 +01:00
Start again
This commit is contained in:
231
vendors/echarts/test/connect2.html
vendored
Normal file
231
vendors/echarts/test/connect2.html
vendored
Normal file
@@ -0,0 +1,231 @@
|
||||
<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;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
#chart1, #chart2 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<div id="main">
|
||||
<div id="chart1"></div>
|
||||
<div id="chart2"></div>
|
||||
</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',
|
||||
'echarts/chart/scatter',
|
||||
'echarts/component/legend',
|
||||
'echarts/component/tooltip',
|
||||
'echarts/component/grid',
|
||||
'echarts/component/visualMapContinuous'
|
||||
], function (dataBJ, dataGZ, dataSH, echarts) {
|
||||
|
||||
var chart1 = echarts.init(document.getElementById('chart1'));
|
||||
var chart2 = echarts.init(document.getElementById('chart2'));
|
||||
|
||||
var option1 = makeChartOption();
|
||||
var option2 = makeChartOption();
|
||||
option1.visualMap.inRange = {
|
||||
symbolSize: [10, 70]
|
||||
};
|
||||
option1.visualMap.outOfRange = {
|
||||
symbolSize: [10, 70],
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
};
|
||||
option1.visualMap.dimension = 'z';
|
||||
option1.visualMap.max = 250;
|
||||
|
||||
option2.visualMap.inRange = {
|
||||
colorLightness: [1, 0.5]
|
||||
};
|
||||
option2.visualMap.outOfRange = {
|
||||
color: ['rgba(255,255,255,.2)']
|
||||
};
|
||||
option2.visualMap.dimension = 'z';
|
||||
option2.visualMap.max = 250;
|
||||
|
||||
chart1.setOption(option1);
|
||||
chart2.setOption(option2);
|
||||
|
||||
echarts.connect([chart1, chart2]);
|
||||
|
||||
function makeChartOption(legend) {
|
||||
var itemStyle = {
|
||||
normal: {
|
||||
opacity: 0.8,
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
color: [
|
||||
'#dd4444', '#fec42c', '#80F1BE'
|
||||
],
|
||||
legend: {
|
||||
top: 'top',
|
||||
data: ['北京', '上海', '广州'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10%',
|
||||
right: 200,
|
||||
top: '15%',
|
||||
bottom: '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: 14
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
left: 'right',
|
||||
top: 'top',
|
||||
min: 0,
|
||||
itemWidth: 30,
|
||||
itemHeight: 130,
|
||||
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']
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '北京',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
symbolSize: 20,
|
||||
data: dataBJ
|
||||
},
|
||||
{
|
||||
name: '上海',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
symbolSize: 20,
|
||||
data: dataSH
|
||||
},
|
||||
{
|
||||
name: '广州',
|
||||
type: 'scatter',
|
||||
itemStyle: itemStyle,
|
||||
symbolSize: 20,
|
||||
data: dataGZ
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user