From 6a67b7054caa33f2999e8b05538e39ccea55ed07 Mon Sep 17 00:00:00 2001
From: whycwx <1272078254@qq.com>
Date: 星期三, 29 九月 2021 09:14:32 +0800
Subject: [PATCH] 修改地图
---
src/components/charts/chinaMap.vue | 323 ++++-------------------------------------------------
1 files changed, 28 insertions(+), 295 deletions(-)
diff --git a/src/components/charts/chinaMap.vue b/src/components/charts/chinaMap.vue
index 1855e0c..da7216e 100644
--- a/src/components/charts/chinaMap.vue
+++ b/src/components/charts/chinaMap.vue
@@ -8,7 +8,9 @@
<script>
import * as echarts from 'echarts';
-
+import {
+ getAllMapOutlineAction,
+} from "../../assets/js/api";
export default {
name: "chinaMap",
chart: "",
@@ -41,307 +43,38 @@
}
},
methods: {
- setOption(opt) {
- // 璁剧疆閰嶇疆椤�
- this.$options.chart.setOption(opt);
-
- },
- setData(data) {
- console.log(data);
- let geoJson = require(`../../../public/mapJson/zhongguo.json`);
- echarts.registerMap('china', geoJson);
- let newarr = [
- {
- name: "姝︽眽",//姝︽眽
- value: [113.41, 31.22, 100],
- color:"#f44336",
- curveness:'-1',
- linesColor:"#fff",
- arrowColor:"#000"
-
- },
- {
- name: "浣涘北",//浣涘北
- value: [113.122717, 23.028762],
- color:"#4AFD88",
- curveness:'-0.2',
- linesColor:"#4AFD88",
- arrowColor:"#4AFD88"
- },
-
- {
- name: "绂忓窞",//绂忓窞
- value: [118.28, 26.08],
- color:"#fff100",
- curveness:'-0.2',
- linesColor:"#FFF100",
- arrowColor:"#FFF100"
- },
- {
- name: "闀挎槬",//闀挎槬
- value: [125.35, 43.88],
- color:"#ECA0BA",
- curveness:'-0.2',
- linesColor:"#00FEFF",
- arrowColor:"#F8A036",
- borderColor:"#F8A036"
- },
- {
- name: "澶╂触",//澶╂触
- value: [117.04, 39.33],
- color:"#4AFD88",
- curveness:'0.2',
- linesColor:"#4AFD88",
- arrowColor:"#4AFD88"
- },
- {
- name: "澶師",//澶師
- value: [112.30, 37.99],
- color:"#fff100",
- curveness:'0.2',
- linesColor:"#FFF100",
- arrowColor:"#FFF100"
- },
- {
- name: "閾跺窛",//閾跺窛
- value: [106.26667, 37.46667],
- color:"#4AFD88",
- curveness:'0.2',
- linesColor:"#4AFD88",
- arrowColor:"#1A6BF0"
- },
-
- ];
- let LableData = [];
- let series = [
- // 甯歌鍦板浘
- {
- type: 'map',
- mapType: 'china',
- aspectScale: 0.85,
- layoutCenter: ["50%", "65%"], //鍦板浘浣嶇疆
- layoutSize: '130%',
- zoom: 1, //褰撳墠瑙嗚鐨勭缉鏀炬瘮渚�
- // roam: true, //鏄惁寮�鍚钩娓告垨缂╂斁
- scaleLimit: { //婊氳疆缂╂斁鐨勬瀬闄愭帶鍒�
- min: 1,
- max: 2
- },
- // 榛樿閫変腑鐨勬暟鎹�
- data:[
- {name:'骞夸笢',selected:true},
- {name:'婀栧寳',selected:true},
- {name:'灞辫タ',selected:true},
- {name:'鍚夋灄',selected:true},
- {name:'绂忓缓',selected:true},
- {name:'瀹佸',selected:true},
- ],
- itemStyle: {
- normal: {
- areaColor: '#00B2E0',
- borderColor: '#021651',
- borderWidth: 1
-
-
- },
- emphasis: {
- areaColor: '#1A6BF0',
- label: {
- color: "#fff"
- }
-
- }
- },
-
-
- },
-
- {
-
- type: 'lines',
- zlevel: 3,
- symbol: 'circle',
- symbolSize: [5, 5],
- color: '#ff8003',
- opacity: 1,
- label: {
- show: true,
- padding: [10, 20],
- color: '#fff',
- backgroundColor: "#1a3961",
- borderColor: '#aee9fb',
- borderWidth: 1,
- borderRadius: 6,
- formatter(params) {
- console.log(params)
- let arr = [params.name, "涓婅锛�" + params.value[1] + "G/s", "涓嬭锛�" + params.value[0] + "G/s"];
- return arr.join("\n")
- },
- textStyle: {
- align: 'left',
- lineHeight: 20,
- }
- },
- lineStyle: {
- type: 'solid',
- color: '#fff',
- width: 0.5,
- opacity: 1,
-
- },
- data: LableData,
-
-
- },
- ];
- newarr.forEach(item=>{
- series.push( // 鍖哄煙鏁ｇ偣鍥�
- {
- type: 'effectScatter',
- coordinateSystem: 'geo',
- zlevel: 12,
- symbolSize: 10,
- rippleEffect: { //鍧愭爣鐐瑰姩鐢�
- period: 3,
- scale: 5,
- brushType: 'fill'
- },
- label: {
- normal: {
- show: true,
- position: 'right',
- formatter: '{b}',
- color: '#fff',
- fontWeight: "bold",
- fontSize: 13
- }
- },
-
- data: [
- {
- name: item.name,
- value: item.value
- }
- ],
- itemStyle: { //鍧愭爣鐐归鑹�
- normal: {
- show: true,
- color: item.color,
- borderColor:item.borderColor?item.borderColor:'none',
- shadowBlur: 1,
- shadowColor: '#fff'
- },
- emphasis: {
- areaColor: '#f00'
- }
- },
-
- });
- if(item.name !="姝︽眽"){
- series.push(
- // 绾� 鍜� 鐐�
- {
- name: item.name,
- type: 'lines',
- zlevel: 2,
- effect: {
- show: true,
- period: 5,//娴佸姩閫熷害 瓒婂皬瓒婂揩
- trailLength: 0.7,
- color: item.arrowColor, //娴佸姩鐐归鑹�
- symbol: 'arrow',
- symbolSize: 6
- },
- lineStyle: {
- normal: {
- color: item.linesColor,//绾跨殑棰滆壊
- width: 1.5,
- opacity: 0.8,
- curveness: item.curveness
- }
- },
- data: [{
- fromName: "姝︽眽",
- toName: item.name,
- coords:[
- [ 113.41, 31.22 ],
- item.value
- ]
- }]
-
- },
- )
+ getAllMapOutlineAction() {
+ //鏌ヨ婵�娲昏疆寤撳浘
+ getAllMapOutlineAction().then((res) => {
+ let rs = JSON.parse(res.data.result);
+ if (rs.code == 1) {
+ let data = rs.data;
+ data.map((item, index) => {
+ if (item.status == 1) {
+ this.mapName = item.name;
+ }
+ });
}
- })
- let option = {
- // backgroundColor: '#000f1e',
- geo: {
- map: 'china',
- aspectScale: 0.85,
- layoutCenter: ["50%", "65%"], //鍦板浘浣嶇疆
- layoutSize: '130%',
- itemStyle: {
- normal: {
- shadowColor: '#276fce',
- shadowOffsetX: 0,
- shadowOffsetY: 15,
- opacity: 0.5,
- },
- emphasis: {
- areaColor: '#276fce',
-
- }
- },
- regions: [
- {
- name: '鍗楁捣璇稿矝',
- itemStyle: {
- areaColor: 'rgba(0, 10, 52, 1)',
-
- borderColor: 'rgba(0, 10, 52, 1)',
- normal: {
- opacity: 0,
- label: {
- show: false,
- color: "#009cc9",
- }
- },
- },
- label: {
- show: false,
- color: '#FFFFFF',
- fontSize: 12,
- },
- },
- ],
-
- },
- series: series
- };
- this.$nextTick(function(){
- this.setOption(option);
- })
-
+ if (!this.mapName) {
+ this.mapStyle = "鐧惧害鍦板浘";
+ }
+ this.mapNameCopy = this.mapName;
+ this.$nextTick(() => {
+ // this.initPage();
+ });
+ })
+ .catch((err) => {
+ console.log(err);
+ });
},
- resize() {
- let self = this;
- setTimeout(() => {
- self.$options.chart.resize();
- self.setData(null);
- }, 300)
- // this.$options.chart.resize();
- }
},
mounted() {
- this.$nextTick(function(){
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.chinaMap);
- window.addEventListener('resize', this.resize);
- })
+ // 鍒濆鍖栭〉闈�
+ this.getAllMapOutlineAction();
},
destroyed() {
- window.removeEventListener('resize', this.resize);
+
}
}
</script>
--
Gitblit v1.9.1