437 lines
12 KiB
Vue
437 lines
12 KiB
Vue
|
<template>
|
|||
|
|
|
|||
|
|
<div style="width: 45vw;height: 50vh;" id="chart2">
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% {
|
|||
|
|
transform: rotateY(0deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: rotateY(360deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img4 {
|
|||
|
|
width: 45VW;
|
|||
|
|
height: 50vh;
|
|||
|
|
transform-origin: center center;
|
|||
|
|
// transform: rotateX(45deg);
|
|||
|
|
// animation: spin 2s linear infinite;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from "vue"
|
|||
|
|
import axios from "axios";
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
import "echarts-gl"
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
|
|||
|
|
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
|
|||
|
|
.then(function (response) {
|
|||
|
|
let geoJson = response.data
|
|||
|
|
const dot = document.getElementById('img')
|
|||
|
|
var mapName = 'lz';
|
|||
|
|
var geoCoordMap = {
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let data = [
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
name: "成都市",
|
|||
|
|
value: 12,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: {
|
|||
|
|
image: document.getElementById("img"),
|
|||
|
|
repeat: 'no-repeat'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "眉山市",
|
|||
|
|
value: 12,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: {
|
|||
|
|
image: document.getElementById("img"),
|
|||
|
|
repeat: 'no-repeat'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "雅安市",
|
|||
|
|
value: 12,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: {
|
|||
|
|
image: document.getElementById("img"),
|
|||
|
|
repeat: 'no-repeat'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
const myChart = document.getElementById("chart2")
|
|||
|
|
/*获取地图数据*/
|
|||
|
|
var mapFeatures = geoJson.features;
|
|||
|
|
mapFeatures.forEach(function (v) {
|
|||
|
|
// 地区名称
|
|||
|
|
var name = v.properties.name;
|
|||
|
|
// 地区经纬度
|
|||
|
|
geoCoordMap[name] = v.properties.cp;
|
|||
|
|
});
|
|||
|
|
// console.log(dot)
|
|||
|
|
let option = {
|
|||
|
|
visualMap: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
show: true,
|
|||
|
|
|
|||
|
|
// textStyle: {
|
|||
|
|
// color: "#fff",
|
|||
|
|
// fontFamily: "等线",
|
|||
|
|
// fontSize: 18,
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'none',
|
|||
|
|
formatter: function (params) {
|
|||
|
|
if (typeof params.value[2] == 'undefined') {
|
|||
|
|
var toolTiphtml = '';
|
|||
|
|
for (var i = 0; i < toolTipData.length; i++) {
|
|||
|
|
if (params.name == toolTipData[i].name) {
|
|||
|
|
toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log(toolTiphtml);
|
|||
|
|
// console.log(convertData(data))
|
|||
|
|
return toolTiphtml;
|
|||
|
|
} else {
|
|||
|
|
var toolTiphtml = '';
|
|||
|
|
for (var i = 0; i < toolTipData.length; i++) {
|
|||
|
|
if (params.name == toolTipData[i].name) {
|
|||
|
|
toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log(toolTiphtml);
|
|||
|
|
|
|||
|
|
return toolTiphtml;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
borderColor: "#333",
|
|||
|
|
padding: [5, 10],
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#333",
|
|||
|
|
fontSize: "16"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
geo: [
|
|||
|
|
{
|
|||
|
|
layoutSize: '100%',//大小
|
|||
|
|
show: true,
|
|||
|
|
map: mapName,
|
|||
|
|
backgroundColor: {
|
|||
|
|
color: {
|
|||
|
|
image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
|
|||
|
|
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
roam: false,
|
|||
|
|
zoom: 1.2,
|
|||
|
|
layoutCenter: ["50%", "50%"],
|
|||
|
|
aspectScale: 1,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
areaColor: {
|
|||
|
|
type: "linear",
|
|||
|
|
x: 1200,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgba(3,27,78,0.75)", // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(58,149,253,0.75)", // 50% 处的颜色
|
|||
|
|
},],
|
|||
|
|
global: true, // 缺省为 false
|
|||
|
|
},
|
|||
|
|
borderColor: "#D2F2FC",
|
|||
|
|
borderWidth: 2,
|
|||
|
|
shadowColor: "#8cd3ef",
|
|||
|
|
shadowOffsetY: 10,
|
|||
|
|
shadowBlur: 120,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// {
|
|||
|
|
// type: "map",
|
|||
|
|
// map: mapName,
|
|||
|
|
// zlevel: -1,
|
|||
|
|
// aspectScale: 1,
|
|||
|
|
// zoom: 1.2,
|
|||
|
|
// layoutCenter: ["50%", "51%"],
|
|||
|
|
// layoutSize: "100%",
|
|||
|
|
// roam: false,
|
|||
|
|
// silent: true,
|
|||
|
|
// regions: [
|
|||
|
|
// {
|
|||
|
|
// name: "南海诸岛",
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // 隐藏地图
|
|||
|
|
// normal: {
|
|||
|
|
// opacity: 0, // 为 0 时不绘制该图形
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// show: false // 隐藏文字
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// borderWidth: 1,
|
|||
|
|
// borderColor: "rgba(17, 149, 216,0.6)",
|
|||
|
|
// borderColor: "#5AD0E0",
|
|||
|
|
// shadowColor: "rgba(172, 122, 255,0.5)",
|
|||
|
|
// shadowOffsetY: 5,
|
|||
|
|
// shadowBlur: 15,
|
|||
|
|
// areaColor: "rgba(5,21,35,0.1)",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// type: "map",
|
|||
|
|
// map: mapName,
|
|||
|
|
// zlevel: -2,
|
|||
|
|
// aspectScale: 1,
|
|||
|
|
// zoom: 1.2,
|
|||
|
|
// layoutCenter: ["50%", "52%"],
|
|||
|
|
// layoutSize: "100%",
|
|||
|
|
// roam: false,
|
|||
|
|
// silent: true,
|
|||
|
|
// regions: [
|
|||
|
|
// {
|
|||
|
|
// name: "南海诸岛",
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // 隐藏地图
|
|||
|
|
// normal: {
|
|||
|
|
// opacity: 0, // 为 0 时不绘制该图形
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// show: false // 隐藏文字
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// borderWidth: 1,
|
|||
|
|
// // borderColor: "rgba(57, 132, 188,0.4)",
|
|||
|
|
// borderColor: "#1C75C8",
|
|||
|
|
// shadowColor: "rgba(65, 214, 255,1)",
|
|||
|
|
// shadowOffsetY: 5,
|
|||
|
|
// shadowBlur: 15,
|
|||
|
|
// areaColor: "transpercent",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// {
|
|||
|
|
// type: "map",
|
|||
|
|
// map: mapName,
|
|||
|
|
// zlevel: -3,
|
|||
|
|
// aspectScale: 1,
|
|||
|
|
// zoom: 1.2,
|
|||
|
|
// layoutCenter: ["50%", "53%"],
|
|||
|
|
// layoutSize: "101%",
|
|||
|
|
// roam: false,
|
|||
|
|
// silent: true,
|
|||
|
|
// regions: [
|
|||
|
|
// {
|
|||
|
|
// name: "南海诸岛",
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // 隐藏地图
|
|||
|
|
// normal: {
|
|||
|
|
// opacity: 0, // 为 0 时不绘制该图形
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// show: false // 隐藏文字
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// borderWidth: 1,
|
|||
|
|
// // borderColor: "rgba(11, 43, 97,0.8)",
|
|||
|
|
// borderColor: "rgba(58,149,253,0.4)",
|
|||
|
|
// shadowColor: "rgba(58,149,253,1)",
|
|||
|
|
// shadowOffsetY: 15,
|
|||
|
|
// shadowBlur: 10,
|
|||
|
|
// areaColor: "transpercent",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// type: "map",
|
|||
|
|
// map: mapName,
|
|||
|
|
// zlevel: -4,
|
|||
|
|
// aspectScale: 1,
|
|||
|
|
// zoom: 1.2,
|
|||
|
|
// layoutCenter: ["50%", "54%"],
|
|||
|
|
// layoutSize: "103%",
|
|||
|
|
// roam: false,
|
|||
|
|
// silent: true,
|
|||
|
|
// regions: [
|
|||
|
|
// {
|
|||
|
|
// name: "南海诸岛",
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // 隐藏地图
|
|||
|
|
// normal: {
|
|||
|
|
// opacity: 0, // 为 0 时不绘制该图形
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// show: false // 隐藏文字
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// borderWidth: 5,
|
|||
|
|
// // borderColor: "rgba(11, 43, 97,0.8)",
|
|||
|
|
// borderColor: "rgba(5,9,57,0.8)",
|
|||
|
|
// shadowColor: "rgba(29, 111, 165,0.8)",
|
|||
|
|
// shadowOffsetY: 15,
|
|||
|
|
// shadowBlur: 10,
|
|||
|
|
// areaColor: "rgba(5,21,35,0.1)",
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'map',
|
|||
|
|
map: mapName,
|
|||
|
|
geoIndex: 0,
|
|||
|
|
aspectScale: 1, //长宽比
|
|||
|
|
zoom: 0.65,
|
|||
|
|
showLegendSymbol: true,
|
|||
|
|
roam: true,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: "120%"
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
// show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// areaColor: {
|
|||
|
|
// type: "linear",
|
|||
|
|
// x: 1200,
|
|||
|
|
// y: 0,
|
|||
|
|
// x2: 0,
|
|||
|
|
// y2: 0,
|
|||
|
|
// colorStops: [{
|
|||
|
|
// offset: 0,
|
|||
|
|
// color: "rgba(3,27,78,0.75)", // 0% 处的颜色
|
|||
|
|
// }, {
|
|||
|
|
// offset: 1,
|
|||
|
|
// color: "rgba(58,149,253,0.75)", // 50% 处的颜色
|
|||
|
|
// },],
|
|||
|
|
// global: true, // 缺省为 false
|
|||
|
|
// },
|
|||
|
|
// borderColor: "#fff",
|
|||
|
|
// borderWidth: 0.2,
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
layoutCenter: ["50%", "50%"],
|
|||
|
|
layoutSize: "180%",
|
|||
|
|
animation: true,
|
|||
|
|
markPoint: {
|
|||
|
|
symbol: "none"
|
|||
|
|
},
|
|||
|
|
data: data,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
echarts.registerMap(mapName, geoJson)
|
|||
|
|
const bg = echarts.init(myChart)
|
|||
|
|
bg.setOption(option);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
#chart2{
|
|||
|
|
transform: rotateX(20deg);
|
|||
|
|
}
|
|||
|
|
</style>
|