airoptweb/src/views/echart/pareto.vue

<template>
  <!-- 优化监控 -->
  <!-- 帕雷托图 -->
  <div style="width: 100%; height: 100%">
    <div class="echartitem" style="width: 100%; height: 100%">
      <div
        id="pareto"
        ref="chartContainer"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from "vue"
import { RouterView, RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request"
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
import * as echarts from "echarts"
import { graphic } from "echarts/core"
const option = ref({})
let myChart

let vars = ref(['变量1','变量2'])
let vals = ref([])
let series = ref([
  {
    name: "变量1",
    type: "scatter",
    data: [10, 20, 30, 40] // y轴对应数据
  },
  {
    name: "变量2",
    type: "scatter",
    data: [20, 10, 40, 30] // y轴对应数据
  }
])
let xdata = ref(['-0.25','0.00','0.25','0.50','0.75','1.00'])
let chartContainer = ref(null)
let chartDom = ref()
let convergeDate = ref([])
let curvedata = ref("")

onMounted(() => {
  nextTick(() => {
    console.log("onMounted called")
    const chartDom = document.getElementById("pareto")
    console.log("chartDom:", chartDom) // 检查是否获取到 DOM 元素

    if (chartDom) {
      myChart = echarts.init(chartDom)
      myChart.resize()
      setOptionfunc()
    }
  })
})

const props = defineProps({
  paretoshow: {
    type: Boolean,
    default: false
  }
})
// 监听 paretoshow 变化
watch(
  () => props.paretoshow,
  (newValue) => {
    if (newValue) {
      nextTick(() => {
        const chartDom = chartContainer.value
        if (chartDom) {
          myChart = echarts.init(chartDom)
          myChart.resize() // 手动调整图表大小
          setOptionfunc() // 设置图表配置
        }
      })
    }
  },
  { immediate: true }
)

//初始化
const echatinit = () => {
  convergeDate.value = []
  series.value = []
  xdata.value = []
}

// 数据 从接口处取
const getsockechart = (data) => {
  curvedata.value = data
  convergeDate.value = []
  series.value = []
  xdata.value = []
  let rows = JSON.parse(curvedata.value)
  let num = 0

  // 创建一个映射表用于存储变量和对应的数据
  let variableMap = {}

  for (let i = 0; i < rows.length; i++) {
    num += 1
    let varsArray = rows[i].vars.split(",")  // 变量名列表
    let valsArray = rows[i].vals.split(" ").map((str) => Number(str)) // 数据值列表

    xdata.value.push(num)

    for (let j = 0; j < varsArray.length; j++) {
      let varName = varsArray[j]
      let varValue = valsArray[j]

      // 如果变量名已经存在，则累加数据，否则创建数组
      if (!variableMap[varName]) {
        variableMap[varName] = []
      }
      variableMap[varName].push([num, varValue])  // 存储 (x, y) 数据点
    }
  }

  console.log(variableMap)

  // 遍历变量映射表，生成 `series` 数据
  for (let key in variableMap) {
    series.value.push({
      name: key,
      type: "scatter",
      data: variableMap[key],  // 直接取出 (x, y) 数据点
      itemStyle: {}
    })
  }

  // 更新图表
  myChart.setOption({
    legend: {
      data: Object.keys(variableMap)
    },
    xAxis: {
      data: xdata.value
    },
    series: series.value
  })
}
const setOptionfunc = async () => {
  option.value = {
    title: {
      text: "压力分布",
      left: "7%",
      top: "5%",
      textStyle: {
        color: "#333333",
        fontSize: 16,
        fontWeight: "normal",
        fontFamily:'Microsoft YaHei'
      }
    },
    legend: {
      show: true,
      data: vars.value,
      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
      right: "4%",
      top: "2%"
    },
    grid: {
      show: false,
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF"
      }
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        name: "cd",
        nameGap:30,
        nameTextStyle:{
          fontSize: 16,
          color:'#333333',
          fontFamily:'Microsoft YaHei'
        },
        nameLocation: 'middle',
        data: xdata.value,
        axisLine: {
          //X轴线
          show: true,
          lineStyle: {
            color: "#333333", // 线的颜色
            width: 1, // 线宽
            type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
          }
        },
        splitLine: {
          show: true // 如果不需要网格线，可以设置为 false
        },
      }
    ],

    yAxis: {
      type: "value",
      name:'-cl',
      nameGap:40,
      nameTextStyle:{
        fontSize: 16,
        color:'#333333',
        fontFamily:'Microsoft YaHei'
      },
      nameLocation: 'middle',
      axisTick: {
        show: true
      },
      splitLine: {
        show: true,
      },
      axisLine: {
        //Y轴线
        show: true,
        lineStyle: {
          color: "#333333", // 线的颜色
          width: 1, // 线宽
          type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
        }
      }
    },
    dataZoom: [
      {
        type: "inside", // 鼠标滚轮缩放
        xAxisIndex: [0], // 针对 X 轴
      },
      {
        type: "slider", // 滑动条缩放
        xAxisIndex: [0],
      }
    ],
    series: series.value
  }
  option.value && myChart.setOption(option.value)

  window.onresize = function () {
    myChart.resize()
  }
}
defineExpose({ getsockechart, echatinit })
</script>
<style lang="scss" scoped>
</style>