xx_sw_dp/src/views/meteorological/components/monitorEcharts.vue

<template>
  <div>
    <!-- <weatherTitle :title="'近24小时气象监测站过程线'" /> -->
    <div>
      <div class="total222">
        <!-- {{ windSpeeCharts }} -->
        <a-tabs @change="changeTabs" v-model:activeKey="activeKey">
          <a-tab-pane key="1">
            <template #tab>
              <span> 温度 </span>
            </template>
            <div v-if="showCharts1" id="mo-echarts1" style="width: 100%; height: 280px"> </div>
            <div v-else style="width: 100; height: 280px">
              <img class="none-data" src="../../../assets/images/weatheHome/none-data.png" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #tab>
              <span> 风速/风向标 </span>
            </template>
            <div v-if="showCharts2" id="mo-echarts2" style="width: 100%; height: 280px"> </div>
            <div v-else style="width: 100; height: 280px">
              <img class="none-data" src="../../../assets/images/weatheHome/none-data.png" />
            </div>
          </a-tab-pane>
          <template #renderTabBar="{ DefaultTabBar, ...props }">
            <component :is="DefaultTabBar" v-bind="props" :style="{ zIndex: 1, textAlign: 'center' }" />
          </template>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRef, ref, getCurrentInstance, onMounted, watch } from 'vue';
