From cd0a6ea7280382cb761dc836901cb0d22fa4538f Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Sat, 14 Aug 2021 19:31:40 +0800
Subject: [PATCH] 地图信息轮播
---
src/views/home/echarts-auto-tooltip.js | 176 +++++++++++++++++++++++++++++++++++
src/views/home/index.scss | 2
/dev/null | 0
src/views/home/index.vue | 36 +++---
src/views/home/indexEchart.js | 52 ++++++++--
5 files changed, 236 insertions(+), 30 deletions(-)
diff --git a/src/views/home/echarts-auto-tooltip.js b/src/views/home/echarts-auto-tooltip.js
new file mode 100644
index 0000000..6ea3b7c
--- /dev/null
+++ b/src/views/home/echarts-auto-tooltip.js
@@ -0,0 +1,176 @@
+(function (global) {
+ global.echartAutoTools = global.echartAutoTools || {};
+
+ /**
+ * echarts tooltip 自动轮播
+ * @author liuyishi
+ * @param chart
+ * @param chartOption
+ * @param options
+ * {
+ * interval 轮播时间间隔，单位毫秒，默认为2000
+ * loopSeries boolean类型，默认为false。
+ * true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
+ * seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
+ * 当loopSeries为true时，从seriesIndex系列开始执行.
+ * }
+ * @returns {{clearLoop: clearLoop}}
+ */
+
+ echartAutoTools.loopShowTooltip = function (chart, chartOption, options) {
+ var defaultOptions = {
+ interval: 2000,
+ loopSeries: false,
+ seriesIndex: 1,
+ updateData: null
+ };
+
+ if (!chart || !chartOption) {
+ return {};
+ }
+
+ var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
+ var seriesIndex = 1; // 系列索引
+ var timeTicket = 0;
+ var seriesLen = chartOption.series.length; // 系列个数
+ var dataLen = 0; // 某个系列数据个数
+ var chartType; // 系列类型
+ var first = true;
+
+ // 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
+ // 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
+ // 要不要添加开始series索引和开始的data索引？
+
+ if (options) {
+ options.interval = options.interval || defaultOptions.interval;
+ options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
+ options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
+ options.updateData = options.updateData || defaultOptions.updateData;
+ } else {
+ options = defaultOptions;
+ }
+
+ // 如果设置的seriesIndex无效，则默认为0
+ if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
+ seriesIndex = 1;
+ } else {
+ seriesIndex = options.seriesIndex;
+ }
+
+ function autoShowTip() {
+ function showTip() {
+ seriesIndex = 1;
+ // 判断是否更新数据
+ if (dataIndex === 0 && !first && typeof options.updateData === "function") {
+ options.updateData();
+ chart.setOption(chartOption);
+ }
+
+ var series = chartOption.series;
+ chartType = series[seriesIndex].type; // 系列类型
+ dataLen = series[seriesIndex].data.length; // 某个系列的数据个数
+
+ var tipParams = { seriesIndex: seriesIndex };
+ switch (chartType) {
+ case 'map':
+ case 'pie':
+ case 'chord':
+ tipParams.name = series[seriesIndex].data[dataIndex].name;
+ break;
+ case 'radar': // 雷达图
+ tipParams.seriesIndex = seriesIndex;
+ tipParams.dataIndex = dataIndex;
+ break;
+ default:
+ tipParams.dataIndex = dataIndex;
+ break;
+ }
+
+ if (chartType === 'pie' || chartType === 'radar') {
+ // 取消之前高亮的图形
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: options.loopSeries ? (seriesIndex === 1 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
+ dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
+ });
+
+ // 高亮当前图形
+ chart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: seriesIndex,
+ dataIndex: dataIndex
+ });
+ }
+
+ // 显示 tooltip
+ tipParams.type = 'showTip';
+ chart.dispatchAction(tipParams);
+
+ dataIndex = (dataIndex + 1) % dataLen;
+ if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完
+ seriesIndex = (seriesIndex + 1) % seriesLen;
+ }
+
+ first = false;
+ }
+
+ showTip();
+ timeTicket = setInterval(showTip, options.interval);
+ }
+
+ // 关闭轮播
+ function stopAutoShow() {
+ if (timeTicket) {
+ clearInterval(timeTicket);
+ timeTicket = 0;
+
+ if (chartType === 'pie' || chartType === 'radar') {
+ // 取消高亮的图形
+ chart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: options.loopSeries ? (seriesIndex === 1 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
+ dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
+ });
+ }
+ }
+ }
+
+ var zRender = chart.getZr();
+
+ function zRenderMouseMove(param) {
+ if (param.event) {
+ // 阻止canvas上的鼠标移动事件冒泡
+ param.event.cancelBubble = true;
+ }
+
+ stopAutoShow();
+ }
+
+ // 离开echarts图时恢复自动轮播
+ function zRenderGlobalOut() {
+ if (!timeTicket) {
+ autoShowTip();
+ }
+ }
+
+ // 鼠标在echarts图上时停止轮播
+ chart.on('mousemove', stopAutoShow);
+ zRender.on('mousemove', zRenderMouseMove);
+ zRender.on('globalout', zRenderGlobalOut);
+
+ autoShowTip();
+
+ return {
+ clearLoop: function () {
+ if (timeTicket) {
+ clearInterval(timeTicket);
+ timeTicket = 0;
+ }
+
+ chart.off('mousemove', stopAutoShow);
+ zRender.off('mousemove', zRenderMouseMove);
+ zRender.off('globalout', zRenderGlobalOut);
+ }
+ };
+ };
+})(window);
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 2547ffb..3bf427e 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -590,7 +590,7 @@
}
.leftEchartTitle4{
margin-top: 37px;
- right: 35px;
+ right: 22px;
.block1{
background: #ffb980;
}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 866d17f..a99e83a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -30,13 +30,13 @@
<span>{{ leftData.fw }}</span>
<span>个</span>
</div>
- <div class="leftEchartTitle leftEchartTitle4">
+ <!-- <div class="leftEchartTitle leftEchartTitle4">
<div class="block1"></div>
<span>武装守押公司</span>
<span>{{ leftData.wz }}</span>
<span>个</span>
- </div>
- <div class="leftEchartTitle leftEchartTitle5">
+ </div> -->
+ <div class="leftEchartTitle leftEchartTitle4">
<div class="block1"></div>
<span>跨区域保安公司</span>
<span>{{ leftData.kqy }}</span>
@@ -60,11 +60,11 @@
</div>
<div class="middle" v-loading="middleloading">
<div class="mapimg">
- <div class="textBox">
+ <!-- <div class="textBox">
<transition name="slide">
<p class="text" :key="text.id">{{ text.val }}</p>
</transition>
- </div>
+ </div> -->
<!-- <div></div> -->
<div class="mapBtn" @click="setMapData(2)">
@@ -336,22 +336,23 @@
</template>
<script>
-import "ol/ol.css";
+import './echarts-auto-tooltip'
+// import "ol/ol.css";
import * as echarts from "echarts";
import optionJs from "./indexEchart";
-import TileLayer from "ol/layer/Tile";
+// import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
-import { Map, View } from "ol";
-import { Tile, Group } from "ol/layer";
-import { OSM, TileJSON } from "ol/source";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
+// import { Map, View } from "ol";
+// import { Tile, Group } from "ol/layer";
+// import { OSM, TileJSON } from "ol/source";
+// import VectorLayer from "ol/layer/Vector";
+// import VectorSource from "ol/source/Vector";
-import Feature from "ol/Feature.js";
-import Point from "ol/geom/Point.js";
-import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
-import GeoJSON from "ol/format/GeoJSON";
-import axios from "../../router/axios";
+// import Feature from "ol/Feature.js";
+// import Point from "ol/geom/Point.js";
+// import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
+// import GeoJSON from "ol/format/GeoJSON";
+// import axios from "../../router/axios";
import {
securityTotal,
holderNum,
@@ -532,6 +533,7 @@
this.echarts.mapEchart = echarts.init(document.getElementById("map"));
}
this.echarts.mapEchart.setOption(optionJs.middleData(data, type));
+ echartAutoTools.loopShowTooltip(this.echarts.mapEchart, optionJs.middleData(data, type), {loopSeries: true});
},
setMapData(type) {
this.middleloading = true;
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 74b89fc..716e7b8 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -60,10 +60,10 @@
// // }
// },
grid: {
- top: '10%',
+ top: '5%',
left: "5%",
- right: "6%",
- bottom: "10%",
+ right: "8%",
+ bottom: "5%",
containLabel: true
},
xAxis: {
@@ -719,26 +719,52 @@
let obj = {};
if (type === 1) {
name = '保安员名称';
- label = '名称';
+ label = "押运人员：" +
+ item.name +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
symbolUrl = require('@/assets/img/people.png')
obj = {
- name: item.name,
+ name: label,
value: allData['geoData'][i]
}
} else if (type === 2) {
name = '押运车辆';
- label = '押运车辆车牌号';
+ label =
+ "押运车辆车牌号：" +
+ item.carNum +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.company +
+ "<br />联系人：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
symbolUrl = require('@/assets/img/car.png')
obj = {
- name: item.carNum,
- value: allData['geoData'][i]
+ name: label,
+ value: allData['geoData'][i],
}
} else if (type === 3) {
name = '枪支';
- label = '枪支编号';
+ label = "枪支编号：" +
+ item.number +
+ "<br />当前位置：" +
+ item.location +
+ "<br />所属公司：" +
+ item.company +
+ "<br />负责人：" +
+ item.linkman +
+ "<br />联系电话：" +
+ item.tel;
symbolUrl = require('@/assets/img/gun.png')
obj = {
- name: item.number,
+ name: label,
value: allData['geoData'][i]
}
}
@@ -759,13 +785,15 @@
if (typeof (params.value)[1] == "undefined") {
return params.name;
} else {
- return label + ' : ' + params.name;
+ debugger
+ return params.name;
}
},
backgroundColor: "#031952", //设置背景图片 rgba格式
color: "#fff",
borderWidth: "0", //边框宽度设置1
- // borderColor: "gray", //设置边框颜色
+ borderColor: "gray", //设置边框颜色
+ extraCssText: 'box-shadow: 0 0 3px rgba( 211,211,211, 0.5);',
textStyle: {
color: "#fff" //设置文字颜色
},
diff --git a/src/views/home/offlineMapTiles/4/12/6.png b/src/views/home/offlineMapTiles/4/12/6.png
deleted file mode 100644
index c116da2..0000000
--- a/src/views/home/offlineMapTiles/4/12/6.png
+++ /dev/null
Binary files differ
--
Gitblit v1.9.3