From 19ebfac8e4b4a7c717e8c19a930de7c359a6cfee Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期三, 29 九月 2021 10:12:54 +0800
Subject: [PATCH] 地图数据提交
---
src/components/charts/chinaMap.vue | 472 ++++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 403 insertions(+), 69 deletions(-)
diff --git a/src/components/charts/chinaMap.vue b/src/components/charts/chinaMap.vue
index da7216e..a3062ca 100644
--- a/src/components/charts/chinaMap.vue
+++ b/src/components/charts/chinaMap.vue
@@ -1,84 +1,418 @@
<template>
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="chinaMap" id="chinaMap">
+ <div class="echarts-wrapper">
+ <div class="echarts-content" ref="chart" id="cityChart">
- </div>
- </div>
+ </div>
+ </div>
</template>
<script>
import * as echarts from 'echarts';
-import {
- getAllMapOutlineAction,
+import {
+ searchMap,
+ searchMapHomeState,
+ getAllMapOutlineAction,
} from "../../assets/js/api";
+
+import HomeNormal from '@/assets/images/home.png'
+let mapHomeImage = new Image();
+mapHomeImage.src = HomeNormal;
+// 姝ｅ父鐨勫浘鏍�
+import HomeNormalImage from '@/assets/images/home-normal.png';
+let homeNormalImage = new Image();
+homeNormalImage.src = HomeNormalImage;
+// 鍏呯數鐨勫浘鏍�
+import HomeChargeImage from '@/assets/images/home-charge.png';
+let homeChargeImage = new Image();
+homeChargeImage.src = HomeChargeImage;
+// 鍛婅鍥炬爣
+import HomeWarnImage from '@/assets/images/home-warn.png';
+let homeWarnImage = new Image();
+homeWarnImage.src = HomeWarnImage;
+// 鏀剧數鍥炬爣
+import HomeDischargeImage from '@/assets/images/home-discharge.png';
+let homeDischargeImage = new Image();
+homeDischargeImage.src = HomeDischargeImage;
+const behindOverlay = {
+ animate: "",
+ img: ""
+};
+const warnOverlay = {
+ animate: "",
+ img: ""
+};
+const timeoutOverlay = {
+ animate: "",
+ img: ""
+};
+const normalOverlay = {
+ animate: "",
+ img: ""
+};
+let addHomeData = [];
+let chartData = []; //chart鏁版嵁
+let abnormalArr = []; //寮傚父鏁扮粍
+let tempData = []; //绔欑偣鏁扮粍
+let chart, chartLng, chartLat;
+
export default {
- name: "chinaMap",
- chart: "",
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- name: {
- type: String,
- default: ""
- },
- top: {
- type: Number,
- default: 15,
- },
- bottom: {
- type: Number,
- default: 60
- },
- space: {
- type: Number,
- default: 4
- },
- },
- data() {
- return {
+ name: "chinaMap",
+ chart: "",
+ chartData: "",
+ data() {
+ return {
+ mapName: 'zhongguo'
+ }
+ },
+ methods: {
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ setData(sendData) {
+ this.$options.chartData = sendData;
+ let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
+ echarts.registerMap('map', geoJson);
+ // 鏁翠綋閰嶇疆椤�
+ let option = {
+ tooltip: {
+ trigger: 'item',
+ formatter: function (params) {
+ if (params.componentSubType == "map") {
+ return ''
+ } else if (params.componentSubType == "scatter") {
+ return params.name;
+ }
+ }
+ },
+ visualMap: {
+ show: false,
+ min: 0,
+ max: 500,
+ left: 'left',
+ top: 'bottom',
+ text: ['楂�', '浣�'], // 鏂囨湰锛岄粯璁や负鏁板�兼枃鏈�
+ calculable: true,
+ seriesIndex: [1],
+ inRange: {}
+ },
+ geo: {
+ map: "map",
+ layoutCenter: ["55%", "50%"],
+ layoutSize: "100%",
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ emphasis: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ roam: true, //鏄惁鍏佽缂╂斁
+ mapLocation: {
+ width: "110%",
+ height: "97%"
+ },
+ itemStyle: {
+ normal: {
+ borderColor: 'rgba(147, 235, 248, 1)',
+ borderWidth: 1,
+ areaColor: {
+ type: 'radial',
+ x: 0.5,
+ y: 0.5,
+ r: 0.8,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(147, 235, 248, 0)' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: 'rgba(147, 235, 248, .2)' // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ },
+ shadowColor: 'rgba(128, 217, 248, 1)',
+ shadowOffsetX: -2,
+ shadowOffsetY: 2,
+ shadowBlur: 10
+ },
+ emphasis: {
+ areaColor: '#1ecee5',
+ borderWidth: 0,
+ label: {
+ show: false
+ }
+ }
+ }
+ },
+ series: this.getSeries(sendData)
+ };
+ // 璁剧疆閰嶇疆椤�
+ this.setOption(option);
+ },
+ resize() {
+ setTimeout(() => {
+ this.$options.chart.resize();
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
+ }, 300)
+ },
+ getSeries(opt) {
+ // 鏈厤缃畇eries
+ if (!opt || !opt.series) {
+ return [];
+ }
+ // 璁剧疆閰嶇疆椤�
+ let series = opt.series
+ // 杩斿洖
+ return series;
+ },
+ 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;
+ }
+ });
+ }
+ this.$nextTick(() => {
+ this.initPage();
+ });
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ },
+ initPage() {
+ // 鍒濆鍖栧湴鍥�
+ this.initCityChart();
+ chart = echarts.init(document.getElementById('cityChart'));
+ chart.off('click'); //闃叉chart鐐瑰嚮瑙﹀彂澶氭
+ chart.on("click", params => { //鐐瑰嚮璺宠浆瀹炴椂鏁版嵁
+ if (params.seriesType == "scatter") {
+ this.$router.push({
+ path: '/functionList'
+ })
+ }
+ });
+ },
+ initCityChart() {
+ searchMap().then((res) => {
+ let rs = JSON.parse(res.data.result);
+ let list = this.mergeMapInfos(rs);
+ if (list != undefined && list.length > 0) {
+ list.map((item, index) => {
+ item.name = item.StationName;
+ item.value = [];
+ item.value.push(item.longitude);
+ item.value.push(item.latitude);
+ tempData.push(item)
+ })
+ this.searchChartHomeState();
- }
- },
- methods: {
- 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;
- }
- });
- }
- if (!this.mapName) {
- this.mapStyle = "鐧惧害鍦板浘";
- }
- this.mapNameCopy = this.mapName;
- this.$nextTick(() => {
- // this.initPage();
- });
- })
- .catch((err) => {
- console.log(err);
- });
- },
- },
- mounted() {
- // 鍒濆鍖栭〉闈�
- this.getAllMapOutlineAction();
-
- },
- destroyed() {
+ let mapDotList = list.map(data => {
+ return {
+ lng: data.longitude,
+ lat: data.latitude,
+ title: data.StationName,
+ data: data,
+ name: data.StationName,
+ geometry: {
+ type: 'Point',
+ coordinates: [data.longitude, data.latitude]
+ }
+ }
+ });
+ addHomeData = mapDotList;
+ } else {
+ this.initChart([], []);
+ }
+ }).catch((err) => {
+ console.log(err)
+ })
+ },
+ searchChartHomeState() {
+ searchMapHomeState().then((res) => {
+ let rsState = JSON.parse(res.data.result);
+ let arr = [];
+ abnormalArr = [];
+ if (rsState.code === 1) {
+ let data = rsState.data;
+ data.map((item, i) => {
+ let infos = tempData.filter((jtem) => {
+ return jtem.StationId == item.StationId
+ })
- }
+ if (infos.length > 0) {
+ let info = JSON.parse(JSON.stringify(infos[0]));
+ switch (item.num) {
+ case 1: // 钀藉悗
+ info.img = HomeDischargeImage;
+ info.color = '#ff6a6a';
+ abnormalArr.push(info);
+ break;
+ case 2: // 鍛婅
+ info.img = HomeWarnImage;
+ info.color = '#d4ac6e';
+ abnormalArr.push(info);
+ break;
+ case 3:
+ info.img = HomeChargeImage;
+ info.color = '#4ba1fa';
+ abnormalArr.push(info);
+ break;
+ default:
+ info.img = HomeNormalImage;
+ break;
+ }
+ arr.push(info)
+ }
+ })
+ let arrId = [];
+ for (let item of arr) {
+ if (arrId.indexOf(item['StationId']) == -1) {
+ arrId.push(item['StationId']);
+ chartData.push(item);
+ }
+ }
+ this.initChart(chartData, abnormalArr);
+
+ }
+ }).catch((err) => {
+ console.log(err)
+ })
+ },
+ initChart(chartData, abnormalArr) { //鍒濆鍖朿hart鍥�
+ let option = {};
+ if (abnormalArr.length > 0) {
+ option = {
+ series: [{ //鍥剧墖
+ name: '鍥剧墖',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ symbol: function (value, params) {
+ return 'image://' + params.data.img
+ },
+ symbolSize: [26, 26],
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ data: chartData,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ zlevel: 2
+ }, { //娉㈢汗鐐�
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ showEffectOn: 'render',
+ zlevel: 1,
+ rippleEffect: {
+ period: 4,
+ scale: 4,
+ brushType: 'fill'
+ },
+ hoverAnimation: false,
+ label: {
+ normal: {
+ show: false
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: function (value, params) {
+ return value.data.color
+ },
+ shadowBlur: 8,
+ shadowColor: function (value, params) {
+ return value.data.color
+ },
+ }
+ },
+ symbolSize: [15, 15],
+ data: abnormalArr
+ }]
+ };
+ } else {
+ option = {
+ series: [{ //鍥剧墖
+ name: '鍥剧墖',
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ symbol: function (value, params) {
+ return 'image://' + params.data.img
+ },
+ symbolSize: [26, 26],
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ data: chartData,
+ showEffectOn: 'render',
+ rippleEffect: {
+ brushType: 'stroke'
+ },
+ hoverAnimation: true,
+ zlevel: 2
+ }]
+ };
+ }
+ this.setData(option);
+ window.addEventListener('resize', this.resize);
+ },
+ mergeMapInfos(list) {
+ var mergeData = [];
+ // 閬嶅巻list
+ for (var i = 0; i < list.length; i++) {
+ var _list = list[i];
+ var isIn = this.checkMapInfoIsIn(_list, mergeData);
+ if (isIn == -1) {
+ mergeData.push(_list);
+ }
+ }
+ // 杩斿洖鍚堝苟鍊�
+ return mergeData;
+ },
+ checkMapInfoIsIn(mapInfo, mergeData) {
+ var rs = -1;
+ // 閬嶅巻mergeData
+ for (var i = 0; i < mergeData.length; i++) {
+ var _mergeData = mergeData[i];
+ // 缁忕含搴︾浉鍚�
+ if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
+ rs = i;
+ }
+ }
+ return rs;
+ },
+ },
+ mounted() {
+ // 鍒濆鍖栭〉闈�
+ this.getAllMapOutlineAction();
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.chart);
+
+
+ },
+ destroyed() {
+ window.removeEventListener('resize', this.resize);
+ }
}
</script>
<style scoped>
-
</style>
\ No newline at end of file
--
Gitblit v1.9.1