import weatherTitle from '../../../components/Title/weatherTitle.vue';
import { useMapStore } from '/@/store/modules/map';
import eventBus from '/@/utils/eventBus';
// 导入图片
import imgangle from '/@/assets/images/weatheHome/trend-icon.png';
import screenImg from '/@/assets/images/weatheHome/full-screen-icon.png';
eventBus.on('monitorRefreshName', () => {
  activeKey.value = '1';
});
const props = defineProps({
  temperatureCharts: {
    type: Object,
    default: () => {
      return {};
    },
  },
  windSpeeCharts: {
    type: Object,
    default: () => {
      return {};
    },
  },
  windDirection: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const temperatureChartsData = toRef(props, 'temperatureCharts');
const windSpeeCharts = toRef(props, 'temperatureCharts');
let showCharts1 = ref(true);
let showCharts2 = ref(true);
// 监听参数是否变化
watch(temperatureChartsData, (newData) => {
  showCharts1.value = true;
  showCharts2.value = true;
  // 判断是否数据为空
  if (windSpeeCharts.value.data.length == 0) {
    showCharts2.value = false;
  }
  if (newData.data.length == 0) {
    showCharts1.value = false;
    return;
  }
  setTimeout(() => {
    echarts1();
    echarts2();
  }, 200);
});
let showChartsMax = ref(false);
// 引入图表插件
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
function echarts1() {
  const chart = echarts.init(document.getElementById('mo-echarts1'));
  let option;
  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    dataZoom: [
      {
        // 这个dataZoom组件，默认控制x轴。
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      },
      {
        // 这个dataZoom组件，也控制x轴。
        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
      },
    ],
    grid: {
      left: '3%', //默认10%
      right: '4%', //默认10%
      bottom: '4%', //默认60
      containLabel: true,
      //grid区域是否包含坐标轴的刻度标签
    },
    xAxis: {
      type: 'category',
      data: temperatureChartsData.value.name,
      axisLabel: {
        //x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter: function (val) {
          var strs = val.split(''); //字符串数组
          var str = '';
          for (var i = 0, s; (s = strs[i++]);) {
            //遍历字符串数组
            if (i > 5 && i < 17) {
              str += s;
            }

            if (!(i % 10)) str += '\n'; //按需要求余
          }
          return str;
        },
      },
    },
    yAxis: [
      {
        splitLine: {
          //网格线
          lineStyle: {
            type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
            width: 1, //y轴线的宽度
            color: '#484849',
          },
          show: true, //隐藏或显示
        },
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: '#fff',
            margin: 15,
          },
          formatter: function (value) {
            return value.toFixed(1);
          },
          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
        },
        scale: true,
      },
      {
        type: 'value',
        name: '单位：℃', //单位
        nameLocation: 'end',
        //单位的样式设置
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)', //颜色
          padding: [15, 25, 15, -700],
        },
        scale: true,
      },
    ],
    series: [
      {
        data: temperatureChartsData.value.data,
        type: 'line',
        smooth: true,
      },
    ],
  };

  option && chart.setOption(option);
}
function changeTabs(e) {
  if (e == 2) {
    setTimeout(() => {
      echarts2();
    }, 0);
  }
}
let chart2 = null;
function echarts2() {
  chart2 = echarts.init(document.getElementById('mo-echarts2'));
  var option = {
    // toolbox: {
    //   itemSize: 25, // 设置图标大小
    // },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        // console.log('time',params)
        return `<div>
            <div>
              时间：${params[0].axisValueLabel}
            </div>
            <div>
              风速（m/s）：${params[0].data}
            </div>
            <div>
              风向：${props.windDirection.data[params[0].dataIndex] ? setWd(props.windDirection.data[params[0].dataIndex]) : '-'}
            </div>
          </div>`;
      },
    },
    dataZoom: [
      {
        // 这个dataZoom组件，默认控制x轴。
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      },
      {
        // 这个dataZoom组件，也控制x轴。
        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
      },
    ],
    grid: {
      left: '3%', //默认10%
      right: '4%', //默认10%
      bottom: '4%', //默认60
      containLabel: true,
      //grid区域是否包含坐标轴的刻度标签
    },
    legend: {
      // data: ['风速', '风向'],
      data: ['风速'],
      symbol:'none',
      textStyle: {
        fontSize: 14, //字体大小
        color: '#ffffff', //字体颜色
      },
      orient:'horizontal',
      itemHeight:2
      // itemStyle: {
      //   color: '#fff',
      // },
    },
    xAxis: {
      type: 'category',
      data: props.windSpeeCharts.name,
      axisLabel: {
        //x轴文字的配置
        show: true,
        textStyle: {
          color: '#fff',
        },
        formatter: function (val) {
          var strs = val.split(''); //字符串数组
          var str = '';
          for (var i = 0, s; (s = strs[i++]);) {
            //遍历字符串数组
            if (i > 5 && i < 17) {
              str += s;
            }

            if (!(i % 10)) str += '\n'; //按需要求余
          }
          return str;
        },
      },
    },
    yAxis: [
      {
        name: '风速(m/s)',
        type: 'value',
        axisLabel: {
          //y轴文字的配置
          textStyle: {
            color: '#fff',
            margin: 15,
          },
          formatter: function (value) {
            return value.toFixed(1);
          },
          // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
            width: 1, //y轴线的宽度
            color: '#484849',
          },
          show: true, //隐藏或显示
        },
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.8)', //颜色
        },
        scale: true,
      },
      // {
      //   type: 'value',
      //   name: '风向',
      //   axisLabel: {
      //     //y轴文字的配置
      //     textStyle: {
      //       color: '#fff',
      //       margin: 15,
      //     },
      //     // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      //   },
      //   splitLine: {
      //     //网格线
      //     lineStyle: {
      //       type: 'dotted', //设置网格线类型 dotted：虚线 solid:实线
      //       width: 1, //y轴线的宽度
      //       color: '#484849',
      //     },
      //     show: true, //隐藏或显示
      //   },
      //   nameTextStyle: {
      //     color: 'rgba(255, 255, 255, 0.8)', //颜色
      //     padding: [0, 0, 0, 30],
      //   },
      //   scale: true,
      // },
    ],
    series: [
      {
        name: '风速',
        data: props.windSpeeCharts.data,
        type: 'line',
        smooth: true,
        // symbol: 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z',
        symbol: function (params) {
          console.log('params',params)
          // 设置不同等级的图标
          let level1 = 'path://M0,0L20,0L20,3L3,3L3,8L3,8L3,11L3,11L3,16L3,16L3,19L3,19L3,40L0,40L0,0Z'
          let level2 = 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L3,16L3,19L3,19L3,40L0,40L0,0Z'
          let level3 = 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z'
          let level4 = 'path://M0,0L20,0L20,3L3,3L3,8L20,8L20,11L3,11L3,16L20,16L20,19L3,19L3,40L0,40L0,0Z'
          let level5 = 'path://M0,0L20,0L20,3L3,3L3,8L3,8L3,11L3,11L3,16L3,16L3,19L3,19L3,40L0,40L0,0Z'
          let svgData = ''
          if(params >= 0 && params <=3.3){
            svgData = level1
          }
          if(params >= 3.4 && params <=7.9){
            svgData = level2
          }
          if(params >= 8 && params <=13.8){
            svgData = level3
          }
          if(params >= 13.9 && params <=20.7){
            svgData = level4
          }
          if(params >= 20.8){
            svgData = level5
          }
          return svgData
          
        },
        symbolSize: 18,
        symbolRotate: (value, params) => {
          return props.windDirection.data[params.dataIndex] * -1;
        },
      },
      // {
      //   name: '风向',
      //   yAxisIndex: 1,
      //   data: props.windDirection.data,
      //   type: 'line',
      //   smooth: true,
      // },
    ],
  };
  option && chart2.setOption(option);
}
function fnResize() {
  setTimeout(() => {
    chart2.resize();
  }, 100);
}
// 处理风向
function setWd(wds) {
  let wd = wds * 1
  console.log(wd)
  if (wd >= 348.76 || wd <= 11.25) {
    return 'N';
  }
  if (wd >= 11.26 && wd <= 33.75) {
    return 'NNE';
  }
  if (wd >= 33.76 && wd <= 56.25) {
    return 'NE';
  }
  if (wd >= 56.26 && wd <= 78.75) {
    return 'ENE';
  }
  if (wd >= 78.76 && wd <= 101.25) {
    return 'E';
  }
  if (wd >= 101.26 && wd <= 123.75) {
    return 'ESE';
  }
  if (wd >= 123.76 && wd <= 146.25) {
    return 'SE';
  }
  if (wd >= 146.26 && wd <= 168.75) {
    return 'SSE';
  }
  if (wd >= 168.76 && wd <= 191.25) {
    return 'S';
  }
  if (wd >= 191.26 && wd <= 213.75) {
    return 'SSW';
  }
  if (wd >= 213.76 && wd <= 236.25) {
    return 'SW';
  }
  if (wd >= 236.26 && wd <= 258.75) {
    return 'WSW';
  }
  if (wd >= 258.76 && wd <= 281.25) {
    return 'W';
  }
  if (wd >= 281.76 && wd <= 303.75) {
    return 'WNW';
  }
  if (wd >= 303.76 && wd <= 326.25) {
    return 'NW';
  }
  if (wd >= 326.26 && wd <= 348.75) {
    return 'NNW';
  }
  return '-'
}
function checkFull() {
  //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
  //火狐浏览器
  let isFull =
    document.mozFullScreen ||
    document.fullScreen ||
    //谷歌浏览器及Webkit内核浏览器
    document.webkitIsFullScreen ||
    document.webkitRequestFullScreen ||
    document.mozRequestFullScreen ||
    document.msFullscreenEnabled;
  if (isFull === undefined) {
    isFull = false;
  }
  return isFull;
}
// 图表方法结束
onMounted(() => {
  window.onresize = function () {
    if (!checkFull()) {
      // 退出全屏后要执行的动作
      fnResize();
    }
  };
});
let activeKey = ref('1');
</script>
<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding: 2px;
  margin-top: 20px;
  border-radius: 0px 30px 0px 30px;
  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
}

.main_in {
  width: 100%;
  height: 100%;
  border-radius: 0px 30px 0px 30px;
  background: rgba(6, 37, 70, 0.9);
}

// 修改组件样式
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  background: url('../../../assets/images/weatheHome/active-bar.png') no-repeat;
  // width: 45px;
  background-size: 100%;
  height: 40px;
  width: 169px;
}

::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active) {
  // background: url('../../assets/images/sjx1.png') no-repeat 42px 9px;
  // background: url('../../../assets/images/tab.png') no-repeat;
  // width: 45px;
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 42px;
  // line-height: 42px;
  // margin-left: -6px;
}

// ::v-deep(.total222 .ant-tabs-nav > div > div:nth-child(2).ant-tabs-tab-active span) {
//   position: relative;
//   // top: 10px !important;
// }
::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab) {
  // background-position: 6px 3px;
  background-size: 100% 100%;
  height: 40px;
  // line-height: 42px;
  padding: 12px 0px 12px 0px;
  margin: 0;
  width: 149px;
}

::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab span) {
  position: relative;
  top: -4px;
  color: #377dff;
}

::v-deep(.total222 .ant-tabs-nav .ant-tabs-tab-active span) {
  color: #c9d1d9 !important;
}

::v-deep(.ant-tabs-top-bar) {
  margin-bottom: 0px !important;
}

::v-deep(.ant-tabs-ink-bar) {
  visibility: hidden;
}

::v-deep(.ant-tabs-top > .ant-tabs-nav::before,
  .ant-tabs-bottom > .ant-tabs-nav::before,
  .ant-tabs-top > div > .ant-tabs-nav::before,
  .ant-tabs-bottom > div > .ant-tabs-nav::before) {
  border-bottom: 0px;
}

::v-deep(.ant-tabs) {
  color: #fff;
}

::v-deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #ffe75c;
}

::v-deep(.ant-tabs-tab) {
  // font-size: 18px;
  // font-weight: bold;
  font-size: 16px;
  font-weight: normal !important;
}

::v-deep(.ant-tabs-bar) {
  border-bottom: 0px solid #303030 !important;
}

::v-deep(.ant-tabs-nav) {
  background: url('../../../assets/images/weatheHome/bar-bg.png') no-repeat;
  background-size: 100%;
  width: 318px !important;
  height: 48px !important;
  padding-top: 3px;
  margin: 0 auto;
}

// 修改组件样式结束
.none-data {
  width: 150px;
  margin: 0 auto;
  padding-top: 50px;
}
</style>