205 lines
8.9 KiB
Vue
205 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<div class="container">
|
|||
|
|
<div id="main" class="chart-container">dasd</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
import 'echarts-gl';
|
|||
|
|
export default {
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
myChart:null,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
shapeChart(mapName,boundaryName){
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
if(!this.myChart){
|
|||
|
|
this.myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
}
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
let option = {
|
|||
|
|
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: false,
|
|||
|
|
min: 1, //指定 visualMapContinuous 组件的允许的最小值。
|
|||
|
|
max: 9, //指定 visualMapContinuous 组件的允许的最大值
|
|||
|
|
inRange: {
|
|||
|
|
color: ["#074b4f"],
|
|||
|
|
},
|
|||
|
|
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: boundaryName,
|
|||
|
|
type: "map3D",
|
|||
|
|
map: boundaryName, //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
|||
|
|
zlevel:1,
|
|||
|
|
regionHeight: 1, //模型的高度
|
|||
|
|
boxWidth: 100, //三维地图在三维场景中的宽度
|
|||
|
|
//boxHeight:50,
|
|||
|
|
boxDepth: 65, //三维地图在三维场景中的深度
|
|||
|
|
label: {
|
|||
|
|
show: false, //是否显示标签。
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 静态模式下显示的默认样式
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: "#1dc7c6",
|
|||
|
|
color: [0,0,0,0],
|
|||
|
|
}, //阴影效果
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
// 鼠标移上去的样式
|
|||
|
|
borderWidth: 2,
|
|||
|
|
borderColor: "#1dc7c6",
|
|||
|
|
color: [0,0,0,0],
|
|||
|
|
textStyle: {
|
|||
|
|
// color:'blue'
|
|||
|
|
},
|
|||
|
|
label:{
|
|||
|
|
show:false
|
|||
|
|
},
|
|||
|
|
itemStyle:{
|
|||
|
|
color:[0,0,0,0]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
viewControl: {
|
|||
|
|
center:[0,0,0],//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
|
|||
|
|
//用于鼠标的旋转，缩放等视角控制。
|
|||
|
|
autoRotate: false, //是否开启视角绕物体的自动旋转查看
|
|||
|
|
distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
alpha:65,//视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
|
|||
|
|
beta:0,//视角绕 y 轴，即左右旋转的角度。
|
|||
|
|
distance:120,//默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: mapName,
|
|||
|
|
type: "map3D",
|
|||
|
|
zlevel:2,
|
|||
|
|
map: mapName, //地图类型。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: false,
|
|||
|
|
// // textStyle: { color: "blue" }
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 静态模式下显示的默认样式
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: "#21cac7",
|
|||
|
|
color: "#0e838b",
|
|||
|
|
}, //阴影效果
|
|||
|
|
emphasis: {
|
|||
|
|
// 鼠标移上去的样式
|
|||
|
|
borderWidth: 1.6,
|
|||
|
|
borderColor: "#95FFFF",
|
|||
|
|
color: "#108f97",
|
|||
|
|
textStyle: {
|
|||
|
|
// color:'blue'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
viewControl: {
|
|||
|
|
center:[0,0,0],//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
|
|||
|
|
//用于鼠标的旋转，缩放等视角控制。
|
|||
|
|
autoRotate: false, //是否开启视角绕物体的自动旋转查看
|
|||
|
|
distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
alpha:65,//视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
|
|||
|
|
beta:0,//视角绕 y 轴，即左右旋转的角度。
|
|||
|
|
distance:120,//默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
this.myChart.setOption(option);
|
|||
|
|
},
|
|||
|
|
initChart(){
|
|||
|
|
let url = "/data/gd.json";
|
|||
|
|
let url1 = "/data/gd_item.json";
|
|||
|
|
let promiseArr = [];
|
|||
|
|
promiseArr.push(fetch(url).then(res=>res.json()))
|
|||
|
|
promiseArr.push(fetch(url1).then(res=>res.json()))
|
|||
|
|
Promise.allSettled(promiseArr).then((result)=>{
|
|||
|
|
//在echarts中注册地图矢量数据
|
|||
|
|
echarts.registerMap('gd',result[0].value);
|
|||
|
|
echarts.registerMap('gdItem',result[1].value);
|
|||
|
|
this.shapeChart('gd','gdItem');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initChart();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang='stylus' scoped>
|
|||
|
|
.container{
|
|||
|
|
display flex
|
|||
|
|
justify-content center
|
|||
|
|
align-content center
|
|||
|
|
}
|
|||
|
|
.chart-container{
|
|||
|
|
width 100%
|
|||
|
|
height 80vh
|
|||
|
|
}
|
|||
|
|
</style>
|