|
|
@@ -1,294 +1,439 @@
|
|
|
<template>
|
|
|
<div class="W-full pr30 pl30 pt30 bg-green">
|
|
|
<div class="mr-auto ml-auto w877 relative bg-black">
|
|
|
- <!-- <img
|
|
|
+ <img
|
|
|
id="bg"
|
|
|
style="width: 877px; height: 866px"
|
|
|
src="http://www.bigemap.com/map_source/satel/small/14.png"
|
|
|
- /> -->
|
|
|
+ />
|
|
|
<canvas width="877" height="968" id="fuzhou"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { defineComponent, onMounted } from "vue";
|
|
|
-// import api from "@/api";
|
|
|
-// import router from "@/router";
|
|
|
-// import fuzhou_full from "@/assets/json/福州市v2_full.json";
|
|
|
-// import fujian_full from "@/assets/json/福建省v3_full.json";
|
|
|
-// import fujian from "@/assets/json/福建省v3.json";
|
|
|
-// import echarts from "echarts";
|
|
|
-// import img149 from "@/assets/img/about/149.png";
|
|
|
-// // import echarts from 'echarts'
|
|
|
-// const logOut = () => {
|
|
|
-// api.login.logout().then((res) => {
|
|
|
-// router.push("/login");
|
|
|
-// });
|
|
|
-// };
|
|
|
-// const renderMap = () => {
|
|
|
-// var imageDom = document.createElement("img");
|
|
|
-// imageDom.src = "http://www.bigemap.com/map_source/satel/small/14.png";
|
|
|
-// echarts.registerMap("fujian", fujian);
|
|
|
-// echarts.registerMap("fuzhou_full", fuzhou_full);
|
|
|
-// echarts.registerMap("fujian_full", fujian_full);
|
|
|
-// let Chart = echarts.init(document.getElementById("fuzhou"));
|
|
|
-// // 颜色或文字的配置
|
|
|
-// let option = {
|
|
|
-// geo: [
|
|
|
-// {
|
|
|
-// type: "map",
|
|
|
-// aspectScale: 1, // 横向拉伸
|
|
|
-// zlevel: 3,
|
|
|
-// tooltip: {},
|
|
|
-// zoom: 1, //缩放比例
|
|
|
-// roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
-// map: "fujian_full",
|
|
|
-// nameMap: "福建地图",
|
|
|
-// label: {
|
|
|
-// show: true,
|
|
|
-// normal: {
|
|
|
-// show: true, // 默认地图文字字号和字体颜色
|
|
|
-// fontSize: 10,
|
|
|
-// color: "#ffffff",
|
|
|
-// },
|
|
|
-// emphasis: {
|
|
|
-// show: true,
|
|
|
-// fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
-// color: "rgba(0,0,0,0)",
|
|
|
-// },
|
|
|
-// },
|
|
|
-// itemStyle: {
|
|
|
-// normal: {
|
|
|
-// areaColor: "transparent",
|
|
|
-// borderWidth: 2,
|
|
|
-// borderColor: "#fff",
|
|
|
-// shadowColor: {
|
|
|
-// type: "linear",
|
|
|
-// x: 0,
|
|
|
-// y: 0,
|
|
|
-// x2: 0,
|
|
|
-// y2: 1,
|
|
|
-// colorStops: [
|
|
|
-// {
|
|
|
-// offset: 0,
|
|
|
-// color: "red", // 0% 处的颜色
|
|
|
-// },
|
|
|
-// {
|
|
|
-// offset: 1,
|
|
|
-// color: "blue", // 100% 处的颜色
|
|
|
-// },
|
|
|
-// ],
|
|
|
-// global: false, // 缺省为 false
|
|
|
-// },
|
|
|
-// shadowOffsetY: 4,
|
|
|
-// shadowBlur: 1,
|
|
|
-// },
|
|
|
-// emphasis: {
|
|
|
-// areaColor: "rgba(29,166,176,0)",
|
|
|
-// borderWidth: 0,
|
|
|
-// },
|
|
|
-// },
|
|
|
+import api from "@/api";
|
|
|
+import router from "@/router";
|
|
|
+import fuzhou_full from "@/assets/json/福州市v2_full.json";
|
|
|
+import fujian_full from "@/assets/json/福建省v3_full.json";
|
|
|
+import fujian from "@/assets/json/福建省v3.json";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import img149 from "@/assets/img/about/149.png";
|
|
|
+// import echarts from 'echarts'
|
|
|
+const logOut = () => {
|
|
|
+ api.login.logout().then((res) => {
|
|
|
+ router.push("/login");
|
|
|
+ });
|
|
|
+};
|
|
|
+const renderMap = () => {
|
|
|
+ var imageDom = document.createElement("img");
|
|
|
+ imageDom.src = "http://www.bigemap.com/map_source/satel/small/14.png";
|
|
|
+ echarts.registerMap("fujian", fujian as any);
|
|
|
+ echarts.registerMap("fuzhou_full", fuzhou_full as any);
|
|
|
+ echarts.registerMap("fujian_full", fujian_full as any);
|
|
|
+ let Chart = echarts.init(document.getElementById("fuzhou") as HTMLElement);
|
|
|
+ // 颜色或文字的配置
|
|
|
+ let option = {
|
|
|
+ geo: [
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ aspectScale: 1, // 横向拉伸
|
|
|
+ zlevel: 3,
|
|
|
+ tooltip: {},
|
|
|
+ zoom: 1.01, //缩放比例
|
|
|
+ roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ map: "fujian_full",
|
|
|
+ nameMap: "福建地图",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ normal: {
|
|
|
+ show: false, // 默认地图文字字号和字体颜色
|
|
|
+ fontSize: 10,
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: "transparent",
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: "#fff",
|
|
|
+
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: "rgba(29,166,176,0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutSize: 877,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ textFixed: {
|
|
|
+ Alaska: [20, -20],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: 2,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian_full",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // normal: {
|
|
|
+ // show: true, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // areaColor: "rgba(0,0,0,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // borderColor: "#fff",
|
|
|
+ // shadowColor: "rgba(29,166,176,0.65)",
|
|
|
+ // shadowOffsetY: 8,
|
|
|
+ // shadowBlur: 1,
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
|
|
|
-// layoutCenter: ["50%", "44.5%"],
|
|
|
-// layoutSize: 877,
|
|
|
-// top: 0,
|
|
|
-// left: 0,
|
|
|
-// textFixed: {
|
|
|
-// Alaska: [20, -20],
|
|
|
-// },
|
|
|
-// },
|
|
|
-// // {
|
|
|
-// // type: "map",
|
|
|
-// // aspectScale: 1, // 横向拉伸
|
|
|
-// // zlevel: 2,
|
|
|
-// // tooltip: {},
|
|
|
-// // zoom: 1, //缩放比例
|
|
|
-// // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
-// // map: "fujian_full",
|
|
|
-// // nameMap: "福建地图",
|
|
|
-// // label: {
|
|
|
-// // show: true,
|
|
|
-// // normal: {
|
|
|
-// // show: true, // 默认地图文字字号和字体颜色
|
|
|
-// // fontSize: 10,
|
|
|
-// // color: "#ffffff",
|
|
|
-// // },
|
|
|
-// // emphasis: {
|
|
|
-// // show: true,
|
|
|
-// // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
-// // color: "rgba(0,0,0,0)",
|
|
|
-// // },
|
|
|
-// // },
|
|
|
-// // itemStyle: {
|
|
|
-// // normal: {
|
|
|
-// // areaColor: "rgba(0,0,0,0)",
|
|
|
-// // borderWidth: 0,
|
|
|
-// // borderColor: "#fff",
|
|
|
-// // shadowColor: "rgba(29,166,176,0.65)",
|
|
|
-// // shadowOffsetY: 8,
|
|
|
-// // shadowBlur: 1,
|
|
|
-// // },
|
|
|
-// // emphasis: {
|
|
|
-// // areaColor: "rgba(29,166,176,0)",
|
|
|
-// // borderWidth: 0,
|
|
|
-// // },
|
|
|
-// // },
|
|
|
+ // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ aspectScale: 1, // 横向拉伸
|
|
|
+ zlevel: 1,
|
|
|
+ tooltip: {},
|
|
|
+ zoom: 1.01, //缩放比例
|
|
|
+ roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ map: "fujian_full",
|
|
|
+ nameMap: "福建地图",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ normal: {
|
|
|
+ show: false, // 默认地图文字字号和字体颜色
|
|
|
+ fontSize: 10,
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: "rgba(29,166,176,0.55)",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ areaColor: "rgba(29,166,176,0)",
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
-// // layoutCenter: ["50%", "44.5%"],
|
|
|
-// // layoutSize: 877,
|
|
|
-// // top: 0,
|
|
|
-// // left: 0,
|
|
|
-// // textFixed: {
|
|
|
-// // Alaska: [20, -20],
|
|
|
-// // },
|
|
|
-// // },
|
|
|
-// {
|
|
|
-// type: "map",
|
|
|
-// aspectScale: 1, // 横向拉伸
|
|
|
-// zlevel: 1,
|
|
|
-// tooltip: {},
|
|
|
-// zoom: 1.01, //缩放比例
|
|
|
-// roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
-// map: "fujian_full",
|
|
|
-// nameMap: "福建地图",
|
|
|
-// label: {
|
|
|
-// show: true,
|
|
|
-// normal: {
|
|
|
-// show: true, // 默认地图文字字号和字体颜色
|
|
|
-// fontSize: 10,
|
|
|
-// color: "#ffffff",
|
|
|
-// },
|
|
|
-// emphasis: {
|
|
|
-// show: true,
|
|
|
-// fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
-// color: "rgba(0,0,0,0)",
|
|
|
-// },
|
|
|
-// },
|
|
|
-// itemStyle: {
|
|
|
-// normal: {
|
|
|
-// areaColor: "rgba(29,166,176,0.55)",
|
|
|
-// borderWidth: 0,
|
|
|
-// borderColor: "#fff",
|
|
|
-// shadowColor: "rgba(29,166,176,0.75)",
|
|
|
-// shadowOffsetY: 8,
|
|
|
-// shadowOffsetX:4,
|
|
|
-// shadowBlur: 2,
|
|
|
-// },
|
|
|
-// emphasis: {
|
|
|
-// areaColor: "rgba(29,166,176,0)",
|
|
|
-// borderWidth: 0,
|
|
|
-// },
|
|
|
-// },
|
|
|
+ layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutSize: 877,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ textFixed: {
|
|
|
+ Alaska: [20, -20],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //重影子
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ aspectScale: 1, // 横向拉伸
|
|
|
+ zlevel: -1,
|
|
|
+ tooltip: {},
|
|
|
+ zoom: 1.01, //缩放比例
|
|
|
+ roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ map: "fujian_full",
|
|
|
+ nameMap: "福建地图",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ normal: {
|
|
|
+ show: false, // 默认地图文字字号和字体颜色
|
|
|
+ fontSize: 10,
|
|
|
+ color: "#ffffff",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ color: "rgba(0,0,0,0)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 10,
|
|
|
+ borderColor: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(29,166,176,0.55)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(29,166,176,0.55)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ ],
|
|
|
+ globalCoord:true
|
|
|
+
|
|
|
+ },
|
|
|
+ areaColor:"rgba(255,255,255,0)",
|
|
|
+ shadowColor: "rgba(255, 255, 255,1)",
|
|
|
+ shadowOffsetY: 4,
|
|
|
+ shadowBlur: 0,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
-// layoutCenter: ["50%", "44.5%"],
|
|
|
-// layoutSize: 877,
|
|
|
-// top: 0,
|
|
|
-// left: 0,
|
|
|
-// textFixed: {
|
|
|
-// Alaska: [20, -20],
|
|
|
-// },
|
|
|
-// },
|
|
|
+ layoutCenter: ["50%", "44.5%"],
|
|
|
+ layoutSize: 877,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ textFixed: {
|
|
|
+ Alaska: [20, -20],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: -2,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1.01, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian_full",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // normal: {
|
|
|
+ // show: false, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: false,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // borderWidth: 15,
|
|
|
+ // borderColor: "#fff",
|
|
|
+ // areaColor:"rgba(255,255,255,0)",
|
|
|
+ // shadowColor: "rgba(0, 0, 0,0.5)",
|
|
|
+ // shadowOffsetY: 5,
|
|
|
+ // shadowBlur: 15,
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+
|
|
|
+ // },
|
|
|
+ // },
|
|
|
|
|
|
-// // {
|
|
|
-// // type: "map",
|
|
|
-// // aspectScale: 1, // 横向拉伸
|
|
|
-// // zlevel: -2,
|
|
|
-// // tooltip: {},
|
|
|
-// // zoom: 1, //缩放比例
|
|
|
-// // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
-// // map: "fujian_full",
|
|
|
-// // nameMap: "福建地图",
|
|
|
-// // label: {
|
|
|
-// // show: true,
|
|
|
-// // normal: {
|
|
|
-// // show: true, // 默认地图文字字号和字体颜色
|
|
|
-// // fontSize: 10,
|
|
|
-// // color: "#ffffff",
|
|
|
-// // },
|
|
|
-// // emphasis: {
|
|
|
-// // show: true,
|
|
|
-// // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
-// // color: "rgba(0,0,0,0)",
|
|
|
-// // },
|
|
|
-// // },
|
|
|
-// // itemStyle: {
|
|
|
-// // normal: {
|
|
|
-// // areaColor: "rgba(29,166,176,0)",
|
|
|
-// // borderWidth: 0,
|
|
|
-// // borderColor: "#fff",
|
|
|
-// // shadowColor: "rgba(29,166,176,0.95)",
|
|
|
-// // shadowOffsetY: 20,
|
|
|
-// // shadowBlur: 0,
|
|
|
-// // },
|
|
|
-// // emphasis: {
|
|
|
-// // areaColor: "rgba(29,166,176,0)",
|
|
|
-// // borderWidth: 0,
|
|
|
-// // },
|
|
|
-// // },
|
|
|
+ // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: 0,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1.01, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian_full",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // normal: {
|
|
|
+ // show: false, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: false,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // borderWidth: 4,
|
|
|
+ // borderColor: {
|
|
|
+ // type: "linear",
|
|
|
+ // x: 0,
|
|
|
+ // y: 0,
|
|
|
+ // x2: 0,
|
|
|
+ // y2: 1,
|
|
|
+ // colorStops: [
|
|
|
+ // {
|
|
|
+ // offset: 0,
|
|
|
+ // color: "#20a2e1", // 0% 处的颜色
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 0.8,
|
|
|
+ // color: "#085473", // 0% 处的颜色
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: "#054660", // 50% 处的颜色
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // shadowColor: "rgba(172, 122, 255,0.5)",
|
|
|
+ // shadowOffsetY: 5,
|
|
|
+ // shadowBlur: 15,
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
|
|
|
-// // layoutCenter: ["50%", "44.5%"],
|
|
|
-// // layoutSize: 877,
|
|
|
-// // top: 0,
|
|
|
-// // left: 0,
|
|
|
-// // textFixed: {
|
|
|
-// // Alaska: [20, -20],
|
|
|
-// // },
|
|
|
-// // },
|
|
|
-// ],
|
|
|
-// series: [
|
|
|
-// {
|
|
|
-// type: "scatter",
|
|
|
-// zlevel: 99,
|
|
|
-// coordinateSystem: "geo",
|
|
|
-// symbol: "pin",
|
|
|
-// legendHoverLink: true,
|
|
|
-// symbolSize: [60, 60],
|
|
|
-// // 这里渲染标志里的内容以及样式
|
|
|
-// label: {
|
|
|
-// show: true,
|
|
|
-// formatter(value) {
|
|
|
-// return value.data.value[2];
|
|
|
-// },
|
|
|
-// color: "#fff",
|
|
|
-// },
|
|
|
-// // 标志的样式
|
|
|
-// itemStyle: {
|
|
|
-// normal: {
|
|
|
-// color: "rgba(255,0,0,1)",
|
|
|
-// shadowBlur: 2,
|
|
|
-// shadowColor: "D8BC37",
|
|
|
-// },
|
|
|
-// },
|
|
|
-// // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
|
|
|
-// // 至于如何展示，完全是靠上面的formatter来自己定义的
|
|
|
-// data: [
|
|
|
-// { name: "西藏", value: [91.23, 29.5, 2333] },
|
|
|
-// { name: "黑龙江", value: [128.03, 47.01, 1007] },
|
|
|
-// { name: "福州", value: [119.1747, 26.0427, 1007] },
|
|
|
-// ],
|
|
|
-// showEffectOn: "render",
|
|
|
-// rippleEffect: {
|
|
|
-// brushType: "stroke",
|
|
|
-// },
|
|
|
-// hoverAnimation: true,
|
|
|
-// },
|
|
|
-// ],
|
|
|
-// };
|
|
|
-// Chart.setOption(option);
|
|
|
-// };
|
|
|
+ // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "map",
|
|
|
+ // aspectScale: 1, // 横向拉伸
|
|
|
+ // zlevel: -2,
|
|
|
+ // tooltip: {},
|
|
|
+ // zoom: 1, //缩放比例
|
|
|
+ // roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
|
|
|
+ // map: "fujian_full",
|
|
|
+ // nameMap: "福建地图",
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // normal: {
|
|
|
+ // show: true, // 默认地图文字字号和字体颜色
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: true,
|
|
|
+ // fontSize: 10, // 选中地图文字字号和字体颜色
|
|
|
+ // color: "rgba(0,0,0,0)",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // borderColor: "#fff",
|
|
|
+ // shadowColor: "rgba(29,166,176,0.95)",
|
|
|
+ // shadowOffsetY: 20,
|
|
|
+ // shadowBlur: 0,
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // areaColor: "rgba(29,166,176,0)",
|
|
|
+ // borderWidth: 0,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+
|
|
|
+ // layoutCenter: ["50%", "44.5%"],
|
|
|
+ // layoutSize: 877,
|
|
|
+ // top: 0,
|
|
|
+ // left: 0,
|
|
|
+ // textFixed: {
|
|
|
+ // Alaska: [20, -20],
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "scatter",
|
|
|
+ zlevel: 99,
|
|
|
+ coordinateSystem: "geo",
|
|
|
+ symbol: "pin",
|
|
|
+ legendHoverLink: true,
|
|
|
+ symbolSize: [60, 60],
|
|
|
+ // 这里渲染标志里的内容以及样式
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter(value) {
|
|
|
+ return value.data.value[2];
|
|
|
+ },
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ // 标志的样式
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "rgba(255,0,0,1)",
|
|
|
+ shadowBlur: 2,
|
|
|
+ shadowColor: "D8BC37",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
|
|
|
+ // 至于如何展示，完全是靠上面的formatter来自己定义的
|
|
|
+ data: [
|
|
|
+ { name: "西藏", value: [91.23, 29.5, 2333] },
|
|
|
+ { name: "黑龙江", value: [128.03, 47.01, 1007] },
|
|
|
+ { name: "福州", value: [119.1747, 26.0427, 1007] },
|
|
|
+ ],
|
|
|
+ showEffectOn: "render",
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: "stroke",
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ Chart.setOption(option);
|
|
|
+};
|
|
|
|
|
|
export default defineComponent({
|
|
|
setup() {
|
|
|
- // onMounted(() => {
|
|
|
- // console.log("123");
|
|
|
- // renderMap();
|
|
|
- // });
|
|
|
- // return {
|
|
|
- // logOut,
|
|
|
- // renderMap,
|
|
|
- // img149,
|
|
|
- // };
|
|
|
- return {}
|
|
|
+ onMounted(() => {
|
|
|
+ console.log("123");
|
|
|
+ renderMap();
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ logOut,
|
|
|
+ renderMap,
|
|
|
+ img149,
|
|
|
+ };
|
|
|
},
|
|
|
});
|
|
|
</script>
|
