518 lines
25 KiB
HTML
518 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>ECharts</title>
|
||
<!-- 引入在线CDN echarts.js -->
|
||
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script> -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||
<div id="main" style="width: 800px;height:600px;"></div>
|
||
<script type="text/javascript">
|
||
let airData = [
|
||
{ name: '北京市', value: 39.92 },
|
||
{ name: '天津市', value: 39.13 },
|
||
{ name: '上海市', value: 31.22 },
|
||
{ name: '重庆市', value: 66 },
|
||
{ name: '河北省', value: 147 },
|
||
{ name: '河南省', value: 113 },
|
||
{ name: '云南省', value: 25.04 },
|
||
{ name: '辽宁省', value: 50 },
|
||
{ name: '黑龙江省', value: 114 },
|
||
{ name: '湖南省', value: 175 },
|
||
{ name: '安徽省', value: 117 },
|
||
{ name: '山东省', value: 92 },
|
||
{ name: '新疆维吾尔自治区', value: 84 },
|
||
{ name: '江苏省', value: 67 },
|
||
{ name: '浙江省', value: 84 },
|
||
{ name: '江西省', value: 96 },
|
||
{ name: '湖北省', value: 273 },
|
||
{ name: '广西壮族自治区', value: 59 },
|
||
{ name: '甘肃省', value: 99 },
|
||
{ name: '山西省', value: 39 },
|
||
{ name: '内蒙古自治区', value: 58 },
|
||
{ name: '陕西省', value: 61 },
|
||
{ name: '吉林省', value: 51 },
|
||
{ name: '福建省', value: 29 },
|
||
{ name: '贵州省', value: 71 },
|
||
{ name: '广东省', value: 38 },
|
||
{ name: '青海省', value: 57 },
|
||
{ name: '西藏自治区', value: 24 },
|
||
{ name: '四川省', value: 58 },
|
||
{ name: '宁夏回族自治区', value: 52 },
|
||
{ name: '海南省', value: 54 },
|
||
{ name: '台湾省', value: 88 },
|
||
{ name: '香港特别行政区', value: 66 },
|
||
{ name: '澳门特别行政区', value: 77 },
|
||
{ name: '南海诸岛', value: 55 }
|
||
];
|
||
let url = "https://geo.datav.aliyun.com/areas_v3/bound/440000_full.json";
|
||
let url_boundary = "https://geo.datav.aliyun.com/areas_v3/bound/100000_boundary.json";
|
||
let url1 = '/data/echart_map_json/china1.json';
|
||
let url1_main = '/data/echart_map_json/main.json';
|
||
let url1_three = '/data/echart_map_json/ss.json';
|
||
let url1_boundary = '/data/echart_map_json/boundary1.json';
|
||
let url1_single = '/data/echart_map_json/single.json';
|
||
let promiseArr = [];
|
||
promiseArr.push(fetch(url1).then(res=>res.json()))
|
||
promiseArr.push(fetch(url1_single).then(res=>res.json()))
|
||
Promise.allSettled(promiseArr).then((result)=>{
|
||
console.log(result)
|
||
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
result[1].value.UTF8Encoding=false
|
||
// result[1].value.features = result[1].value.features.filter(item=>item.properties.id!=='2')
|
||
result[1].value.features[0].id = 1
|
||
result[1].value.features[1].id = 2
|
||
//在echarts中注册地图矢量数据
|
||
echarts.registerMap('china1',result[0].value);
|
||
echarts.registerMap('boundary1',result[1].value);
|
||
//option定义
|
||
let option3d = {
|
||
tooltip: {
|
||
show: false,
|
||
formatter: (params) => {
|
||
return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
|
||
<div class='tips' style="padding:0 12px;">
|
||
<h1 style='font-size:16px;'>${params.name}</h1>
|
||
<p style="font-size:14px;"><span style="opacity:0.75">办理人数：</span>22人</p>
|
||
<p style="font-size:14px;"><span style="opacity:0.75">待办人数：</span>22人</p>
|
||
<p style="font-size:14px;"><span style="opacity:0.75">办结人数：</span>22人</p>
|
||
</div>`;
|
||
},
|
||
borderColor: "#998484",
|
||
borderWidth: 1,
|
||
padding: [0, 0],
|
||
backgroundColor: "#1B212B",
|
||
borderRadius: 0,
|
||
// textStyle: { color: "blue" },
|
||
},
|
||
visualMap: {
|
||
show: true,
|
||
min: 1, //指定 visualMapContinuous 组件的允许的最小值。
|
||
max: 9, //指定 visualMapContinuous 组件的允许的最大值
|
||
inRange: {
|
||
color: ["#074b4f"],
|
||
},
|
||
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
|
||
},
|
||
series: [
|
||
{
|
||
name: "main",
|
||
type: "map3D",
|
||
map: 'china1', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
||
regionHeight: 2, //模型的高度
|
||
boxWidth: 100, //三维地图在三维场景中的宽度
|
||
//boxHeight:50,
|
||
boxDepth: 65, //三维地图在三维场景中的深度
|
||
// top: "10%",
|
||
//left:'10%',
|
||
// 配置为垂直渐变的背景
|
||
environment: 'images/53bg.png',
|
||
groundPlane:{
|
||
show:false
|
||
},
|
||
label: {
|
||
show: false, //是否显示标签。
|
||
position: ["50%", "50%"],
|
||
formatter: (params) => {
|
||
params.name;
|
||
},
|
||
textStyle: {
|
||
color: "rgba(255,255,255,0.65)", //地图初始化区域字体颜色
|
||
fontSize: 16,
|
||
opacity: 1,
|
||
backgroundColor: "#1B212B ",
|
||
borderColor: "#998484",
|
||
borderWidth: 1,
|
||
position: "insideTop",
|
||
padding: [6, 8],
|
||
borderRadius: 0,
|
||
distanca: 20,
|
||
},
|
||
|
||
emphasis: {
|
||
//对应的鼠标悬浮效果
|
||
show: true,
|
||
// textStyle: { color: "blue" }
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
// 静态模式下显示的默认样式
|
||
borderWidth: 1,
|
||
borderColor: "#21cac7",
|
||
color: "#0e838b",
|
||
}, //阴影效果
|
||
emphasis: {
|
||
// 鼠标移上去的样式
|
||
borderWidth: 1.6,
|
||
borderColor: "#95FFFF",
|
||
color: "#108f97",
|
||
textStyle: {
|
||
// color:'blue'
|
||
},
|
||
},
|
||
},
|
||
// data:[
|
||
// {
|
||
// name:'广东',
|
||
// itemStyle:{
|
||
// // 静态模式下显示的默认样式
|
||
// borderWidth: 1.5,
|
||
// borderColor: "#fff",
|
||
// color: "#fff",
|
||
// opacity :0.5
|
||
// }
|
||
// }
|
||
// ],
|
||
|
||
viewControl: {
|
||
center:[0,0,0],//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
|
||
//用于鼠标的旋转，缩放等视角控制。
|
||
autoRotate: false, //是否开启视角绕物体的自动旋转查看
|
||
distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
||
alpha:45,//视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
|
||
beta:0,//视角绕 y 轴，即左右旋转的角度。
|
||
distance:80,//默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
||
},
|
||
},
|
||
// {
|
||
// name: "attach",
|
||
// type: "map3D",
|
||
// map: 'boundary', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
||
// regionHeight: 2, //模型的高度
|
||
// boxWidth: 100, //三维地图在三维场景中的宽度
|
||
// //boxHeight:50,
|
||
// boxDepth: 65, //三维地图在三维场景中的深度
|
||
// itemStyle: {
|
||
// normal: {
|
||
// // 静态模式下显示的默认样式
|
||
// borderWidth: 1.6,
|
||
// borderColor: "#21cac7",
|
||
// color: "#0e838b",
|
||
// }, //阴影效果
|
||
// // emphasis: {
|
||
// // // 鼠标移上去的样式
|
||
// // borderWidth: 1.6,
|
||
// // borderColor: "#95FFFF",
|
||
// // color: "#108f97",
|
||
// // textStyle: {
|
||
// // // color:'blue'
|
||
// // },
|
||
// // },
|
||
// },
|
||
// }
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option3d);
|
||
|
||
})
|
||
|
||
function drawCharts(){
|
||
fetch(url1).then(function(response){
|
||
return response.json();
|
||
}).then(function(result){
|
||
console.log(result);
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
//在echarts中注册地图矢量数据
|
||
echarts.registerMap('china1',result);
|
||
// 指定图表的配置项和数据
|
||
// var option = {
|
||
// //配置地理坐标系组件
|
||
// geo:{
|
||
// type: 'map',
|
||
// map: 'china1',
|
||
// roam: true, //设置允许缩放以及拖动的效果
|
||
// label:{
|
||
// show: false,
|
||
// fontSize: 10
|
||
// },
|
||
// // zoom: 4, //初始化缩放比例
|
||
// center: [108.948024,34.263161] //设置初始化中心点
|
||
// },
|
||
// series: [
|
||
// {
|
||
// data: airData,
|
||
// geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
|
||
// type: 'map'
|
||
// }
|
||
// ],
|
||
// visualMap: {
|
||
// min: 0,
|
||
// max: 300,
|
||
// inRange: {
|
||
// symbolSize: [30, 100],
|
||
// color: ['white', 'red'] // 控制颜色渐变的范围
|
||
// },
|
||
// calculable: true // 出现滑块
|
||
// }
|
||
// };
|
||
var imgBase = 'http://127.0.0.1:5501/images/boundary_three.png'
|
||
|
||
// var option = {
|
||
// //配置地理坐标系组件
|
||
// geo: {
|
||
// type: 'map',
|
||
// map: 'china1',
|
||
// roam: true, //设置允许缩放以及拖动的效果
|
||
// label: {
|
||
// show: false,
|
||
// fontSize: 10
|
||
// },
|
||
// zoom: 4, //初始化缩放比例
|
||
// center: [113.75, 23.04] //设置初始化中心点
|
||
// },
|
||
// series: [
|
||
// {
|
||
// data: airData,
|
||
// geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
|
||
// type: 'map'
|
||
// }, {
|
||
// // 配置散点的坐标数据
|
||
// data: [ { name: '东莞', value: [113.75, 23.04] },],
|
||
// type: 'scatter',
|
||
// // 指明散点使用的坐标系统 geo的坐标系统，
|
||
// // 可选值：'cartesian2d'、'polar'、'geo'、'bmap'
|
||
// coordinateSystem: 'geo',
|
||
// rippleEffect: {
|
||
// color: '#ccc',//涟漪动画的颜色
|
||
// scale: 3 // 设置涟漪动画的缩放比例
|
||
// },
|
||
// // symbolSize:[10,20],
|
||
// // showEffectOn: 'emphasis',
|
||
// symbol:"image://"+imgBase,
|
||
// label:{
|
||
// color: '#219ebc',
|
||
// show: true,
|
||
// formatter:function(row){
|
||
// return row.name;
|
||
// }
|
||
// },
|
||
// itemStyle:{
|
||
// color: '#ccc'
|
||
// }
|
||
// }
|
||
// ],
|
||
// visualMap: {
|
||
// min: 0,
|
||
// max: 300,
|
||
// inRange: {
|
||
// symbolSize: [30, 100],
|
||
// color: ['white', 'red'] // 控制颜色渐变的范围
|
||
// },
|
||
// calculable: true // 出现滑块
|
||
// }
|
||
// };
|
||
|
||
|
||
|
||
|
||
var optionsrc = {
|
||
geo: {
|
||
map: 'china1',
|
||
roam: true,
|
||
},
|
||
series: [
|
||
{
|
||
name: 'pm2.5',
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
select:false,
|
||
silent :true,
|
||
data: [
|
||
{
|
||
name: 'test',
|
||
value: [121.113747, 22.285694],
|
||
symbol: 'image://http://192.168.4.109:5501/images/boundary_three.png',
|
||
symbolSize: 100,
|
||
},
|
||
{
|
||
name: 'test',
|
||
value: [128.113747, 20.8],
|
||
symbol: 'image://http://192.168.4.109:5501/images/boundary_attach.png',
|
||
symbolSize: 65,
|
||
}
|
||
],
|
||
|
||
// encode: {
|
||
// value: 2
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true
|
||
// }
|
||
// }
|
||
}
|
||
]
|
||
}
|
||
let option = {
|
||
|
||
geo: {
|
||
map: "china1",
|
||
center: [105.194115019531, 35.582111640625],
|
||
aspectScale: 0.75, //长宽比
|
||
zoom:1.1,
|
||
roam: false,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#013C62",
|
||
shadowColor:"#01273F",
|
||
shadowOffsetX:0,
|
||
shadowOffsetY:10
|
||
},
|
||
emphasis: {
|
||
label:{
|
||
show:false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: "map",
|
||
map: "china1",
|
||
center: [105.194115019531, 35.582111640625],
|
||
zoom:1.1,
|
||
// geoIndex: 1,
|
||
aspectScale: 0.75, //长宽比
|
||
roam: false,
|
||
emphasis: {
|
||
label:{
|
||
show:false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: "#013C62",
|
||
borderColor: "#0A5E96",
|
||
borderWidth: 2
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
//option定义
|
||
let option3d = {
|
||
tooltip: {
|
||
show: false,
|
||
formatter: (params) => {
|
||
return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
|
||
<div class='tips' style="padding:0 12px;">
|
||
<h1 style='font-size:16px;'>${params.name}</h1>
|
||
<p style="font-size:14px;"><span style="opacity:0.75">办理人数：</span>22人</p>
|
||
<p style="font-size:14px;"><span style="opacity:0.75">待办人数：</span>22人</p>
|
||
<p style="font-size:14px;"><span style="opacity:0.75">办结人数：</span>22人</p>
|
||
</div>`;
|
||
},
|
||
borderColor: "#998484",
|
||
borderWidth: 1,
|
||
padding: [0, 0],
|
||
backgroundColor: "#1B212B",
|
||
borderRadius: 0,
|
||
// textStyle: { color: "blue" },
|
||
},
|
||
visualMap: {
|
||
show: true,
|
||
min: 1, //指定 visualMapContinuous 组件的允许的最小值。
|
||
max: 9, //指定 visualMapContinuous 组件的允许的最大值
|
||
inRange: {
|
||
color: ["#074b4f"],
|
||
},
|
||
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
|
||
},
|
||
series: {
|
||
name: "浙江",
|
||
type: "map3D",
|
||
map: 'china1', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
||
regionHeight: 2, //模型的高度
|
||
boxWidth: 100, //三维地图在三维场景中的宽度
|
||
//boxHeight:50,
|
||
boxDepth: 65, //三维地图在三维场景中的深度
|
||
// top: "10%",
|
||
//left:'10%',
|
||
// 配置为垂直渐变的背景
|
||
environment: 'images/53bg.png',
|
||
groundPlane:{
|
||
show:false
|
||
},
|
||
label: {
|
||
show: false, //是否显示标签。
|
||
position: ["50%", "50%"],
|
||
formatter: (params) => {
|
||
params.name;
|
||
},
|
||
textStyle: {
|
||
color: "rgba(255,255,255,0.65)", //地图初始化区域字体颜色
|
||
fontSize: 16,
|
||
opacity: 1,
|
||
backgroundColor: "#1B212B ",
|
||
borderColor: "#998484",
|
||
borderWidth: 1,
|
||
position: "insideTop",
|
||
padding: [6, 8],
|
||
borderRadius: 0,
|
||
distanca: 20,
|
||
},
|
||
|
||
emphasis: {
|
||
//对应的鼠标悬浮效果
|
||
show: true,
|
||
// textStyle: { color: "blue" }
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
// 静态模式下显示的默认样式
|
||
borderWidth: 1,
|
||
borderColor: "#21cac7",
|
||
color: "#0e838b",
|
||
}, //阴影效果
|
||
emphasis: {
|
||
// 鼠标移上去的样式
|
||
borderWidth: 1.6,
|
||
borderColor: "#95FFFF",
|
||
color: "#108f97",
|
||
textStyle: {
|
||
// color:'blue'
|
||
},
|
||
},
|
||
},
|
||
data:[
|
||
{
|
||
name:'广东',
|
||
itemStyle:{
|
||
// 静态模式下显示的默认样式
|
||
borderWidth: 1.5,
|
||
borderColor: "#fff",
|
||
color: "#fff",
|
||
opacity :0.5
|
||
}
|
||
}
|
||
],
|
||
|
||
viewControl: {
|
||
//用于鼠标的旋转，缩放等视角控制。
|
||
autoRotate: false, //是否开启视角绕物体的自动旋转查看
|
||
distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
||
},
|
||
},
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
});
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |