Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
f1e4ddc3 by renchao@pashanhoo.com
Options

style:地图修改

1 parent f9184dd5
Inline Side-by-side
Showing 3 changed files with 227 additions and 227 deletions
......@@ -5,261 +5,261 @@
</template>
<script>
import Echart from "@/common/echart";
import { mapGetters } from "vuex";
export default {
data () {
return {
options: {},
max: "5000", //最大value值
min: "1", // 最小value值
key: 0,
mapjson: "",
};
},
components: {
Echart,
},
created () { },
props: {
cdata: {
type: Array,
default: () => [],
import Echart from "@/common/echart";
import { mapGetters } from "vuex";
export default {
data () {
return {
options: {},
max: "5000", //最大value值
min: "1", // 最小value值
key: 0,
mapjson: "",
};
},
},
mounted () {
window.addEventListener("resize", () => {
this.key++;
});
// 根据行政区代码匹配行政区
require(`@/common/map/${this.BASE_API.AREARMAP}.js`);
},
watch: {
cdata: {
handler (newData) {
let _this = this;
// 设置点的位置(经纬度)
this.options = {
showLegendSymbol: false,
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: (point) => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
return `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
components: {
Echart,
},
created () { },
props: {
cdata: {
type: Array,
default: () => [],
},
},
mounted () {
window.addEventListener("resize", () => {
this.key++;
});
// 根据行政区代码匹配行政区
require(`@/common/map/${this.BASE_API.AREARMAP}.js`);
},
watch: {
cdata: {
handler (newData) {
let _this = this;
// 设置点的位置(经纬度)
this.options = {
showLegendSymbol: false,
tooltip: {
trigger: "item",
textStyle: {
fontSize: 14,
lineHeight: 22,
},
position: (point) => {
// 固定在顶部
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
return `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
接入量:<span style="color: #7df7ce; font-size: 16px; font-weight: 600;"> ${params.value} </span>个
<br>
上报量:<span style="color: #f32c51; font-size: 16px; font-weight: 600;"> ${params.data.successcount} </span>个
</div>`;
},
},
extraCssText:
"background: #85a2eb; border-radius: 2;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
},
visualMap: {
min: 0,
max: _this.max,
bottom: "6%",
left: 50,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 4, // 每两个图元之间的间隔距离，单位为px
selectedMode: false, // 是否允许点击
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 5000, label: "≥5000", color: "#056BEC" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 1000, lte: 5000, label: "1000-5000", color: "#48BDE3" },
{ gte: 500, lte: 1000, label: "500-1000", color: "#0494F3" },
{ gte: 0, lte: 500, label: "≤500", color: "#1872CC" },
],
textStyle: {
color: "#CEF8FF",
}
},
geo: [{
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: "", // 自定义扩展图表类型
top: "15%",
left: "10%",
map: this.BASE_API.AREARMAP,
itemStyle: {
normal: {
//阴影
areaColor: "#5689FD",
borderWidth: 1,
},
},
}, {
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: "", // 自定义扩展图表类型
top: "18%",
left: "10%",
map: this.BASE_API.AREARMAP,
itemStyle: {
color: '#21371d',
areaColor: "#21371d",
borderWidth: 1,
borderColor: "#00A3CB",
shadowColor: "#01C5E9",
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: -12,
visualMap: {
min: 0,
max: _this.max,
bottom: "6%",
left: 50,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 4, // 每两个图元之间的间隔距离，单位为px
selectedMode: false, // 是否允许点击
pieces: [
// 自定义每一段的范围，以及每一段的文字
{ gte: 5000, label: "≥5000", color: "#056BEC" }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 1000, lte: 5000, label: "1000-5000", color: "#48BDE3" },
{ gte: 500, lte: 1000, label: "500-1000", color: "#0494F3" },
{ gte: 0, lte: 500, label: "≤500", color: "#1872CC" },
],
textStyle: {
color: "#CEF8FF",
}
},
emphasis: {
disabled: true
}
}],
series: [
{
type: "map",
geo: [{
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: this.BASE_API.AREARMAP, // 自定义扩展图表类型
mapType: "", // 自定义扩展图表类型
top: "15%",
left: "10%",
map: this.BASE_API.AREARMAP,
itemStyle: {
normal: {
borderWidth: 1.6,
borderColor: "#9DFFFC",
//阴影
areaColor: "#5689FD",
borderWidth: 1,
},
emphasis: {
// 地图区域的高亮颜色
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#4DD1B4' // 0% 处的颜色
}, {
offset: 1, color: '#15BFCE' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderType: 'dottod',
borderWidth: 0,
borderColor: '#F8F071',
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 4
}
},
label: {
formatter: (params) => {
// return `${params.name}\n${params.value + "个"}`;
},
show: true,
position: "insideRight",
textStyle: {
fontSize: 14,
color: "#efefef",
}, {
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: "", // 自定义扩展图表类型
top: "18%",
left: "10%",
map: this.BASE_API.AREARMAP,
itemStyle: {
color: '#21371d',
areaColor: "#21371d",
borderWidth: 1,
borderColor: "#00A3CB",
shadowColor: "#01C5E9",
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: -12,
},
emphasis: {
disabled: true
}
}],
series: [
{
type: "map",
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: this.BASE_API.AREARMAP, // 自定义扩展图表类型
top: "15%",
left: "10%",
itemStyle: {
normal: {
borderWidth: 1.6,
borderColor: "#9DFFFC",
},
emphasis: {
// 地图区域的高亮颜色
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#4DD1B4' // 0% 处的颜色
}, {
offset: 1, color: '#15BFCE' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderType: 'dottod',
borderWidth: 0,
borderColor: '#F8F071',
shadowColor: '#000',
shadowBlur: 10,
shadowOffsetY: 4
}
},
emphasis: {
label: {
formatter: (params) => {
// return `${params.name}\n${params.value + "个"}`;
},
show: true,
position: "insideRight",
textStyle: {
color: "#fff",
fontSize: 14,
color: "#efefef",
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
data: newData,
},
data: newData,
},
],
};
// 重新选择区域
],
};
// 重新选择区域
this.handleMapRandomSelect();
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
methods: {
// 开启定时器
startInterval () {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea () {
const length = 9;
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: "mapSelect",
seriesIndex: 0,
dataIndex: index,
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error);
methods: {
// 开启定时器
startInterval () {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
});
},
handleMapRandomSelect () {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on("mouseover", function (params) {
clearInterval(_self.intervalId);
this.intervalId = setInterval(() => {
this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea () {
const length = 9;
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
let index = Math.floor(Math.random() * length);
while (index === this.preSelectMapIndex || index >= length) {
index = Math.floor(Math.random() * length);
}
map.dispatchAction({
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
dataIndex: this.preSelectMapIndex,
});
map.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index,
});
map.dispatchAction({
type: "mapSelect",
seriesIndex: 0,
dataIndex: params.dataIndex,
dataIndex: index,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on("globalout", function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error);
}
});
this.preSelectMapIndex = index;
} catch (error) {
console.log(error);
}
});
},
handleMapRandomSelect () {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
const _self = this;
setTimeout(() => {
_self.reSelectMapRandomArea();
}, 0);
// 移入区域，清除定时器、取消之前选中并选中当前
map.on("mouseover", function (params) {
clearInterval(_self.intervalId);
map.dispatchAction({
type: "mapUnSelect",
seriesIndex: 0,
dataIndex: _self.preSelectMapIndex,
});
map.dispatchAction({
type: "mapSelect",
seriesIndex: 0,
dataIndex: params.dataIndex,
});
_self.preSelectMapIndex = params.dataIndex;
});
// 移出区域重新随机选中地图区域，并开启定时器
map.on("globalout", function () {
_self.reSelectMapRandomArea();
_self.startInterval();
});
this.startInterval();
} catch (error) {
console.log(error);
}
});
},
},
},
};
};
</script>
<style></style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-07-03 16:50:43
* @LastEditTime: 2023-07-03 17:00:51
-->
<template>
<Chart :cdata="cdata" />
......@@ -31,8 +31,9 @@
try {
let { result: res } = await work.mapViews("A20");
res.map((item) => {
return (
this.cdata.push({ "name": item.areaName, "value": item.ywtotal })
this.cdata.push({ "name": item.areaName, "value": item.ywtotal, "successcount": item.successcount })
)
});
......
<!--
* @Description :工作台左侧表
* @Autor : miaofang
* @LastEditTime: 2023-07-03 16:50:16
* @LastEditTime: 2023-07-03 16:55:39
-->
<template>
<div class="leftcard">
......@@ -78,7 +78,7 @@
created () {
this.getsthjqxjrtotal();
this.timer = setInterval(() => {
this.getsthjqxjrtotal();
this.getsthjqxjrtotal()
}, 10000) // 10s
},
components: { columnar },
......@@ -123,9 +123,8 @@
destroyed () {
clearInterval(this.timer)
}
};
}
</script>
<style lang="scss" scoped>
.leftcard {
width: 30%;
......