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 @@ ...@@ -5,261 +5,261 @@
5 </template> 5 </template>
6 6
7 <script> 7 <script>
8 import Echart from "@/common/echart"; 8 import Echart from "@/common/echart";
9 import { mapGetters } from "vuex"; 9 import { mapGetters } from "vuex";
10 export default { 10 export default {
11 data () { 11 data () {
12 return { 12 return {
13 options: {}, 13 options: {},
14 max: "5000", //最大value值 14 max: "5000", //最大value值
15 min: "1", // 最小value值 15 min: "1", // 最小value值
16 key: 0, 16 key: 0,
17 mapjson: "", 17 mapjson: "",
18 }; 18 };
19 },
20 components: {
21 Echart,
22 },
23 created () { },
24 props: {
25 cdata: {
26 type: Array,
27 default: () => [],
28 }, 19 },
29 }, 20 components: {
30 mounted () { 21 Echart,
31 window.addEventListener("resize", () => { 22 },
32 this.key++; 23 created () { },
33 }); 24 props: {
34 // 根据行政区代码匹配行政区 25 cdata: {
35 require(`@/common/map/${this.BASE_API.AREARMAP}.js`); 26 type: Array,
36 }, 27 default: () => [],
37 watch: { 28 },
38 cdata: { 29 },
39 handler (newData) { 30 mounted () {
40 let _this = this; 31 window.addEventListener("resize", () => {
41 // 设置点的位置(经纬度) 32 this.key++;
42 this.options = { 33 });
43 showLegendSymbol: false, 34 // 根据行政区代码匹配行政区
44 tooltip: { 35 require(`@/common/map/${this.BASE_API.AREARMAP}.js`);
45 trigger: "item", 36 },
46 textStyle: { 37 watch: {
47 fontSize: 14, 38 cdata: {
48 lineHeight: 22, 39 handler (newData) {
49 }, 40 let _this = this;
50 position: (point) => { 41 // 设置点的位置(经纬度)
51 // 固定在顶部 42 this.options = {
52 return [point[0] + 50, point[1] - 20]; 43 showLegendSymbol: false,
53 }, 44 tooltip: {
54 // 如果需要自定义 tooltip样式，需要使用formatter 45 trigger: "item",
55 formatter: (params) => { 46 textStyle: {
56 return `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000"> 47 fontSize: 14,
48 lineHeight: 22,
49 },
50 position: (point) => {
51 // 固定在顶部
52 return [point[0] + 50, point[1] - 20];
53 },
54 // 如果需要自定义 tooltip样式，需要使用formatter
55 formatter: (params) => {
56 return `<div style="color: #000;font-size: 14px;line-height: 24px background-color: #000000">
57 接入量:<span style="color: #7df7ce; font-size: 16px; font-weight: 600;"> ${params.value} </span>个 57 接入量:<span style="color: #7df7ce; font-size: 16px; font-weight: 600;"> ${params.value} </span>个
58 <br> 58 <br>
59 上报量:<span style="color: #f32c51; font-size: 16px; font-weight: 600;"> ${params.data.successcount} </span>个 59 上报量:<span style="color: #f32c51; font-size: 16px; font-weight: 600;"> ${params.data.successcount} </span>个
60 </div>`; 60 </div>`;
61 }, 61 },
62 extraCssText: 62 extraCssText:
63 "background: #85a2eb; border-radius: 2;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;", 63 "background: #85a2eb; border-radius: 2;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
64 },
65 visualMap: {
66 min: 0,
67 max: _this.max,
68 bottom: "6%",
69 left: 50,
70 splitNumber: 6,
71 seriesIndex: [0],
72 itemWidth: 20, // 每个图元的宽度
73 itemGap: 4, // 每两个图元之间的间隔距离，单位为px
74 selectedMode: false, // 是否允许点击
75 pieces: [
76 // 自定义每一段的范围，以及每一段的文字
77 { gte: 5000, label: "≥5000", color: "#056BEC" }, // 不指定 max，表示 max 为无限大（Infinity）。
78 { gte: 1000, lte: 5000, label: "1000-5000", color: "#48BDE3" },
79 { gte: 500, lte: 1000, label: "500-1000", color: "#0494F3" },
80 { gte: 0, lte: 500, label: "≤500", color: "#1872CC" },
81 ],
82 textStyle: {
83 color: "#CEF8FF",
84 }
85 },
86 geo: [{
87 aspectScale: 1, //长宽比
88 zoom: 1.1,
89 mapType: "", // 自定义扩展图表类型
90 top: "15%",
91 left: "10%",
92 map: this.BASE_API.AREARMAP,
93 itemStyle: {
94 normal: {
95 //阴影
96 areaColor: "#5689FD",
97 borderWidth: 1,
98 },
99 }, 64 },
100 }, { 65 visualMap: {
101 aspectScale: 1, //长宽比 66 min: 0,
102 zoom: 1.1, 67 max: _this.max,
103 mapType: "", // 自定义扩展图表类型 68 bottom: "6%",
104 top: "18%", 69 left: 50,
105 left: "10%", 70 splitNumber: 6,
106 map: this.BASE_API.AREARMAP, 71 seriesIndex: [0],
107 itemStyle: { 72 itemWidth: 20, // 每个图元的宽度
108 color: '#21371d', 73 itemGap: 4, // 每两个图元之间的间隔距离，单位为px
109 areaColor: "#21371d", 74 selectedMode: false, // 是否允许点击
110 borderWidth: 1, 75 pieces: [
111 borderColor: "#00A3CB", 76 // 自定义每一段的范围，以及每一段的文字
112 shadowColor: "#01C5E9", 77 { gte: 5000, label: "≥5000", color: "#056BEC" }, // 不指定 max，表示 max 为无限大（Infinity）。
113 shadowBlur: 10, 78 { gte: 1000, lte: 5000, label: "1000-5000", color: "#48BDE3" },
114 shadowOffsetX: 0, 79 { gte: 500, lte: 1000, label: "500-1000", color: "#0494F3" },
115 shadowOffsetY: -12, 80 { gte: 0, lte: 500, label: "≤500", color: "#1872CC" },
81 ],
82 textStyle: {
83 color: "#CEF8FF",
84 }
116 }, 85 },
117 emphasis: { 86 geo: [{
118 disabled: true
119 }
120 }],
121 series: [
122 {
123 type: "map",
124 aspectScale: 1, //长宽比 87 aspectScale: 1, //长宽比
125 zoom: 1.1, 88 zoom: 1.1,
126 mapType: this.BASE_API.AREARMAP, // 自定义扩展图表类型 89 mapType: "", // 自定义扩展图表类型
127 top: "15%", 90 top: "15%",
128 left: "10%", 91 left: "10%",
92 map: this.BASE_API.AREARMAP,
129 itemStyle: { 93 itemStyle: {
130 normal: { 94 normal: {
131 borderWidth: 1.6, 95 //阴影
132 borderColor: "#9DFFFC", 96 areaColor: "#5689FD",
97 borderWidth: 1,
133 }, 98 },
134 emphasis: {
135 // 地图区域的高亮颜色
136 areaColor: {
137 type: 'linear',
138 x: 0,
139 y: 0,
140 x2: 0,
141 y2: 1,
142 colorStops: [{
143 offset: 0, color: '#4DD1B4' // 0% 处的颜色
144 }, {
145 offset: 1, color: '#15BFCE' // 100% 处的颜色
146 }],
147 global: false // 缺省为 false
148 },
149 borderType: 'dottod',
150 borderWidth: 0,
151 borderColor: '#F8F071',
152 shadowColor: '#000',
153 shadowBlur: 10,
154 shadowOffsetY: 4
155 }
156 }, 99 },
157 label: { 100 }, {
158 formatter: (params) => { 101 aspectScale: 1, //长宽比
159 // return `${params.name}\n${params.value + "个"}`; 102 zoom: 1.1,
160 }, 103 mapType: "", // 自定义扩展图表类型
161 show: true, 104 top: "18%",
162 position: "insideRight", 105 left: "10%",
163 textStyle: { 106 map: this.BASE_API.AREARMAP,
164 fontSize: 14, 107 itemStyle: {
165 color: "#efefef", 108 color: '#21371d',
109 areaColor: "#21371d",
110 borderWidth: 1,
111 borderColor: "#00A3CB",
112 shadowColor: "#01C5E9",
113 shadowBlur: 10,
114 shadowOffsetX: 0,
115 shadowOffsetY: -12,
116 },
117 emphasis: {
118 disabled: true
119 }
120 }],
121 series: [
122 {
123 type: "map",
124 aspectScale: 1, //长宽比
125 zoom: 1.1,
126 mapType: this.BASE_API.AREARMAP, // 自定义扩展图表类型
127 top: "15%",
128 left: "10%",
129 itemStyle: {
130 normal: {
131 borderWidth: 1.6,
132 borderColor: "#9DFFFC",
133 },
134 emphasis: {
135 // 地图区域的高亮颜色
136 areaColor: {
137 type: 'linear',
138 x: 0,
139 y: 0,
140 x2: 0,
141 y2: 1,
142 colorStops: [{
143 offset: 0, color: '#4DD1B4' // 0% 处的颜色
144 }, {
145 offset: 1, color: '#15BFCE' // 100% 处的颜色
146 }],
147 global: false // 缺省为 false
148 },
149 borderType: 'dottod',
150 borderWidth: 0,
151 borderColor: '#F8F071',
152 shadowColor: '#000',
153 shadowBlur: 10,
154 shadowOffsetY: 4
155 }
166 }, 156 },
167 emphasis: { 157 label: {
158 formatter: (params) => {
159 // return `${params.name}\n${params.value + "个"}`;
160 },
161 show: true,
162 position: "insideRight",
168 textStyle: { 163 textStyle: {
169 color: "#fff", 164 fontSize: 14,
165 color: "#efefef",
166 },
167 emphasis: {
168 textStyle: {
169 color: "#fff",
170 },
170 }, 171 },
171 }, 172 },
173 data: newData,
172 }, 174 },
173 data: newData, 175 ],
174 }, 176 };
175 ], 177 // 重新选择区域
176 };
177 // 重新选择区域
178 this.handleMapRandomSelect(); 178 this.handleMapRandomSelect();
179 },
180 immediate: true,
181 deep: true,
179 }, 182 },
180 immediate: true,
181 deep: true,
182 }, 183 },
183 }, 184 methods: {
184 methods: { 185 // 开启定时器
185 // 开启定时器 186 startInterval () {
186 startInterval () { 187 const _self = this;
187 const _self = this; 188 // 应通过接口获取配置时间，暂时写死5s
188 // 应通过接口获取配置时间，暂时写死5s 189 const time = 2000;
189 const time = 2000; 190 if (this.intervalId !== null) {
190 if (this.intervalId !== null) { 191 clearInterval(this.intervalId);
191 clearInterval(this.intervalId);
192 }
193 this.intervalId = setInterval(() => {
194 this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
195 }, time);
196 },
197 // 重新随机选中地图区域
198 reSelectMapRandomArea () {
199 const length = 9;
200 this.$nextTick(() => {
201 try {
202 const map = this.$refs.centreLeft2ChartRef.chart;
203 let index = Math.floor(Math.random() * length);
204 while (index === this.preSelectMapIndex || index >= length) {
205 index = Math.floor(Math.random() * length);
206 }
207 map.dispatchAction({
208 type: "mapUnSelect",
209 seriesIndex: 0,
210 dataIndex: this.preSelectMapIndex,
211 });
212 map.dispatchAction({
213 type: "showTip",
214 seriesIndex: 0,
215 dataIndex: index,
216 });
217 map.dispatchAction({
218 type: "mapSelect",
219 seriesIndex: 0,
220 dataIndex: index,
221 });
222 this.preSelectMapIndex = index;
223 } catch (error) {
224 console.log(error);
225 } 192 }
226 }); 193 this.intervalId = setInterval(() => {
227 }, 194 this.$refs.centreLeft2ChartRef && _self.reSelectMapRandomArea();
228 handleMapRandomSelect () { 195 }, time);
229 this.$nextTick(() => { 196 },
230 try { 197 // 重新随机选中地图区域
231 const map = this.$refs.centreLeft2ChartRef.chart; 198 reSelectMapRandomArea () {
232 const _self = this; 199 const length = 9;
233 setTimeout(() => { 200 this.$nextTick(() => {
234 _self.reSelectMapRandomArea(); 201 try {
235 }, 0); 202 const map = this.$refs.centreLeft2ChartRef.chart;
236 // 移入区域，清除定时器、取消之前选中并选中当前 203 let index = Math.floor(Math.random() * length);
237 map.on("mouseover", function (params) { 204 while (index === this.preSelectMapIndex || index >= length) {
238 clearInterval(_self.intervalId); 205 index = Math.floor(Math.random() * length);
206 }
239 map.dispatchAction({ 207 map.dispatchAction({
240 type: "mapUnSelect", 208 type: "mapUnSelect",
241 seriesIndex: 0, 209 seriesIndex: 0,
242 dataIndex: _self.preSelectMapIndex, 210 dataIndex: this.preSelectMapIndex,
211 });
212 map.dispatchAction({
213 type: "showTip",
214 seriesIndex: 0,
215 dataIndex: index,
243 }); 216 });
244 map.dispatchAction({ 217 map.dispatchAction({
245 type: "mapSelect", 218 type: "mapSelect",
246 seriesIndex: 0, 219 seriesIndex: 0,
247 dataIndex: params.dataIndex, 220 dataIndex: index,
248 }); 221 });
249 _self.preSelectMapIndex = params.dataIndex; 222 this.preSelectMapIndex = index;
250 }); 223 } catch (error) {
251 // 移出区域重新随机选中地图区域，并开启定时器 224 console.log(error);
252 map.on("globalout", function () { 225 }
253 _self.reSelectMapRandomArea(); 226 });
254 _self.startInterval(); 227 },
255 }); 228 handleMapRandomSelect () {
256 this.startInterval(); 229 this.$nextTick(() => {
257 } catch (error) { 230 try {
258 console.log(error); 231 const map = this.$refs.centreLeft2ChartRef.chart;
259 } 232 const _self = this;
260 }); 233 setTimeout(() => {
234 _self.reSelectMapRandomArea();
235 }, 0);
236 // 移入区域，清除定时器、取消之前选中并选中当前
237 map.on("mouseover", function (params) {
238 clearInterval(_self.intervalId);
239 map.dispatchAction({
240 type: "mapUnSelect",
241 seriesIndex: 0,
242 dataIndex: _self.preSelectMapIndex,
243 });
244 map.dispatchAction({
245 type: "mapSelect",
246 seriesIndex: 0,
247 dataIndex: params.dataIndex,
248 });
249 _self.preSelectMapIndex = params.dataIndex;
250 });
251 // 移出区域重新随机选中地图区域，并开启定时器
252 map.on("globalout", function () {
253 _self.reSelectMapRandomArea();
254 _self.startInterval();
255 });
256 this.startInterval();
257 } catch (error) {
258 console.log(error);
259 }
260 });
261 },
261 }, 262 },
262 }, 263 };
263 };
264 </script> 264 </script>
265 <style></style> 265 <style></style>
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-07-03 16:50:43 4 * @LastEditTime: 2023-07-03 17:00:51
5 --> 5 -->
6 <template> 6 <template>
7 <Chart :cdata="cdata" /> 7 <Chart :cdata="cdata" />
...@@ -31,8 +31,9 @@ ...@@ -31,8 +31,9 @@
31 try { 31 try {
32 let { result: res } = await work.mapViews("A20"); 32 let { result: res } = await work.mapViews("A20");
33 res.map((item) => { 33 res.map((item) => {
34
34 return ( 35 return (
35 this.cdata.push({ "name": item.areaName, "value": item.ywtotal }) 36 this.cdata.push({ "name": item.areaName, "value": item.ywtotal, "successcount": item.successcount })
36 ) 37 )
37 38
38 }); 39 });
......
1 <!-- 1 <!--
2 * @Description :工作台左侧表 2 * @Description :工作台左侧表
3 * @Autor : miaofang 3 * @Autor : miaofang
4 * @LastEditTime: 2023-07-03 16:50:16 4 * @LastEditTime: 2023-07-03 16:55:39
5 --> 5 -->
6 <template> 6 <template>
7 <div class="leftcard"> 7 <div class="leftcard">
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
78 created () { 78 created () {
79 this.getsthjqxjrtotal(); 79 this.getsthjqxjrtotal();
80 this.timer = setInterval(() => { 80 this.timer = setInterval(() => {
81 this.getsthjqxjrtotal(); 81 this.getsthjqxjrtotal()
82 }, 10000) // 10s 82 }, 10000) // 10s
83 }, 83 },
84 components: { columnar }, 84 components: { columnar },
...@@ -123,9 +123,8 @@ ...@@ -123,9 +123,8 @@
123 destroyed () { 123 destroyed () {
124 clearInterval(this.timer) 124 clearInterval(this.timer)
125 } 125 }
126 }; 126 }
127 </script> 127 </script>
128
129 <style lang="scss" scoped> 128 <style lang="scss" scoped>
130 .leftcard { 129 .leftcard {
131 width: 30%; 130 width: 30%;
......