Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
523cf0bd by xiaomiao
Options

地图数据切换

1 parent 7fb11b31
Expand all
Inline Side-by-side
Showing 2 changed files with 99 additions and 70 deletions
<template>
<!-- 地图 -->
<Echart id="centreLeft2Chart" class="centreLeft2Chart":key="key" ref="centreLeft2ChartRef" width="100%" height="100%"
:options="options"></Echart>
<Echart
id="centreLeft2Chart"
class="centreLeft2Chart"
:key="key"
ref="centreLeft2ChartRef"
width="100%"
height="100%"
:options="options"
></Echart>
</template>
<script>
import Echart from '@/common/echart';
import Echart from "@/common/echart";
import { mapGetters } from "vuex";
export default {
data () {
data() {
return {
options: {},
max: "100", //最大value值
min: "1", // 最小value值
key: 0
key: 0,
mapjson: "",
};
},
components: {
Echart,
},
created () {
require(`@/common/map/hanzhong.js`)
},
created() {},
props: {
cdata: {
type: Array,
default: () => [],
},
},
mounted() {
window.addEventListener("resize", () => {
this.key++
}); },
mounted() {
window.addEventListener("resize", () => {
this.key++;
});
this.getDistrictcode();
},
watch: {
cdata: {
handler (newData) {
handler(newData) {
let _this = this;
// 设置点的位置(经纬度)
const geoCoordMap = {
......@@ -52,92 +62,96 @@ export default {
this.options = {
showLegendSymbol: true,
tooltip: {
trigger: 'item',
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: point => {
position: (point) => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: params => {
return `<div style="">${params.name}:${params.value + "个"}</div>`
}
formatter: (params) => {
return `<div style="">${params.name}:${
params.value + "个"
}</div>`;
},
},
visualMap: {
min: 0,
max: _this.max,
bottom: '13%',
bottom: "13%",
left: 50,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [ // 自定义每一段的范围，以及每一段的文字
{ gte: 100, label: '100以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 50, lte: 6000, label: '20-100', color: '#3375e4' },
{ gte: 20, lte: 2000, label: '1-200', color: '#6797ef' },
{ gte: 1, lte: 1000, label: '1-20', color: '#96b5ef' },
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 100, label: "100以上", color: "#035cf5" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 50, lte: 6000, label: "20-100", color: "#3375e4" },
{ gte: 20, lte: 2000, label: "1-200", color: "#6797ef" },
{ gte: 1, lte: 1000, label: "1-20", color: "#96b5ef" },
],
textStyle: {
color: '#737373'
}
color: "#737373",
},
},
geo: {
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: '', // 自定义扩展图表类型
top: '15%',
left: '10%',
map: '汉中市',
mapType: "", // 自定义扩展图表类型
top: "15%",
left: "10%",
map: "汉中市",
itemStyle: {
normal: {//阴影
areaColor: '#5689FD ',
shadowColor: '#21371d',
normal: {
//阴影
areaColor: "#5689FD ",
shadowColor: "#21371d",
borderWidth: 0,
shadowOffsetX: 2,
shadowOffsetY: 25
}
}
shadowOffsetY: 25,
},
},
},
series: [
{
type: 'map',
type: "map",
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: '汉中市', // 自定义扩展图表类型
top: '15%',
left: '10%',
mapType: "汉中市", // 自定义扩展图表类型
top: "15%",
left: "10%",
itemStyle: {
normal: {
areaColor: 'rgba(19,54,162,.5)',
borderColor: 'rgba(0,242,252,.5)',
areaColor: "rgba(19,54,162,.5)",
borderColor: "rgba(0,242,252,.5)",
borderWidth: 2,
shadowBlur: 1,
borderColor: 'rgb(155, 200, 200)',
shadowColor: '#44f2fc',
}
borderColor: "rgb(155, 200, 200)",
shadowColor: "#44f2fc",
},
},
label: {
formatter: params => {
return `${params.name}\n${params.value+"个"}`;
},
formatter: (params) => {
return `${params.name}\n${params.value + "个"}`;
},
show: true,
position: 'insideRight',
position: "insideRight",
textStyle: {
fontSize: 14,
color: '#efefef',
color: "#efefef",
},
emphasis: {
textStyle: {
color: '#fff',
}
}
color: "#fff",
},
},
},
data: newData,
}
},
],
};
// 重新选择区域
......@@ -148,9 +162,26 @@ export default {
deep: true,
},
},
computed: {
...mapGetters(["sidebar", "dicData"]),
logoName() {
return (
this.dicData["sysCode"] &&
this.dicData["sysCode"].filter((item) => item.DCODE == "areaMap")
);
},
},
methods: {
// 根据行政区代码匹配行政区
getDistrictcode() {
console.log("this.logoName.DNAME", this.logoName.DNAME);
if ((this.logoName.DNAME = "map610700")) {
this.mapjson = "hanzhong";
require(`@/common/map/${this.mapjson}.js`);
}
},
// 开启定时器
startInterval () {
startInterval() {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
......@@ -162,7 +193,7 @@ export default {
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea () {
reSelectMapRandomArea() {
const length = 9;
this.$nextTick(() => {
try {
......@@ -172,27 +203,27 @@ export default {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: 'mapUnSelect',
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: 'showTip',
type: "showTip",
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: 'mapSelect',
type: "mapSelect",
seriesIndex: 0,
dataIndex: index,
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error)
console.log(error);
}
});
},
handleMapRandomSelect () {
handleMapRandomSelect() {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
......@@ -201,34 +232,32 @@ export default {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on('mouseover', function (params) {
map.on("mouseover", function (params) {
clearInterval(_self.intervalId);
map.dispatchAction({
type: 'mapUnSelect',
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
});
map.dispatchAction({
type: 'mapSelect',
type: "mapSelect",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on('globalout', function () {
map.on("globalout", function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error)
console.log(error);
}
});
},
},
};
</script>
<style>
</style>
<style></style>
......