244 lines
6.7 KiB
Vue
244 lines
6.7 KiB
Vue
<template>
|
|
<div class="reservoir-survey1">
|
|
|
|
<!-- 最上面 密封点概况-->
|
|
<div class="reservoir-top">
|
|
<third-title title="港口信息">
|
|
</third-title>
|
|
|
|
<div class="beautified-div">
|
|
<div ref="chart" style="width:100%; height: 600px;"></div>
|
|
</div>
|
|
<!-- <div>油气回收在线监测设备</div>
|
|
<dv-scroll-board :config="config" style="width:100%;height:170px" />
|
|
</div>
|
|
<div class="beautified-div">
|
|
<div>厂内移动式设备</div>
|
|
<dv-scroll-board :config="config1" style="width:100%;height:170px" />
|
|
</div>
|
|
<div class="beautified-div">
|
|
<div>厂界在线监测设备</div>
|
|
<dv-scroll-board :config="config2" style="width:100%;height:170px" />
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import store from "@/store";
|
|
import ThirdTitle from "./ThirdTitle.vue";
|
|
import * as echarts from 'echarts';
|
|
|
|
import axios from 'axios'
|
|
export default {
|
|
//import引入的组件需要注入到对象中才能使用
|
|
components: {
|
|
ThirdTitle
|
|
},
|
|
created() {
|
|
|
|
},
|
|
|
|
mounted() {
|
|
this.initChart();
|
|
},
|
|
|
|
data() {
|
|
//这里存放数据
|
|
return {
|
|
loadedDataUrl:'./static/shandong.json',
|
|
chart: null,
|
|
// 准备山东省的 geoJSON 数据
|
|
shandongGeoJSON: null,
|
|
points : [
|
|
{ name: '青岛港', value: [120.345089,36.109947], list: []},
|
|
{ name: '日照港', value: [119.561732,35.382109], list: []},
|
|
{ name: '烟台港', value: [121.40541,37.562686], list: [] },
|
|
{ name: '渤海湾港', value: [119.219496,36.71416], list: []}
|
|
],
|
|
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
|
|
async initChart() {
|
|
// 获取山东省的 geoJSON 数据
|
|
axios.get(this.loadedDataUrl, {}).then((geoJson) => {
|
|
// 注册山东省的地图
|
|
echarts.registerMap('shandong', geoJson.data);
|
|
|
|
// 初始化 ECharts 实例
|
|
this.chart = echarts.init(this.$refs.chart);
|
|
|
|
// 地图标注的 4 个点信息（名称、坐标）
|
|
const points = [
|
|
{ name: '青岛港', value: [120.345089, 36.109947], list: [] },
|
|
{ name: '日照港', value: [119.561732, 35.382109], list: [] },
|
|
{ name: '烟台港', value: [121.40541, 37.562686], list: [] },
|
|
{ name: '渤海湾港', value: [119.219496, 36.71416], list: [] }
|
|
];
|
|
|
|
// 动态生成每个点的 list 数据
|
|
points.forEach(point => {
|
|
point.list = Array.from({ length: 10 }, (_, index) => ({
|
|
factoryName: `${point.name}工厂${index + 1}`,
|
|
avgValue: (Math.random() * 100).toFixed(2)
|
|
}));
|
|
});
|
|
|
|
// 设置 ECharts 的配置项
|
|
const option = {
|
|
backgroundColor: '#1b1b1b', // 设置背景色
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: (params) => {
|
|
if (params.componentType === 'series') {
|
|
const point = points.find(p => p.name === params.name);
|
|
if (point) {
|
|
return `
|
|
<div style="width: 250px; padding: 10px; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
|
|
<div style="display: flex; justify-content: space-between; font-weight: bold; color: #333;">
|
|
<div style="width: 200px;">企业名</div>
|
|
<div style="width: 50px;">平均值</div>
|
|
</div>
|
|
<div style="margin-top: 5px;">
|
|
${point.list.map(f => `
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 5px; color: #FF8C00;">
|
|
<div style="width: 200px;">${f.factoryName}</div>
|
|
<div style="width: 50px;">${f.avgValue}</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
return ''; // 返回空以防其他情况
|
|
}
|
|
},
|
|
geo: {
|
|
map: 'shandong', // 使用山东省地图
|
|
center: [120.3, 36.1], // 设置地图中心
|
|
zoom: 2, // 放大地图
|
|
roam: true, // 开启缩放和拖动
|
|
label: {
|
|
show: false, // 不显示地图标签
|
|
},
|
|
itemStyle: {
|
|
areaColor: '#B1D0FC', // 地图区域颜色
|
|
borderColor: '#111', // 地图边界颜色
|
|
borderWidth: 1,
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
areaColor: '#FFD700', // 鼠标悬停时的区域颜色
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '港口',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: points,
|
|
symbolSize: 20, // 标记点的大小
|
|
itemStyle: {
|
|
color: '#FFD700', // 使用黄色标记点
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: '{b}', // 标签显示名称
|
|
position: 'right',
|
|
color: '#FF8C00', // 橙黄色
|
|
fontWeight: 'bold', // 加粗
|
|
fontSize:24,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
color: '#FFD700', // 鼠标悬停时的标签颜色
|
|
fontSize: 16, // 增加悬停时标签的字体大小
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
// 渲染图表
|
|
this.chart.setOption(option);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
@keyframes turn {
|
|
0% {
|
|
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
|
}
|
|
|
|
25% {
|
|
border-image: linear-gradient(to bottom, #003194, #00ffea) 1;
|
|
}
|
|
|
|
50% {
|
|
border-image: linear-gradient(to left, #003194, #00ffea) 1;
|
|
}
|
|
|
|
75% {
|
|
border-image: linear-gradient(to top, #003194, #00ffea) 1;
|
|
}
|
|
|
|
100% {
|
|
border-image: linear-gradient(to right, #003194, #00ffea) 1;
|
|
}
|
|
}
|
|
|
|
.reservoir-survey1 {
|
|
|
|
|
|
width: 100%;
|
|
color: #f0fafa;
|
|
font-size: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
|
|
.reservoir-top {
|
|
height: 760px;
|
|
background: rgba(0, 108, 188, 0.2);
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
|
// background-color: #183c77;
|
|
padding: 10px;
|
|
// height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.beautified-div {
|
|
height: 620px;
|
|
background-color: rgba(29, 168, 210, 0.2); /* 背景颜色 */
|
|
border: 1px solid #1da8d2; /* 边框颜色 */
|
|
border-radius: 8px; /* 圆角 */
|
|
padding: 15px 25px; /* 内边距 */
|
|
margin: 5px; /* 外边距 */
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
|
|
font-size: 18px; /* 字体大小 */
|
|
text-align: center; /* 文本居中 */
|
|
transition: all 0.3s ease; /* 动画过渡 */
|
|
}
|
|
|
|
}
|
|
|
|
.reservoir-top:hover {
|
|
border: 2px solid;
|
|
animation: turn 5s linear infinite;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |