xx_sw_dp/src/views/prediction/components/predictionA.vue

<template>
  <div class="main">
    <div class="main_in">
      <div class="sub-title" @click="jump">
        <span>{{ title.pageTitle }}&nbsp;</span>{{ title.titleText }}
      </div>
      <div>
        <div ref="prediction" style="width: 100%; height: 376px"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { toRef, ref, getCurrentInstance, onMounted } from 'vue';

import eventBus from '/@/utils/eventBus';
const jump = () => {
  eventBus.emit('mapjump', props.title);
};
let activeKey = ref('1');
//组件传参
const props = defineProps({
  title: { type: Object },
  nodeId: { type: String },
  predictionData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
let datas = toRef(props, 'predictionData');
// // 计算最大值
function getMaxValue(arr) {
  const max = Math.max(...arr);
  // 这样处理是为了不让最大值刚好到坐标轴最顶部
  return Math.ceil(max / 9.5) * 10;
}
// 计算最小值
function getMinValue(arr) {
  const min = Math.min(...arr);
  // 这样处理是为了不让最大值刚好到坐标轴最底部
  return Math.floor(min / 12) * 10;
}
// 引入图表插件
const { proxy } = getCurrentInstance();
const echarts = proxy.$echarts;
let prediction = ref(null);
function echarts1() {
  let maxList = [...props.predictionData.qs, ...props.predictionData.qf];
  let max1 = getMaxValue(maxList) * 2;
  let min1 = getMinValue(maxList),
    max2 = getMaxValue(props.predictionData.rain) * 2;
  let min2 = getMinValue(props.predictionData.rain);
  const chart = echarts.init(prediction.value);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        animation: false,
        label: {
          backgroundColor: '#505765',
        },
      },
      formatter(params) {
        var relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          console.log('tooltip数据值', params[i].value)
          //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
          // relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value == '--'? Number(params[i].value) : params[i].value
          relVal += `<br/>${params[i].marker}${params[i].seriesName} : ${params[i].value == '--' ? params[i].value : Number(params[i].value)}`
        }
        return relVal;
      },
    },
    dataZoom: [
      {
        // 这个dataZoom组件，默认控制x轴。
        type: 'inside', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      },
      {
        // 这个dataZoom组件，也控制x轴。
        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
      },
    ],
    legend: {
      data: ['实测流量', '预测流量', '降雨'],
      textStyle: {
        fontSize: 12, //字体大小
        color: '#ffffff', //字体颜色
      },
    },
    xAxis: [
      {
        show: false,
        data: props.predictionData.name,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff',
          },
          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;
          },
        },
      },
      {
        data: props.predictionData.name,
        gridIndex: 1,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff',
          },
          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: [
      {
        position: 'right',
        name: '降雨(mm)',
        nameLocation: 'start',
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
          formatter: function (value) {
            return value.toFixed(2) + '';
          },
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed', //虚线
            color: '#484849',
          },
        },
        inverse: true,
        scale: true,
      },
      {
        // position: 'right',
        name: '流量(m³/s)',
        gridIndex: 1,
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
          formatter: function (value) {
            return value + '';
          },
        },
        nameTextStyle: {
          color: '#fff',
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed', //虚线
            color: '#484849',
          },
        },
        scale: true,
        min: function (value) {
          return value.min - value.min * 0.1;
        },
        max: function (value) {
          return value.max + value.max * 0.1;
        }
      },
    ],
    grid: [
      {
        bottom: '65%',
        left: '50',
        right: '50',
      },
      {
        top: '45%',
        left: '50',
        right: '50',
        bottom: '40',
      },
    ],
    series: [
      {
        name: '降雨',
        data: props.predictionData.rain,
        type: 'bar',
        barWidth: 5, // 设置每个柱子的宽度为40
        showSymbol: false,
        lineStyle: {
          width: 1,
        },
        itemStyle: {
          color: '#00CB98',
        },
        emphasis: {
          focus: 'series',
        },
      },
      {
        name: '实测流量',
        smooth: true,
        type: 'line',
        showSymbol: false,
        data: props.predictionData.qs,
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
      {
        name: '预测流量',
        type: 'line',
        showSymbol: false,
        smooth: true,
        data: props.predictionData.qf,
        xAxisIndex: 1,
        yAxisIndex: 1,
      },
    ],
  };

  option && chart.setOption(option);
}
onMounted(() => {
  echarts1();
});
</script>

<style lang="less" scoped>
.main {
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 2px;
  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);
}

.sub-title {
  cursor: pointer;
  text-align: left;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 0px;
  color: #dffeff;
  font-size: 18px;

  span {
    background: linear-gradient(0deg, #fbf70e 0%, #f4af10 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
}
</style>