gangkou/ruoyi-ui/src/views/home/components/middle.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>