332 lines
8.8 KiB
JavaScript
332 lines
8.8 KiB
JavaScript
|
import { stationList,ipcAlarmList } from "./index.js";
|
||
|
|
var threeColor_echart=null;
|
||
|
|
let indexMapChart=null;
|
||
|
|
let mapNameList=[];
|
||
|
|
let mapStatusUpdate=[];
|
||
|
|
export function drawSchoolLevelEchart(colorGreen,colorRed,colorYellow){
|
||
|
|
var dataName=["红色","黄色","绿色"]
|
||
|
|
var dataValue=[colorRed,colorYellow,colorGreen]
|
||
|
|
var option={
|
||
|
|
grid: { // 图表位置
|
||
|
|
top: '10%',
|
||
|
|
left: '50px',
|
||
|
|
right: '25px',
|
||
|
|
bottom: '20px'
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: '', // 主标题
|
||
|
|
textStyle: { // 标题样式
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
fontSize:16,
|
||
|
|
fontWeight:'bold',
|
||
|
|
fontFamily: 'myRegular'
|
||
|
|
},
|
||
|
|
top: '20px',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: true, // 不留白，从原点开始
|
||
|
|
data: dataName,
|
||
|
|
|
||
|
|
axisLine: { // 坐标轴
|
||
|
|
lineStyle: { // 坐标轴样式
|
||
|
|
color: '#4d76b2'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
interval: 0, // 为了让轴上显示全
|
||
|
|
rotate: 0, //显示全后重叠，调整角度
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
||
|
|
fontFamily: 'myRegular'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: { // 刻度
|
||
|
|
show: false // 控制刻度的显示与隐藏
|
||
|
|
},
|
||
|
|
splitLine: { // 网格线
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
show: true, // 显示隐藏 ture false
|
||
|
|
splitNumber: 5, // 间隔数
|
||
|
|
max:300,
|
||
|
|
// interval: 10 / 5,
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff', //更改坐标轴文字颜色
|
||
|
|
fontFamily: 'myRegular'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: { // 坐标轴
|
||
|
|
show: false,
|
||
|
|
lineStyle: { // 坐标轴样式
|
||
|
|
color: '#6490f1'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: { // 网格线
|
||
|
|
show: true, // 显示隐藏 ture false
|
||
|
|
lineStyle: { // 网格线样式
|
||
|
|
color: '#4d76b2'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
data: dataValue,
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: 25,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: function(params) {
|
||
|
|
// 定义一个颜色数组colorList
|
||
|
|
var colorList = ['red','yellow','#2f8555'];
|
||
|
|
return colorList[params.dataIndex]
|
||
|
|
},
|
||
|
|
label:{
|
||
|
|
show:true,
|
||
|
|
color:'#fff',
|
||
|
|
fontSize:18,
|
||
|
|
fontFamily: 'myRegular',
|
||
|
|
position: 'top',
|
||
|
|
formatter: function (param) {
|
||
|
|
return param.value
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
|
||
|
|
threeColor_echart=echarts.init(document.getElementById("threeColorChart"));
|
||
|
|
//使用制定的配置项和数据显示图表
|
||
|
|
threeColor_echart.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onresize=function(){
|
||
|
|
if(threeColor_echart!=null){
|
||
|
|
threeColor_echart.resize();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$(".navSilde").on('click',function(){
|
||
|
|
var state=$(this).attr("state");
|
||
|
|
if(state=="open"){
|
||
|
|
$(this).attr("state","close");
|
||
|
|
$("#schoolNavList").css("display","none");
|
||
|
|
$(".cityManageContent").css("width","100%");
|
||
|
|
}else{
|
||
|
|
$(this).attr("state","open");
|
||
|
|
$("#schoolNavList").css("display","block");
|
||
|
|
$(".cityManageContent").css("width","calc(100% - 120px)");
|
||
|
|
}
|
||
|
|
if(threeColor_echart!=null){
|
||
|
|
threeColor_echart.resize();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function drawIndexMap(){
|
||
|
|
$.getJSON("../../pages/newIndex/js/furong.json").then(res=>{
|
||
|
|
indexMapChart= echarts.init(document.getElementById("marinContentMap"));
|
||
|
|
echarts.registerMap("myMap", res);
|
||
|
|
var option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: '14',
|
||
|
|
color: '#fff',
|
||
|
|
fontFamily: 'myRegular',
|
||
|
|
|
||
|
|
},
|
||
|
|
borderWidth:0,
|
||
|
|
backgroundColor: '#092b6a',
|
||
|
|
formatter: (params) => {
|
||
|
|
let name = params.name
|
||
|
|
return echartMapTips(name)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'map3D',
|
||
|
|
name: '地图',
|
||
|
|
selectedMode: 'single', // 地图高亮单选
|
||
|
|
regionHeight: 3, // 地图高度
|
||
|
|
map: 'myMap',
|
||
|
|
viewControl: {
|
||
|
|
distance:56, // 地图视角 控制初始大小
|
||
|
|
alpha: 45,// 倾斜角度
|
||
|
|
rotateSensitivity: [1, 1]
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true, // 是否显示名字
|
||
|
|
textStyle:{
|
||
|
|
color:"#fff",//文字颜色
|
||
|
|
fontSize:18,//文字大小
|
||
|
|
fontFamily: 'myRegular',
|
||
|
|
backgroundColor:"rgba(0,0,0,0)",//透明度0清空文字背景
|
||
|
|
},
|
||
|
|
formatter: (params) => {
|
||
|
|
var name=params["name"];
|
||
|
|
if(name=="五里牌"){
|
||
|
|
return '{a|' + name + '}';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
rich:{
|
||
|
|
a:{
|
||
|
|
color: '#fff',
|
||
|
|
fontSize:18,//文字大小
|
||
|
|
padding:[14,30],
|
||
|
|
fontFamily: 'myRegular',
|
||
|
|
backgroundColor:"rgba(0,0,0,0)",//透明度0清空文字背景
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#27519e', // 地图背景颜色
|
||
|
|
borderWidth: 1, // 分界线wdith
|
||
|
|
borderColor: '#a4d8f0', // 分界线颜色
|
||
|
|
opacity: 0.9
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true, // 是否显示高亮
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff' // 高亮文字颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#3a69c1', // 地图高亮颜色
|
||
|
|
borderWidth: 10, // 分界线width
|
||
|
|
borderColor: '#6BECF5'// 分界线颜色
|
||
|
|
}
|
||
|
|
},
|
||
|
|
light: {
|
||
|
|
main: {
|
||
|
|
color: '#fff',
|
||
|
|
intensity: 1,
|
||
|
|
shadow: true,
|
||
|
|
shadowQuality: 'high',
|
||
|
|
alpha: 25, //
|
||
|
|
beta: 20
|
||
|
|
},
|
||
|
|
ambient: {
|
||
|
|
color: '#fff',
|
||
|
|
intensity: 0.6
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
indexMapChart.setOption(option);
|
||
|
|
|
||
|
|
createMapNameList(res);
|
||
|
|
indexMapChart.on('mouseover', function (params) {
|
||
|
|
updateMapStatusColor();
|
||
|
|
});
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function createMapNameList(res){
|
||
|
|
var features=res["features"];
|
||
|
|
for(var i=0;i<features.length;i++){
|
||
|
|
var name=features[i]["properties"]["name"];
|
||
|
|
mapNameList.push(name);
|
||
|
|
}
|
||
|
|
updateMapStatus();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function updateMapStatus(){
|
||
|
|
mapStatusUpdate=[]
|
||
|
|
for(var i=0;i<ipcAlarmList.length;i++){
|
||
|
|
var borough=ipcAlarmList[i]["borough"];
|
||
|
|
for(var j=0;j<mapNameList.length;j++){
|
||
|
|
if(borough.indexOf(mapNameList[j])!=-1){
|
||
|
|
if(mapStatusUpdate.indexOf(mapNameList[j])==-1){
|
||
|
|
mapStatusUpdate.push(mapNameList[j]);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateMapStatusColor();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function updateMapStatusColor(){
|
||
|
|
if(indexMapChart!=null){
|
||
|
|
var getOptions=indexMapChart.getOption()
|
||
|
|
var data=[]
|
||
|
|
for(var i=0;i<mapStatusUpdate.length;i++){
|
||
|
|
var obj={
|
||
|
|
"name":mapStatusUpdate[i],
|
||
|
|
"itemStyle": { color: "#D37636" }
|
||
|
|
}
|
||
|
|
data.push(obj);
|
||
|
|
}
|
||
|
|
if(data.length!=0){
|
||
|
|
getOptions["series"][0]["data"]=data
|
||
|
|
indexMapChart.setOption(getOptions)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function echartMapTips(title){
|
||
|
|
var tempArr=[];
|
||
|
|
stationList.forEach((item=>{
|
||
|
|
var borough=item["borough"];
|
||
|
|
if(borough.indexOf(title)!=-1){
|
||
|
|
tempArr.push(item);
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
var schoolType=showSchoolDistribution(tempArr)
|
||
|
|
return `<div style="padding:10px;">
|
||
|
|
<p>${title}</p>
|
||
|
|
<p>幼儿园:${schoolType["school_y"].length} </p>
|
||
|
|
<p>小学:${schoolType["school_x"].length}</p>
|
||
|
|
<p>中学:${schoolType["school_z"].length}</p>
|
||
|
|
</div>`
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function showSchoolDistribution(tempArr){
|
||
|
|
let school_y=[];
|
||
|
|
let school_x=[];
|
||
|
|
let school_z=[];
|
||
|
|
tempArr.forEach(item=>{
|
||
|
|
var type=item["type"];
|
||
|
|
switch(type){
|
||
|
|
case "幼儿园":
|
||
|
|
school_y.push(item);
|
||
|
|
break;
|
||
|
|
case "小学":
|
||
|
|
school_x.push(item);
|
||
|
|
break;
|
||
|
|
case "中学":
|
||
|
|
school_z.push(item);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return {
|
||
|
|
school_y,school_x,school_z
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export {threeColor_echart,drawIndexMap,indexMapChart}
|