|
|
@@ -1,20 +1,23 @@
|
|
|
<template>
|
|
|
- <div id="chart-panel" style="width: 100%;height: 100%"></div>
|
|
|
+ <div id="chart-panel" ref="qkmap" style="width: 100%;height: 100%"></div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import * as echarts from "echarts";
|
|
|
-import qkmap from "@/assets/qkmap";
|
|
|
-import qcjd from "@/assets/qcjd";
|
|
|
-import jxjd from "@/assets/jxjd";
|
|
|
-import jcjd from "@/assets/jcjd";
|
|
|
-import gxjd from "@/assets/gxjd";
|
|
|
-import fmjd from "@/assets/fmjd";
|
|
|
-import dfjd from "@/assets/dfjd";
|
|
|
+import qkmap from "@/assets/qkmap.json";
|
|
|
+import qcjd from "@/assets/qcjd.json";
|
|
|
+import jxjd from "@/assets/jxjd.json";
|
|
|
+import jcjd from "@/assets/jcjd.json";
|
|
|
+import gxjd from "@/assets/gxjd.json";
|
|
|
+import fmjd from "@/assets/fmjd.json";
|
|
|
+import dfjd from "@/assets/dfjd.json";
|
|
|
|
|
|
export default {
|
|
|
- name: "test",
|
|
|
+ name: "qkmap",
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ //是否下钻
|
|
|
+ goDown: false
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
},
|
|
|
@@ -25,10 +28,27 @@ export default {
|
|
|
bmbjs() {
|
|
|
let option;
|
|
|
// 模拟点数据——数据点位无实际意义 仅供参考
|
|
|
- var mapArr = {};
|
|
|
+ var geoCoordMap = {
|
|
|
+ '前程街道': [125.09604660214684, 43.83909453215667],
|
|
|
+ '东风街道': [125.09696957398383, 43.84313776848155],
|
|
|
+ '广兴街道': [125.21211984719847, 43.84244444235257],
|
|
|
+ '锦程街道': [125.23225751672716, 43.88166932271711],
|
|
|
+ '富民街道': [125.21874697097272, 43.85422355845459],
|
|
|
+ '锦绣街道': [125.25168911496968, 43.858309029810389],
|
|
|
+ '汽开区政务大厅': [125.26121514249364, 43.86525634142766],
|
|
|
+ }
|
|
|
// 模拟动态修改点级别
|
|
|
let arrZj = [];
|
|
|
- let arrHz = [];
|
|
|
+
|
|
|
+ var data = [
|
|
|
+ {name: '前程街道', value: 239},
|
|
|
+ {name: '富民街道', value: 181},
|
|
|
+ {name: '广兴街道', value: 154},
|
|
|
+ {name: '东风街道', value: 135},
|
|
|
+ {name: '锦绣街道', value: 117},
|
|
|
+ {name: '锦程街道', value: 124},
|
|
|
+ {name: '汽开区政务大厅', value: 421},
|
|
|
+ ];
|
|
|
echarts.extendsMap = function (id, opt) {
|
|
|
// 实例
|
|
|
var chart = this.init(document.getElementById(id));
|
|
|
@@ -46,6 +66,22 @@ export default {
|
|
|
"2": "#f0fb30",
|
|
|
"3": "#d11864",
|
|
|
};
|
|
|
+
|
|
|
+ // 设置点方法
|
|
|
+ var convertData = function (data) {
|
|
|
+ var res = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ var geoCoord = geoCoordMap[data[i].name];
|
|
|
+ if (geoCoord) {
|
|
|
+ res.push({
|
|
|
+ name: data[i].name,
|
|
|
+ value: geoCoord.concat(data[i].value)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ };
|
|
|
+
|
|
|
var defaultOpt = {
|
|
|
mapName: "qkmap", // 地图展示
|
|
|
goDown: false, // 是否下钻
|
|
|
@@ -94,9 +130,6 @@ export default {
|
|
|
o.graphic.push(breadcrumb);
|
|
|
o.graphic[0].children[0].shape.x2 = 140;
|
|
|
o.graphic[0].children[1].shape.x2 = 140;
|
|
|
- // if (n === "杭州市") {
|
|
|
- // o.series[0].data = arrHz;
|
|
|
- // }
|
|
|
name.push(n)
|
|
|
idx++;
|
|
|
} else {
|
|
|
@@ -104,7 +137,7 @@ export default {
|
|
|
if (o.graphic.length <= 2) {
|
|
|
o.graphic[0].children[0].shape.x2 = 50;
|
|
|
o.graphic[0].children[1].shape.x2 = 50;
|
|
|
- o.series[0].data = arrZj;
|
|
|
+ // o.series[0].data = arrZj;
|
|
|
}
|
|
|
name.splice(j + 1, l);
|
|
|
idx = j;
|
|
|
@@ -149,7 +182,6 @@ export default {
|
|
|
key: name,
|
|
|
},
|
|
|
onclick: function () {
|
|
|
-
|
|
|
var name = this.style.key;
|
|
|
handleEvents.resetOption(chart, option, name);
|
|
|
},
|
|
|
@@ -165,7 +197,6 @@ export default {
|
|
|
font: '12px "Microsoft YaHei", sans-serif',
|
|
|
},
|
|
|
onclick: function () {
|
|
|
-
|
|
|
var name = this.style.text;
|
|
|
handleEvents.resetOption(chart, option, name);
|
|
|
},
|
|
|
@@ -183,7 +214,6 @@ export default {
|
|
|
font: '10px "Microsoft YaHei", sans-serif',
|
|
|
},
|
|
|
onclick: function () {
|
|
|
-
|
|
|
var name = this.style.name;
|
|
|
handleEvents.resetOption(chart, option, name);
|
|
|
},
|
|
|
@@ -194,21 +224,6 @@ export default {
|
|
|
return breadcrumb;
|
|
|
},
|
|
|
|
|
|
- // 设置effectscatter
|
|
|
- // initSeriesData: function (data) {
|
|
|
- // var temp = [];
|
|
|
- // for (var i = 0; i < data.length; i++) {
|
|
|
- // var geoCoord = geoCoordMap[data[i].name];
|
|
|
- // if (geoCoord) {
|
|
|
- // temp.push({
|
|
|
- // name: data[i].name,
|
|
|
- // value: geoCoord.concat(data[i].value, data[i].level),
|
|
|
- // });
|
|
|
- // }
|
|
|
- // }
|
|
|
- // return temp;
|
|
|
- // },
|
|
|
-
|
|
|
zoomAnimation: function () {
|
|
|
var count = null;
|
|
|
var zoom = function (per) {
|
|
|
@@ -232,6 +247,12 @@ export default {
|
|
|
|
|
|
option = {
|
|
|
backgroundColor: "#336699",
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.name + ' : ' + params.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
graphic: [{
|
|
|
//标题的线
|
|
|
type: "group",
|
|
|
@@ -405,29 +426,93 @@ export default {
|
|
|
}
|
|
|
}),
|
|
|
},
|
|
|
- series: [{
|
|
|
- type: "effectScatter", //涟漪特效
|
|
|
- coordinateSystem: "geo",
|
|
|
- symbolSize: 5, //标记的大小
|
|
|
- showEffectOn: "render",
|
|
|
- rippleEffect: {
|
|
|
- //涟漪特效相关配置。
|
|
|
- period: 5, //动画的周期，秒数。
|
|
|
- scale: 10, //波纹的最大缩放比例。
|
|
|
- brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'。
|
|
|
- },
|
|
|
- hoverAnimation: true,
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: function (params) {
|
|
|
- return levelColorMap[params.value[2]];
|
|
|
+ series: [
|
|
|
+ // {
|
|
|
+ // name: 'light',
|
|
|
+ // type: 'scatter',
|
|
|
+ // coordinateSystem: 'geo',
|
|
|
+ // data: convertData(data),
|
|
|
+ // symbolSize: function (val) {
|
|
|
+ // return val[2] / 10;
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: '{b}',
|
|
|
+ // position: 'right',
|
|
|
+ // show: true
|
|
|
+ // },
|
|
|
+ // emphasis: {
|
|
|
+ // show: true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: '#F4E925'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ type: 'map',
|
|
|
+ map: '汽开区',
|
|
|
+ geoIndex: 0,
|
|
|
+ aspectScale: 0.75, //长宽比
|
|
|
+ showLegendSymbol: false, // 存在legend时显示
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ roam: true,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ areaColor: '#031525',
|
|
|
+ borderColor: '#FFFFFF',
|
|
|
},
|
|
|
- shadowBlur: 5,
|
|
|
- shadowColor: "#333",
|
|
|
+ emphasis: {
|
|
|
+ areaColor: '#2B91B7'
|
|
|
+ }
|
|
|
},
|
|
|
+ animation: false,
|
|
|
+ data: data
|
|
|
},
|
|
|
- data: arrZj,
|
|
|
- },],
|
|
|
+ // {
|
|
|
+ // name: 'Top 5',
|
|
|
+ // type: 'effectScatter',
|
|
|
+ // coordinateSystem: 'geo',
|
|
|
+ // data: convertData(data.sort(function (a, b) {
|
|
|
+ // return b.value - a.value;
|
|
|
+ // }).slice(0, 5)),
|
|
|
+ // symbolSize: function (val) {
|
|
|
+ // return val[2] / 10;
|
|
|
+ // },
|
|
|
+ // showEffectOn: 'render',
|
|
|
+ // rippleEffect: {
|
|
|
+ // brushType: 'stroke'
|
|
|
+ // },
|
|
|
+ // hoverAnimation: true,
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // formatter: '{b}',
|
|
|
+ // position: 'right',
|
|
|
+ // show: true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: '#F4E925',
|
|
|
+ // shadowBlur: 10,
|
|
|
+ // shadowColor: '#05C3F9'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // zlevel: 1
|
|
|
+ // },
|
|
|
+ ]
|
|
|
};
|
|
|
chart.setOption(option);
|
|
|
// 添加事件
|
|
|
@@ -460,41 +545,24 @@ export default {
|
|
|
shadowColor: "#333",
|
|
|
},
|
|
|
},
|
|
|
- data: mapArr[params.name]
|
|
|
+ data: geoCoordMap[params.name]
|
|
|
},],
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
- chart.on("mouseover", function (params) {
|
|
|
- var city = params.name; //当前城市
|
|
|
- $("#hoverBox").css();
|
|
|
- $("#hoverBox").html(city);
|
|
|
- $("#hoverBox").show();
|
|
|
- var layerX = params.event.offsetX;
|
|
|
- var layerY = params.event.offsetY;
|
|
|
- $("#hoverBox").css({
|
|
|
- top: layerY + 10,
|
|
|
- left: layerX + 10,
|
|
|
- });
|
|
|
- console.log("params.name",params)
|
|
|
- });
|
|
|
- chart.on("mouseout", function (params) {
|
|
|
- $("#hoverBox").hide();
|
|
|
- });
|
|
|
return chart;
|
|
|
};
|
|
|
|
|
|
echarts.registerMap("汽开区", qkmap);
|
|
|
var myChart = echarts.extendsMap("chart-panel", {
|
|
|
mapName: "汽开区", // 地图名
|
|
|
- goDown: true, // 是否下钻
|
|
|
+ goDown: this.goDown, // 是否下钻
|
|
|
// 下钻回调
|
|
|
callback: function (name, option, instance) {
|
|
|
},
|
|
|
// 数据展示
|
|
|
- data: arrZj
|
|
|
+ data: data
|
|
|
});
|
|
|
if (option) {
|
|
|
myChart.setOption(option);
|
bihuisong