|
|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 580px">
|
|
|
+ <div ref="charts" style="width: 100%;height: 900px;margin-top: -120px"></div>
|
|
|
+ <img
|
|
|
+ id="mapBackground"
|
|
|
+ src="@/assets/images/main/map_bg.jpg"
|
|
|
+ alt=""
|
|
|
+ style="display: none"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="showBack"
|
|
|
+ @click="beBack"
|
|
|
+ src="@/assets/images/main/back.png"
|
|
|
+ style="width: 34px;height: 30px;cursor: pointer;position: absolute;right: 50px;bottom: 50px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as echarts from "echarts";
|
|
|
+import shanxi from "./shanxi.json"
|
|
|
+import 大同市 from '@/views/screen/map/大同市.json'
|
|
|
+import 朔州市 from '@/views/screen/map/朔州市.json'
|
|
|
+import 忻州市 from '@/views/screen/map/忻州市.json'
|
|
|
+import 吕梁市 from '@/views/screen/map/吕梁市.json'
|
|
|
+import 太原市 from '@/views/screen/map/太原市.json'
|
|
|
+import 阳泉市 from '@/views/screen/map/阳泉市.json'
|
|
|
+import 晋中市 from '@/views/screen/map/晋中市.json'
|
|
|
+import 临汾市 from '@/views/screen/map/临汾市.json'
|
|
|
+import 长治市 from '@/views/screen/map/长治市.json'
|
|
|
+import 运城市 from '@/views/screen/map/运城市.json'
|
|
|
+import 晋城市 from '@/views/screen/map/晋城市.json'
|
|
|
+let imgElement
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showBack: false,
|
|
|
+ dataSource: {
|
|
|
+ 大同市: 大同市,
|
|
|
+ 朔州市: 朔州市,
|
|
|
+ 忻州市: 忻州市,
|
|
|
+ 吕梁市: 吕梁市,
|
|
|
+ 太原市: 太原市,
|
|
|
+ 阳泉市: 阳泉市,
|
|
|
+ 晋中市: 晋中市,
|
|
|
+ 临汾市: 临汾市,
|
|
|
+ 长治市: 长治市,
|
|
|
+ 运城市: 运城市,
|
|
|
+ 晋城市: 晋城市,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {},
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ imgElement = document.getElementById("mapBackground");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initCharts();
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initCharts() {
|
|
|
+ const area = [
|
|
|
+ { name: "太原市", appOrg: "1A003" },
|
|
|
+ { name: "大同市", appOrg: "1B001" },
|
|
|
+ { name: "阳泉市", appOrg: "1C001" },
|
|
|
+ { name: "长治市", appOrg: "1D001" },
|
|
|
+ { name: "晋城市", appOrg: "1E001" },
|
|
|
+ { name: "朔州市", appOrg: "1F001" },
|
|
|
+ { name: "晋中市", appOrg: "1K001" },
|
|
|
+ { name: "临汾市", appOrg: "1L001" },
|
|
|
+ { name: "忻州市", appOrg: "1H001" },
|
|
|
+ { name: "运城市", appOrg: "1M001" },
|
|
|
+ { name: "吕梁市", appOrg: "1J001" }
|
|
|
+ ];
|
|
|
+ const points = [
|
|
|
+ { name: "太原市", coordinate: [112.4493, 37.6570], x: "399", y: "2" },
|
|
|
+ { name: "大同市", coordinate: [113.3002, 40.0768], x: "399", y: "2" },
|
|
|
+ { name: "阳泉市", coordinate: [113.6805, 37.7863], x: "399", y: "2" },
|
|
|
+ { name: "长治市", coordinate: [113.1163, 36.1954], x: "399", y: "2" },
|
|
|
+ { name: "晋城市", coordinate: [113.1513, 35.5907], x: "399", y: "2" },
|
|
|
+ { name: "朔州市", coordinate: [112.4329, 39.5312], x: "399", y: "2" },
|
|
|
+ { name: "晋中市", coordinate: [112.8527, 37.5870], x: "399", y: "2" },
|
|
|
+ { name: "临汾市", coordinate: [111.5186, 35.8582], x: "399", y: "2" },
|
|
|
+ { name: "忻州市", coordinate: [112.7341, 38.4167], x: "399", y: "2" },
|
|
|
+ { name: "运城市", coordinate: [110.9069, 34.9264], x: "399", y: "2" },
|
|
|
+ { name: "吕梁市", coordinate: [111.1443, 37.4183], x: "399", y: "2" }
|
|
|
+ ];
|
|
|
+ const charts = echarts.init(this.$refs["charts"]);
|
|
|
+ const option = {
|
|
|
+ // 设置背景颜色，"transparent" 表示透明背景
|
|
|
+ backgroundColor: "transparent",
|
|
|
+
|
|
|
+ // 提示浮窗（Tooltip）配置
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示 tooltip
|
|
|
+ trigger: "item", // 触发类型，"item" 表示鼠标悬浮在图形上时触发
|
|
|
+ formatter: `{b}`,
|
|
|
+ backgroundColor: "rgba(5,13,21,0.25)", // 提示框背景颜色（半透明黑色）
|
|
|
+ borderColor: "rgba(0, 0, 0, 0.16)", // 边框颜色
|
|
|
+ triggerOn: "mousemove", // 鼠标移动时触发
|
|
|
+ enterable: true, // 允许鼠标移动到 tooltip 内部（适用于可点击 tooltip）
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff", // 文字颜色
|
|
|
+ fontSize: 12, // 字体大小
|
|
|
+ overflow: "break", // 文字超出时换行
|
|
|
+ },
|
|
|
+ padding: 3, // 提示框内边距
|
|
|
+ },
|
|
|
+
|
|
|
+ // 地理坐标系组件（用于地图绘制）
|
|
|
+ geo: {
|
|
|
+ map: "shanxi", // 使用 "shanxi" 地图
|
|
|
+ zoom: 1.1, // 初始缩放比例（可调整地图大小）
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#11F6F2", // 地图区域边界颜色
|
|
|
+ borderWidth: 5, // 边界宽度
|
|
|
+ shadowColor: "#0E7683", // 地图阴影颜色
|
|
|
+ shadowBlur: 0, // 阴影模糊度
|
|
|
+ shadowOffsetX: 5, // 阴影水平偏移
|
|
|
+ shadowOffsetY: 13, // 阴影垂直偏移
|
|
|
+ },
|
|
|
+ layoutCenter: ["50%", "50%"], // 控制地图的中心位置
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图表数据系列（series）
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "map", // 地图类型
|
|
|
+ map: "shanxi", // 绑定的地图名称（与 `geo` 对应）
|
|
|
+ zoom: 1.1, // 缩放级别
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: { image: imgElement, repeat: "no-repeat" }, // 地图区域背景颜色（使用图片填充）
|
|
|
+ borderColor: "#11F4F0", // 地图边界颜色
|
|
|
+ borderWidth: 1, // 地图边界宽度
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "#0D7481", // 鼠标悬浮时的区域颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ select: { disabled: true }, // 禁用地图的选中状态，防止点击后颜色锁定
|
|
|
+ label: {
|
|
|
+ show: true, // 显示区域名称
|
|
|
+ color: "#FFF", // 文字颜色
|
|
|
+ fontSize: 16, // 文字大小
|
|
|
+ fontWeight: 600, // 字重
|
|
|
+ emphasis: { color: "#fff" }, // 悬浮时的文字颜色
|
|
|
+ },
|
|
|
+ data: area
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ type: "scatter", // 散点图（用于标注特殊位置）
|
|
|
+ coordinateSystem: "geo", // 使用 `geo` 作为坐标系
|
|
|
+ symbol: "image://" + require("@/assets/zhang/myMap/carPosition.png"), // 自定义标记（图片）
|
|
|
+ symbolSize: [20, 30], // 标记大小（宽 30，高 20）
|
|
|
+ label: {
|
|
|
+ show: true, // 显示数字
|
|
|
+ position: "top", // 数字显示在图标的正上方
|
|
|
+ color: "#fff", // 文字颜色（白色）
|
|
|
+ fontSize: 14, // 字体大小
|
|
|
+ offset: [0, 10],
|
|
|
+ fontWeight: "bold", // 加粗
|
|
|
+ backgroundColor: "rgba(147,245,245,0.35)", // 文字背景色（可选）
|
|
|
+ padding: [2, 5], // 文字内边距（可选）
|
|
|
+ borderRadius: 2, // 文字框圆角（可选）
|
|
|
+ },
|
|
|
+ data: points.map(({ name, coordinate, x, y }) => ({
|
|
|
+ name, // 点名称
|
|
|
+ value: coordinate, // 经纬度坐标
|
|
|
+ label: { formatter: `${x}` }, // 显示 `x` 数据（可换成 y）
|
|
|
+ x, // 额外数据（在建项目数）
|
|
|
+ y, // 额外数据（施工项目数）
|
|
|
+ })),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ // 地图注册，第一个参数的名字必须和option.geo.map一致
|
|
|
+ echarts.registerMap("shanxi",shanxi)
|
|
|
+ charts.setOption(option);
|
|
|
+ // 监听点击事件
|
|
|
+ charts.on("click", (params) => {
|
|
|
+ if (params.componentType === "geo") {
|
|
|
+ // 点击的是地图区域
|
|
|
+ console.log("Clicked map area: ", params.name);
|
|
|
+ } else if (params.componentType === "series") {
|
|
|
+ // 点击的是自定义图标（scatter）
|
|
|
+ console.log("Clicked scatter point: ", params.name, params.data.appOrg);
|
|
|
+ // 销毁当前图表实例
|
|
|
+ charts.dispose();
|
|
|
+ // 重新初始化并设置新的配置项
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChildren(params.name) // 重新初始化图表
|
|
|
+ this.showBack = true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initChildren(cityName){
|
|
|
+ const charts = echarts.init(this.$refs["charts"]);
|
|
|
+ const option = {
|
|
|
+ // 设置背景颜色，"transparent" 表示透明背景
|
|
|
+ backgroundColor: "transparent",
|
|
|
+
|
|
|
+ // 提示浮窗（Tooltip）配置
|
|
|
+ tooltip: {
|
|
|
+ show: true, // 是否显示 tooltip
|
|
|
+ trigger: "item", // 触发类型，"item" 表示鼠标悬浮在图形上时触发
|
|
|
+ formatter: `{b}`,
|
|
|
+ backgroundColor: "rgba(5,13,21,0.25)", // 提示框背景颜色（半透明黑色）
|
|
|
+ borderColor: "rgba(0, 0, 0, 0.16)", // 边框颜色
|
|
|
+ triggerOn: "mousemove", // 鼠标移动时触发
|
|
|
+ enterable: true, // 允许鼠标移动到 tooltip 内部（适用于可点击 tooltip）
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff", // 文字颜色
|
|
|
+ fontSize: 12, // 字体大小
|
|
|
+ overflow: "break", // 文字超出时换行
|
|
|
+ },
|
|
|
+ padding: 3, // 提示框内边距
|
|
|
+ },
|
|
|
+
|
|
|
+ // 地理坐标系组件（用于地图绘制）
|
|
|
+ geo: {
|
|
|
+ map: "child", // 使用 "shanxi" 地图
|
|
|
+ zoom: 1.1, // 初始缩放比例（可调整地图大小）
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#11F6F2", // 地图区域边界颜色
|
|
|
+ borderWidth: 5, // 边界宽度
|
|
|
+ shadowColor: "#0E7683", // 地图阴影颜色
|
|
|
+ shadowBlur: 0, // 阴影模糊度
|
|
|
+ shadowOffsetX: 5, // 阴影水平偏移
|
|
|
+ shadowOffsetY: 13, // 阴影垂直偏移
|
|
|
+ },
|
|
|
+ layoutCenter: ["50%", "50%"], // 控制地图的中心位置
|
|
|
+ },
|
|
|
+
|
|
|
+ // 图表数据系列（series）
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "map", // 地图类型
|
|
|
+ map: "child", // 绑定的地图名称（与 `geo` 对应）
|
|
|
+ zoom: 1.1, // 缩放级别
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: { image: imgElement, repeat: "no-repeat" }, // 地图区域背景颜色（使用图片填充）
|
|
|
+ borderColor: "#11F4F0", // 地图边界颜色
|
|
|
+ borderWidth: 1, // 地图边界宽度
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "#0D7481", // 鼠标悬浮时的区域颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ select: { disabled: true }, // 禁用地图的选中状态，防止点击后颜色锁定
|
|
|
+ label: {
|
|
|
+ show: true, // 显示区域名称
|
|
|
+ color: "#FFF", // 文字颜色
|
|
|
+ fontSize: 16, // 文字大小
|
|
|
+ fontWeight: 600, // 字重
|
|
|
+ emphasis: { color: "#fff" }, // 悬浮时的文字颜色
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ echarts.registerMap("child", this.dataSource[cityName])
|
|
|
+ charts.setOption(option);
|
|
|
+ },
|
|
|
+ beBack(){
|
|
|
+ this.initCharts()
|
|
|
+ this.showBack = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
