gas-injection/src/views/vent/home/configurable/components/gasInject/echartLineDate.vue

<template>
  <div class="echartLine">
    <!-- 年月日切换 -->
    <div v-if="echartOption.showTime" class="radio-box">
      <a-radio-group v-model:value="nowData" name="radioGroup" @change="changeRadio">
        <a-radio value="minutes">按分钟</a-radio>
        <a-radio value="hours">按小时</a-radio>
      </a-radio-group>
    </div>
    <div class="echart-line" ref="echartLines"></div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import * as echarts from 'echarts';

let props = defineProps({
  //图表配置项
  echartOption: {
    type: Object as any
  },
  //图表数据
  ecahrtData: {
    type: Object as any
  }
})
let echartLines = ref(null)
let nowData = ref('hours')
let ecahrtDatas = reactive({}) as any

function getOption() {
  nextTick(() => {
    let myChart = echarts.init(echartLines.value);
    let option = {
      tooltip: props.echartOption.tooltip,
      grid: props.echartOption.grid,
      legend: props.echartOption.legend,
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: 'rgba(4, 49, 79)',
          },
        },
        axisLabel: { //坐标轴刻度标签的相关设置
          textStyle: {
            color: '#a3a7ae',
            padding: 5,
            fontSize: 12
          },
          formatter: function (data) {
            return data
          }
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: ecahrtDatas.xData
      }],
      yAxis: props.echartOption.yAxis,
      series: props.echartOption.series.map((el, index) => {
        return {
          ...el,
          data: ecahrtDatas[el.data]
        }
      })
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}
//选项切换
function changeRadio(val) {
  console.log(val, 'val---')
  nowData.value = val.target.value
  getFormat()
}
//数据格式化
function getFormat() {
  if (nowData.value == 'hours') {
   ecahrtDatas.xData = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
    // ecahrtDatas.xData = ecahrtDatas.hourData.xlist
    // ecahrtDatas.injectionPressure = ecahrtDatas.hourData.datalist.records.map(el => el.readData.injectionPressure) || []
    // ecahrtDatas.flowStdInstant = ecahrtDatas.hourData.datalist.records.map(el => el.readData.flowStdInstant) || []
    ecahrtDatas.yData = ["20", "50", "12", "65", "30", "60", "50", "12", "65",]
    ecahrtDatas.yData1 = ["40", "60", "22", "85", "50", "40", "60", "22", "85",]
    ecahrtDatas.yData2 = ["70", "30", "42", "65", "80", "60", "30", "42", "65",]
  } else {
      ecahrtDatas.xData = ['3.26', '3.27', '3.28', '3.29', '3.30', '3.31']
    // ecahrtDatas.xData = ecahrtDatas.minitesData.xlist || []
    // ecahrtDatas.injectionPressure = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.injectionPressure) || []
    // ecahrtDatas.flowStdInstant = ecahrtDatas.minitesData.datalist.records.map(el => el.readData.flowStdInstant) || []
    ecahrtDatas.yData = ["200", "500", "120", "650", "300", "600", "500", "120", "650",]
    ecahrtDatas.yData1 = ["400", "600", "220", "850", "500", "400", "600", "220", "850",]
    ecahrtDatas.yData2 = ["700", "300", "420", "650", "800", "600", "300", "420", "650",]
  }
  getOption()
}

watch(() => props.ecahrtData, (newV, oldV) => {
  if (newV) {
    ecahrtDatas = Object.assign({}, newV)
    getFormat()
  }

}, { immediate: true, deep: true })
</script>

<style lang="less" scoped>
.echartLine {
  position: relative;
  width: 100%;
  height: 100%;

  .radio-box {
    position: absolute;
    right: 0;
    top: 0%;
  }

  .echart-line {
    width: 100%;
    height: 100%;
  }
}

::v-deep .radio-box {
  background-color: transparent !important;
}

::v-deep .zxm-radio-inner {
  background-color: transparent;
}

::v-deep .zxm-radio-wrapper {
  font-size: 12px;
}

::v-deep .zxm-radio-inner {
  width: 10px;
  height: 10px;
  top: -2px !important;
}
</style>