<!-- echarts模板，有局部刷新需要在mounted自行开启 -->
|
<template>
|
<div class="echarts-title">
|
<div style="text-align: center">
|
<p style="border-left: 5px solid #42C3E8;
|
border-right: 5px solid #42C3E8;
|
background-color: #183E5F;
|
padding: 0 5px;">都江堰市综合滥用平均指数</p>
|
<p style="color:#FF6B42;">68</p>
|
</div>
|
<div style="text-align: center;margin-left: 20px">
|
<p style="border-left: 5px solid #42C3E8;
|
border-right: 5px solid #42C3E8;
|
background-color: #183E5F;
|
padding: 0 5px;">都江堰市禁毒工作满意度</p>
|
<p style="color:#42C3E8;">97</p>
|
</div>
|
</div>
|
<!-- <div ref="refChart" :style="{ height: YHOne + 'px'}"></div>-->
|
<div ref="refChart" style="width: 999px;height: 999px;"></div>
|
</template>
|
|
<script setup lang="ts">
|
// 导入vue状态
|
import { reactive, ref, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted } from 'vue';
|
import * as echarts from 'echarts';
|
// 导入echarts皮肤
|
import skin from '@/assets/theme/skin';
|
// const henanJson = import("@/assets/map/henan.json");
|
import henanData from '@/assets/map/henan.json';
|
import zigongData from '@/assets/map/zigong.json';
|
type henanData = {};
|
type zigongData = {};
|
const henanJson = zigongData as zigongData;
|
// 获取ref
|
let refChart = ref<any>()
|
// 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
|
// 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
|
// 获取body的实际高度 (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
|
let screenHeight = ref(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
|
let screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
|
let chartInstance = ref();
|
const allData = ref({
|
荣县: [
|
"市内街镇排名：6",
|
"毒品滥用指数：34",
|
"毛发抽检报到率：90%",
|
"毛发抽检报到率：90%",
|
"毛发抽检阳性率：91%",
|
"戒断三年未复吸人员查处率：95%",
|
"在册吸毒人员滋事行为：92",
|
"易制毒化学品管控问题：87",
|
"辖区内出现聚集滥用窝点数：32",
|
],
|
贡井区: [
|
"外流涉毒人员数：79个",
|
"毒品中转集散数量：9个",
|
"未成年涉毒人员数：2人",
|
"新发现吸毒人员数：7人",
|
"制毒窝点数量：32个",
|
"外协溯源被查获数：12起",
|
],
|
自流井区: [
|
"视频监控设备：84041",
|
"人脸监控设备：77606",
|
"车辆监控设备：2798",
|
|
],
|
大安区: [
|
"视频监控设备：84041",
|
"人脸监控设备：77606",
|
"车辆监控设备：2798",
|
|
],
|
沿滩区: [
|
"视频监控设备：84041",
|
"人脸监控设备：77606",
|
"车辆监控设备：2798",
|
|
],
|
富顺县: [
|
"视频监控设备：84041",
|
"人脸监控设备：77606",
|
"车辆监控设备：2798",
|
|
],
|
|
});
|
let YHOne = ref();
|
// 自适应浏览器获取宽高大小定时器
|
const screenTimer = ref();
|
// 局部刷新tooltip定时器
|
const tooltipTimer = ref();
|
|
onBeforeMount( () => {
|
// Echarts页面加载进来时，首先设置高度进行显示图表进行初始化
|
YHOne.value = Math.round(screenHeight.value * 0.45);
|
})
|
|
onMounted( () => {
|
// 页面大小改变时触发
|
window.addEventListener('resize',getScreenHeight, false);
|
// 页面大小改变时触发
|
window.addEventListener('resize',getScreenWidth, false);
|
// 鼠标移动时触发
|
//window.addEventListener('mousemove',getHeight, false);
|
// 自适应浏览器获取宽高大小定时器
|
resizeScreen();
|
// 图表初始化
|
initChart(allData.value);
|
// 获取接口数据
|
getData();
|
// 调用Echarts图表自适应方法
|
screenAdapter();
|
// Echarts图表自适应
|
window.addEventListener("resize", screenAdapter);
|
// 局部刷新定时器
|
gettooltipTimer();
|
})
|
|
onBeforeUnmount(() => {
|
// 销毁Echarts图表
|
chartInstance.value.dispose();
|
chartInstance.value = null;
|
})
|
|
onUnmounted(() => {
|
// 清除自适应屏幕定时器
|
clearInterval(screenTimer.value);
|
screenTimer.value = null;
|
// 清除局部刷新定时器
|
clearInterval(tooltipTimer.value);
|
tooltipTimer.value = null;
|
// 页面大小改变时触发销毁
|
window.removeEventListener('resize',getScreenHeight, false);
|
// 页面大小改变时触发销毁
|
window.removeEventListener('resize',getScreenWidth, false);
|
// Echarts图表自适应销毁
|
window.removeEventListener("resize", screenAdapter);
|
})
|
|
// 自适应浏览器获取宽高大小定时器
|
const resizeScreen = () => {
|
screenTimer.value = setInterval(() => {
|
getScreenHeight();
|
getScreenWidth();
|
}, 200)
|
}
|
// 获取浏览器高度进行自适应
|
const getScreenHeight = () => {
|
screenHeight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
|
// 四舍五入取整数
|
YHOne.value = Math.round(screenHeight.value * 0.45);
|
//console.log("高度->"+screenHeight +"-"+ YHOne);
|
}
|
// 字体大小根据宽度自适应
|
const getScreenWidth = () => {
|
screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
//console.log("宽度->"+screenWidth);
|
}
|
const initChart = (data: any) => {
|
// 覆盖默认主题
|
echarts.registerTheme('myTheme', skin);
|
// 定义实例
|
chartInstance.value = echarts.init(refChart.value, 'myTheme');
|
// 河南地图
|
echarts.registerMap("henan", henanJson);
|
const initOption = {
|
title: {
|
text: "",
|
},
|
tooltip: {
|
trigger: "item",
|
axisPointer: {
|
type: "cross",
|
label: {
|
backgroundColor: "#6a7985",
|
},
|
},
|
formatter: function (params: any) {
|
if (params.name == "荣县") {
|
let yu = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '天马镇' + "</span>" + "<p style='color: #00eaff'>"+"毒品滥用"+"</p>" ;
|
for (let a = 0; a < data.荣县.length; a++) {
|
yu +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.荣县[a] + "</p>";
|
}
|
let er = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '幸福街道' + "</span>"+ "<p style='color: #00eaff'>"+"风险管控"+"</p>" ;
|
for (let a = 0; a < data.贡井区.length; a++) {
|
er +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.贡井区[a] + "</p>";
|
}
|
// return yu;
|
return yu + er;
|
} else if (params.name == "贡井区") {
|
let yu = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '天马镇' + "</span>" + "<p style='color: #00eaff'>"+"毒品滥用"+"</p>" ;
|
for (let a = 0; a < data.荣县.length; a++) {
|
yu +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.荣县[a] + "</p>";
|
}
|
let er = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '幸福街道' + "</span>"+ "<p style='color: #00eaff'>"+"风险管控"+"</p>" ;
|
for (let a = 0; a < data.贡井区.length; a++) {
|
er +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.贡井区[a] + "</p>";
|
}
|
// return yu;
|
return yu + er;
|
} else if (params.name == "大安区") {
|
let yu = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '天马镇' + "</span>" + "<p style='color: #00eaff'>"+"毒品滥用"+"</p>" ;
|
for (let a = 0; a < data.荣县.length; a++) {
|
yu +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.荣县[a] + "</p>";
|
}
|
let er = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '幸福街道' + "</span>"+ "<p style='color: #00eaff'>"+"风险管控"+"</p>" ;
|
for (let a = 0; a < data.贡井区.length; a++) {
|
er +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.贡井区[a] + "</p>";
|
}
|
// return yu;
|
return yu + er;
|
} else if (params.name == "沿滩区") {
|
let yu = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '天马镇' + "</span>" + "<p style='color: #00eaff'>"+"毒品滥用"+"</p>" ;
|
for (let a = 0; a < data.荣县.length; a++) {
|
yu +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.荣县[a] + "</p>";
|
}
|
let er = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '幸福街道' + "</span>"+ "<p style='color: #00eaff'>"+"风险管控"+"</p>" ;
|
for (let a = 0; a < data.贡井区.length; a++) {
|
er +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.贡井区[a] + "</p>";
|
}
|
// return yu;
|
return yu + er;
|
} else if (params.name == "富顺县") {
|
let yu = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '天马镇' + "</span>" + "<p style='color: #00eaff'>"+"毒品滥用"+"</p>" ;
|
for (let a = 0; a < data.荣县.length; a++) {
|
yu +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.荣县[a] + "</p>";
|
}
|
let er = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '幸福街道' + "</span>"+ "<p style='color: #00eaff'>"+"风险管控"+"</p>" ;
|
for (let a = 0; a < data.贡井区.length; a++) {
|
er +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.贡井区[a] + "</p>";
|
}
|
// return yu;
|
return yu + er;
|
}else {
|
let yu = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '天马镇' + "</span>" + "<p style='color: #00eaff'>"+"毒品滥用"+"</p>" ;
|
for (let a = 0; a < data.荣县.length; a++) {
|
yu +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.荣县[a] + "</p>";
|
}
|
let er = "<span style='color: deepskyblue;font-weight: bold'>" + "都江堰市 "+ "</span>" + "<span style='color: darkturquoise;font-weight: bold'>" + '幸福街道' + "</span>"+ "<p style='color: #00eaff'>"+"风险管控"+"</p>" ;
|
for (let a = 0; a < data.贡井区.length; a++) {
|
er +=
|
"<p style='text-align:left;color: white';font-weight: bold>" + data.贡井区[a] + "</p>";
|
}
|
// return yu;
|
return yu + er;
|
}
|
},
|
confine: true,
|
},
|
geo: [{
|
map: "henan",
|
// aspectScale: 0.85,
|
// zoom: 1.2,
|
// top: '22%',//***********重点**********距离顶部的位置，每层向下一个百分比
|
// left: '5%',
|
// z: 5,
|
roam: false, //不开启缩放和平移
|
show: true,
|
silent: true,
|
zlevel: 1,
|
regions: [
|
{
|
// 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
|
name: "荣县", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
|
itemStyle: {
|
normal: {
|
opacity: 0.5, // 透明度
|
borderColor: "#acb159", // 省份界线颜色
|
borderWidth: 0.5, // 省份界线的宽度
|
areaColor: "#4B83D9", // 城市颜色
|
},
|
},
|
},
|
{
|
// 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
|
name: "贡井区", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
|
itemStyle: {
|
normal: {
|
opacity: 0.5, // 透明度
|
borderColor: "#acb159", // 省份界线颜色
|
borderWidth: 0.5, // 省份界线的宽度
|
areaColor: "#AF298B", // 整个省份的颜色
|
},
|
},
|
},
|
{
|
// 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
|
name: "自流井区", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
|
itemStyle: {
|
normal: {
|
opacity: 0.5, // 透明度
|
borderColor: "#acb159", // 省份界线颜色
|
borderWidth: 0.5, // 省份界线的宽度
|
areaColor: "#6739B6", // 整个省份的颜色
|
},
|
},
|
},
|
{
|
// 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
|
name: "大安区", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
|
itemStyle: {
|
normal: {
|
opacity: 0.5, // 透明度
|
borderColor: "#acb159", // 省份界线颜色
|
borderWidth: 0.5, // 省份界线的宽度
|
areaColor: "#39B54A", // 整个省份的颜色
|
},
|
},
|
},
|
{
|
// 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
|
name: "沿滩区", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
|
itemStyle: {
|
normal: {
|
opacity: 0.5, // 透明度
|
borderColor: "#e6731c", // 省份界线颜色
|
borderWidth: 0.5, // 省份界线的宽度
|
areaColor: "#F37B1D", // 整个省份的颜色
|
},
|
},
|
},
|
{
|
// 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
|
name: "富顺县", // 对应的是import "./china" 数据中的名称如: name: "广东省"(下面有截图)
|
itemStyle: {
|
normal: {
|
opacity: 0.5, // 透明度
|
borderColor: "#e6731c", // 省份界线颜色
|
borderWidth: 0.5, // 省份界线的宽度
|
areaColor: "#0081FF", // 整个省份的颜色
|
},
|
},
|
},
|
|
],
|
}],
|
series: [
|
{
|
name: "henan",
|
type: "map",
|
mapType: "henan", // 自定义扩展图表类型
|
// layoutCenter: ['50%', '50%'],
|
// layoutSize: "80%",
|
itemStyle: {
|
normal: {
|
borderWidth: 1, //区域边框宽度
|
borderColor: "#58B9E8", //区域边框颜色
|
areaColor: "#ffefd5", //区域颜色
|
label: {
|
show: true,
|
textStyle: {
|
color: "#000",
|
//fontWeight: 600,
|
//fontSize: 13,
|
},
|
},
|
},
|
emphasis: {
|
areaColor: "#13335A",
|
borderColor: "#89b7e5",
|
borderWidth: 1,
|
shadowOffsetY: 5,
|
shadowColor: "#1863DE",
|
label: {
|
show: true,
|
textStyle: {
|
color: "#fff",
|
},
|
},
|
},
|
},
|
},
|
],
|
};
|
// 图表初始化配置
|
chartInstance.value.setOption(initOption);
|
// 鼠标移入停止定时器
|
chartInstance.value.on("mouseover", () => {
|
clearInterval(tooltipTimer.value);
|
});
|
|
// 鼠标移入启动定时器
|
chartInstance.value.on("mouseout", () => {
|
gettooltipTimer();
|
});
|
}
|
const getData = () => {
|
// 调用接口方法
|
// getModuleData().then(res => {
|
// allData = res.data;
|
// updateChart();
|
// //console.log("ALLDATA->"+JSON.stringify(allData.pcsSum));
|
// // echarts查不到数据，将初始化echarts的方法全部放置到接口方法中即可。
|
// })
|
// 获取服务器的数据, 对allData进行赋值之后, 调用updateChart方法更新图表
|
//console.log("ALLDATA->",JSON.stringify(res.data))
|
//console.log("ALLDATA->",JSON.stringify(allData))
|
updateChart();
|
}
|
|
const updateChart = () => {
|
// 处理图表需要的数据
|
const dataOption = {};
|
// 图表数据变化配置
|
chartInstance.value.setOption(dataOption);
|
}
|
|
const screenAdapter = () => {
|
let titleFontSize = Math.round(refChart.value.offsetWidth / 50);
|
const adapterOption = {
|
title: {
|
textStyle: {
|
fontSize: Math.round(titleFontSize * 1.8),
|
},
|
},
|
series: [
|
{
|
itemStyle: {
|
normal: {
|
label: {
|
textStyle: {
|
fontWeight: Math.round(titleFontSize * 100),
|
fontSize: Math.round(titleFontSize * 1.2),
|
},
|
},
|
},
|
},
|
},
|
],
|
// // 圆点分类标题
|
// legend: {
|
// textStyle: {
|
// fontSize: Math.round(titleFontSize / 1.2),
|
// },
|
// },
|
// xAxis: {
|
// // 改变x轴字体颜色和大小
|
// axisLabel: {
|
// textStyle: {
|
// fontSize: Math.round(titleFontSize * 0.8),
|
// },
|
// },
|
// },
|
// yAxis: {
|
// // 改变y轴字体颜色和大小
|
// axisLabel: {
|
// textStyle: {
|
// fontSize: Math.round(titleFontSize * 0.8),
|
// },
|
// },
|
// },
|
};
|
// 图表自适应变化配置
|
chartInstance.value.setOption(adapterOption);
|
chartInstance.value.resize();
|
}
|
|
// 定时器
|
const gettooltipTimer = () => {
|
let index = 0; // 播放所在下标
|
tooltipTimer.value = setInterval(() => {
|
// 执行刷新数据的方法
|
getData();
|
// echarts实现定时播放tooltip
|
chartInstance.value.dispatchAction({
|
type: 'showTip',
|
seriesIndex: 0,
|
dataIndex: index
|
});
|
index++;
|
if(index > 18) {
|
index = 0;
|
}
|
//console.log("Hello World->"+allData.length)
|
}, 2000)
|
}
|
</script>
|
<style lang='scss' scoped>
|
.echarts-title{
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
