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> |