307echart修改

src/style/index.css

@@ -288,7 +288,7 @@ text-transform: none;
     height: 100%;
     background: #FFFFFF;
 border-radius: 0px 0px 0px 0px;
-border: 1px solid rgba(0,0,0,0.3);
+/* border: 1px solid rgba(0,0,0,0.3); */
 position: relative;
   }
   .sev{

src/views/echart/area.vue

@@ -114,52 +114,63 @@ const echatinit = () => {
 //       series: series.value
 //     });
 // }
-// 数据转化废弃
+// 数据转化
 const getsockechart = (data) => {
-  curvedata.value = data
-  convergeDate.value = []
-  series.value = []
-  xdata.value = []
-  let rows = JSON.parse(curvedata.value)
-  let num = 0
-  for (let i = 0; i < rows.length; i++) {
-    num += 1
-    vars.value = rows[i].vars.split(",")
-    vals.value = rows[i].vals.split(" ")
-    let data = vals.value.map((str) => Number(str))
-    convergeDate.value.push(data)
-    xdata.value.push(num)
-  }
-  console.log(convergeDate.value)
-  // console.log( convergeDate.value);
-  for (let j = 0; j < vars.value.length; j++) {
-    let firstColumn = convergeDate.value.map((row) => row[j])
-    let item = {
-      name: vars.value[j],
-      type: "line",
-      stack: "Total",
-      areaStyle: {},
-      emphasis: {
-        focus: "series"
-      },
-      data: firstColumn
-    }
-    series.value.push(item)
-  }
+  curvedata.value = data;
+  convergeDate.value = [];
+  series.value = [];
+  xdata.value = [];
+
+  let rows = JSON.parse(curvedata.value);
+  
+  if (!rows.length) return; // 避免空数据时报错
+  
+  let varsList = rows[0].vars.split(","); // 统一获取变量名
+  vars.value = varsList; // 赋值变量列表
+
+  // 解析数据
+  rows.forEach((row, index) => {
+    xdata.value.push(index + 1); // 直接生成 x 轴数据
+    convergeDate.value.push(row.vals.split(" ").map(Number)); // 转换数值数组
+  });
+
+  // 生成 series 数据
+  series.value = varsList.map((varName, j) => ({
+    name: varName,
+    type: "line",
+    stack: "Total",
+    symbol: "none",
+    areaStyle: {},
+    emphasis: {
+      focus: "series",
+    },
+    data: convergeDate.value.map(row => row[j]) // 取每列数据
+  }));
+
+  // 更新图表
   myChart.setOption({
     legend: {
-      data: vars.value
+      data: vars.value,
     },
     xAxis: {
-      data: xdata.value
+      data: xdata.value,
     },
-    series: series.value
-  })
-}
+    series: series.value,
+  });
+};
+
 const setOptionfun = () => {
   option.value = {
     title: {
-      text: "面积图"
+      text: "压力分布",
+      left: "7%",
+      top: "5%",
+      textStyle: {
+        color: "#333333",
+        fontSize: 16,
+        fontWeight: "normal",
+        fontFamily:'Source Sans Pro-Regular'
+      }
     },
     tooltip: {
       trigger: "axis",
@@ -171,47 +182,72 @@ const setOptionfun = () => {
       }
     },
     legend: {
-      data: vars.value
-    },
-    toolbox: {
-      feature: {
-        saveAsImage: {}
-      }
+      data: vars.value,
+      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
+      right: "4%",
+      top: "2%"
     },
+    // toolbox: {
+    //   feature: {
+    //     saveAsImage: {}
+    //   }
+    // },
     grid: {
-      left: "3%",
+      left: "5%",
       right: "4%",
-      bottom: "3%",
+      bottom: "10%",
       containLabel: true
     },
     xAxis: [
       {
         type: "category",
         boundaryGap: false,
+        name: "cd",
+        nameGap:30,
+        nameTextStyle:{
+          fontSize: 16,
+          color:'#333333',
+          fontFamily:'Source Sans Pro-Regular'
+        },
+        nameLocation: 'middle',
         data: xdata.value,
         axisLine: {
           //X轴线
           show: true,
           lineStyle: {
-            color: "#000", // 线的颜色
-            width: 2, // 线宽
+            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:'Source Sans Pro-Regular'
+        },
+        nameLocation: 'middle',
         axisLine: {
           //Y轴线
           show: true,
           lineStyle: {
-            color: "#000", // 线的颜色
-            width: 2, // 线宽
+            color: "#333333", // 线的颜色
+            width: 1, // 线宽
             type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
           }
-        }
+        },
+        splitLine: {
+          show: true,
+        },
       }
     ],
     series: series.value

src/views/echart/echartLine.vue

@@ -108,46 +108,60 @@ const echatinit = () => {
 // }
 
 const getsockechart = (data) => {
-  curvedata.value = data
-  convergeDate.value = []
-  series.value = []
-  xdata.value = []
-  let rows = JSON.parse(curvedata.value)
-  let num = 0
-  for (let i = 0; i < rows.length; i++) {
-    num += 1
-    vars.value = rows[i].vars.split(",")
-    vals.value = rows[i].vals.split(" ")
-    let data = vals.value.map((str) => Number(str))
-    convergeDate.value.push(data)
-    xdata.value.push(num)
-  }
-  console.log(convergeDate.value)
-  // console.log( convergeDate.value);
-  for (let j = 0; j < vars.value.length; j++) {
-    let firstColumn = convergeDate.value.map((row) => row[j])
-    let item = {
-      name: vars.value[j],
-      type: "line",
-      stack: "Total",
-      data: firstColumn
-    }
-    series.value.push(item)
-  }
+  curvedata.value = data;
+  convergeDate.value = [];
+  series.value = [];
+  xdata.value = [];
+
+  let rows = JSON.parse(curvedata.value);
+  if (!rows.length) return; // 处理空数据
+
+  let varsList = rows[0].vars.split(","); // 提取变量名
+  vars.value = varsList;
+
+  // 解析数据
+  rows.forEach((row, index) => {
+    xdata.value.push(index + 1); // 直接填充 X 轴数据
+    convergeDate.value.push(row.vals.split(" ").map(Number)); // 解析数值数组
+  });
+
+  // 生成 series 数据
+  series.value = varsList.map((varName, j) => ({
+    name: varName,
+    type: "line",
+    stack: "Total",
+    symbol: "none",
+    data: convergeDate.value.map(row => row[j]) // 获取每列数据
+  }));
+
+  // 更新图表
   myChart.setOption({
     legend: {
-      data: vars.value
+      data: vars.value,
     },
     xAxis: {
-      data: xdata.value
+      type: "category",
+      data: xdata.value,
     },
-    series: series.value
-  })
-}
+    yAxis: {
+      type: "value",
+    },
+    series: series.value,
+  });
+};
+
 const linechart = () => {
   option.value = {
     title: {
-      text: "折线图"
+      text: "压力分布",
+      left: "7%",
+      top: "5%",
+      textStyle: {
+        color: "#333333",
+        fontSize: 16,
+        fontWeight: "normal",
+        fontFamily:'Source Sans Pro-Regular'
+      }
     },
     tooltip: {
       trigger: "axis", //item
@@ -158,30 +172,41 @@ const linechart = () => {
       }
     },
     legend: {
-      data: vars.value
+      data: vars.value,
+      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
+      right: "4%",
+      top: "2%"
     },
     grid: {
       show: false,
-      left: "3%",
+      left: "5%",
       right: "4%",
-      bottom: "3%",
+      bottom: "10%",
       containLabel: true
     },
-    toolbox: {
-      feature: {
-        saveAsImage: {}
-      }
-    },
+    // toolbox: {
+    //   feature: {
+    //     saveAsImage: {}
+    //   }
+    // },
     xAxis: {
       type: "category",
       boundaryGap: false,
+      name: "cd",
+        nameGap:30,
+        nameTextStyle:{
+          fontSize: 16,
+          color:'#333333',
+          fontFamily:'Source Sans Pro-Regular'
+        },
+      nameLocation: 'middle',
       data: xdata.value,
       axisLine: {
         //X轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       },
@@ -191,12 +216,26 @@ const linechart = () => {
     },
     yAxis: {
       type: "value",
+      name:"-cl",
+      nameGap:30,
+      nameTextStyle:{
+        fontsize:16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
+      nameLocation:"middle",
+      axisTick: {
+        show: true
+      },
+      splitLine: {
+        show:true
+      },
       axisLine: {
         //Y轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       }

src/views/echart/optimize_monitor.vue

@@ -18,10 +18,21 @@ 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"
-let vars = ref([])
+let vars = ref(['变量1','变量2'])
 let vals = ref([])
-let series = ref([])
-let xdata = ref(['1.00','2.00','3.00','4.00','5.00','6.00','7.00','8.00'])
+let series = ref([
+  {
+    name: "变量1",
+    type: "line",
+    data: [10, 20, 30, 40] // y轴对应数据
+  },
+  {
+    name: "变量2",
+    type: "line",
+    data: [20, 10, 40, 30] // y轴对应数据
+  }
+])
+let xdata = ref(['0','1.00','2.00','3.00','4.00','5.00','6.00','7.00','8.00'])
 let chartContainer = ref()
 let myChart
 let chartDom = ref()
@@ -137,11 +148,14 @@ const linechart = () => {
       }
     },
     legend: {
-      data: vars.value
+      data: vars.value,
+      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
+      right: '4%',
+      top: '2%'
     },
     grid: {
       show: false,
-      left: "10%",
+      left: "6%",
       right: "4%",
       bottom: "10%",
       containLabel: true
@@ -155,6 +169,12 @@ const linechart = () => {
       type: "category",
       boundaryGap: false,
       name: "迭代次数",
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
       nameLocation: 'middle',
       data: xdata.value,
       axisLine: {
@@ -168,25 +188,36 @@ const linechart = () => {
       },
       splitLine: {
         show: true // 如果不需要网格线，可以设置为 false
-      }
+      },
+      
     },
     yAxis: {
       type: "value",
       name: "优化变量",
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
       nameLocation: 'middle',
       axisLine: {
         //Y轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       },
       axisTick: {
         // Y轴刻度线
         show:true,
-      }
+      },
+      splitLine: {
+        show: true // 如果不需要网格线，可以设置为 false
+      },
+      
     },
     series: series.value
   }

src/views/echart/pareto.vue

@@ -0,0 +1,254 @@
+<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:'Source Sans Pro-Regular'
+      }
+    },
+    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:'Source Sans Pro-Regular'
+        },
+        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:'Source Sans Pro-Regular'
+      },
+      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>
+

src/views/echart/pie.vue

@@ -1,154 +1,200 @@
 <template>
-    <div>
-      <!-- 饼图 -->
-        <div class="echartitem">
-            <div id="pie" style="width:1400px;height:390px;"></div>
-        </div>
+  <!-- 优化监控 -->
+  <!-- 饼状图 -->
+  <div style="width: 100%; height: 100%">
+    <div class="echartitem" style="width: 100%; height: 100%">
+      <div
+        id="pie"
+        ref="chartContainer"
+        style="width: 100%; height: 100%"
+      ></div>
     </div>
+  </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, } from "vue";
+import { ref, onMounted, reactive } 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 { request, uploadFile } from "@/utils/request"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import * as echarts from "echarts"
 import { graphic } from "echarts/core"
-let myChart;
-let vars = ref([]);
-let vals = ref([]);
-let series = ref([]);
-let xdata = ref([]);
-let chartContainer = ref(null);
+let myChart
+let vars = ref([])
+let vals = ref([])
+let series = ref([])
+let xdata = ref([])
+let chartContainer = ref(null)
 let chartDom = ref()
-let option = ref(null);
-let convergeDate = ref([]);
-let curvedata = ref('')
+let option = ref(null)
+let convergeDate = ref([])
+let curvedata = ref("")
 let state = reactive({
-    instance: null,
+  instance: null
 })
-const getData = () => {
-};
+const getData = () => {}
 onMounted(() => {
-    var chartDom = document.getElementById('pie');
-    myChart = echarts.init(chartDom);
-    setOptionfun()
+  nextTick(() => {
+    console.log("onMounted called")
+    const chartDom = document.getElementById("pie")
+    console.log("chartDom:", chartDom) // 检查是否获取到 DOM 元素
+
+    if (chartDom) {
+      myChart = echarts.init(chartDom)
+      myChart.resize()
+      setOptionfun()
+    }
+  })
 })
+
+const props = defineProps({
+  pieshow: {
+    type: Boolean,
+    default: false
+  }
+})
+// 监听 pieshow 变化
+watch(
+  () => props.pieshow,
+  (newValue) => {
+    if (newValue) {
+      nextTick(() => {
+        const chartDom = chartContainer.value
+        if (chartDom) {
+          myChart = echarts.init(chartDom)
+          myChart.resize() // 手动调整图表大小
+          setOptionfun() // 设置图表配置
+        }
+      })
+    }
+  },
+  { immediate: true }
+)
+
 //初始化
 const echatinit = () => {
-    convergeDate.value = [];
-    series.value = [];
-    xdata.value = [];
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
 }
-// 从websocket取数据
-// const getsockechart = (data) => {
-//     console.log(data);
-//     curvedata.value = data;
-//     series.value = [];
-//     let rows = curvedata.value;
-//     for (let i = 0; i < rows.length; i++) {
 
-//         vars.value = (rows[i].vars).split(",");
-//         vals.value = (rows[i].vals).split(" ");
-//         let data = vals.value.map((str) => Number(str));
-//         convergeDate.value.push(data);
-//         xdata.value.push(rows[i].step);
-//     }
-//     for (let j = 0; j < vars.value.length; j++) {
-//         let firstColumn = (convergeDate.value.map((row) => row[j]));
-//         let item = {
-//               name: vars.value[j],
-//             type: 'bar',
-//             data: firstColumn
-//         }
-//         series.value.push(item)
-//     }
-//     myChart.setOption({
-//         legend: {
-//             data: vars.value
-//         },
-//         xAxis: {
-//             data: xdata.value,
-//         },
-//         series: series.value
-//     });
-// }
- // 数据 从接口处取
- const getsockechart=(data)=>{
-  curvedata.value=data;
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
-    let rows=JSON.parse(curvedata.value);
-  let num=0;
-    for(let i=0;i<rows.length;i++){
-      num+=1;
-       vars.value=(rows[i].vars).split(",");
-       vals.value=(rows[i].vals).split(" ");
-       let data= vals.value.map((str) => Number(str));
-       convergeDate.value.push(data);
-       xdata.value.push(num);
-    }
-    console.log(convergeDate.value);
-   // console.log( convergeDate.value);
-    for(let j=0;j<vars.value.length;j++){
-     let firstColumn=  convergeDate.value.map(row => row[j]);
-           let item = {
-              name: vars.value[j],
-            type: 'bar',
-            data: firstColumn
+// 数据 从接口处取
+const getsockechart = (data) => {
+  curvedata.value = data
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
+  let rows = JSON.parse(curvedata.value)
+  let num = 0
+
+  // 解析数据
+  for (let i = 0; i < rows.length; i++) {
+    num += 1
+    vars.value = rows[i].vars.split(",")  // "Evaluations,obj"
+    vals.value = rows[i].vals.split(" ")  // "1 -5.945845248435018"
+    let data = vals.value.map((str) => Number(str))  // 数字化数据
+    convergeDate.value.push(data)
+    xdata.value.push(num)
+  }
+
+  // 动态生成图例数据
+  let seriesData = [];
+  let legendData = [];
+
+  // 遍历 vars 和 convergeDate 数据，生成 series 和 legend
+  // 这里我们为每个 "vars" 创建一个独立的饼图
+  for (let j = 0; j < vars.value.length; j++) {
+    let columnData = convergeDate.value.map(row => row[j]); // 提取每列数据
+    let totalValue = columnData.reduce((acc, curr) => acc + curr, 0);  // 计算总和
+
+    // 生成对应的饼图数据
+    seriesData.push({
+      name: vars.value[j],
+      type: "pie",
+      radius: "50%",
+      data: [
+        {
+          value: totalValue,
+          name: vars.value[j]
         }
-    series.value.push(item)
-    }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
+      ]
     });
 
+    // 将 vars 添加到 legendData 中
+    legendData.push(vars.value[j]);
   }
+
+  // 配置选项
+  myChart.setOption({
+    legend: {
+      data: legendData  // 图例动态显示来自 vars 的内容
+    },
+    series: seriesData  // 使用动态生成的 series 数据
+  });
+}
+
+
 const setOptionfun = () => {
-    option.value = {
-        title: {
-            text: '饼图'
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
-            }
-        },
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        legend: {
-            data: vars.value
-        },
-        toolbox: {
-            feature: {
-                saveAsImage: {}
-            }
-        },
+  option.value = {
+    title: {
+      text: "压力分布",
+      left: "7%",
+      top: "5%",
+      textStyle: {
+        color: "#333333",
+        fontSize: 16,
+        fontWeight: "normal",
+        fontFamily: "Source Sans Pro-Regular"
+      }
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow"
+      }
+    },
+    grid: {
+      left: "5%",
+      right: "4%",
+      bottom: "10%",
+      containLabel: true
+    },
+    legend: {
+      data: vars.value,
+      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
+      right: "4%",
+      top: "2%"
+    },
+    // toolbox: {
+    //   feature: {
+    //     saveAsImage: {}
+    //   }
+    // },
 
-        xAxis: {
-            type: 'category',
-            data: xdata.value
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: series.value
-    };
+    xAxis: {
+      type: "category",
+      data: xdata.value,
+      axisLine:{
+        show:false
+      },
+      axisLabel:{
+        show:false
+      },
+      axisTick:{
+        show:false
+      },
+      splitLine: {
+        show: false // 如果不需要网格线，可以设置为 false
+      },
+    },
+    yAxis: {
+      type: "value"
+    },
+    series: series.value
+  }
 
-    option.value && myChart.setOption(option.value);
+  option.value && myChart.setOption(option.value)
 }
-defineExpose({ getsockechart, echatinit });
+defineExpose({ getsockechart, echatinit })
 </script>
 <style lang="scss" scoped></style>
   

src/views/echart/process-monitor1.vue

@@ -18,10 +18,21 @@ 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"
-let vars = ref([])
+let vars = ref(['变量1','变量2'])
 let vals = ref([])
-let series = ref([])
-let xdata = ref([])
+let series = ref([
+  {
+    name: "变量1",
+    type: "line",
+    data: [10, 20, 30, 40] // y轴对应数据
+  },
+  {
+    name: "变量2",
+    type: "line",
+    data: [20, 10, 40, 30] // y轴对应数据
+  }
+])
+let xdata = ref(['-0.25','0.00','0.25','0.50','0.75','1.00'])
 let chartContainer = ref()
 let myChart
 let chartDom = ref()
@@ -134,12 +145,13 @@ const linechart = () => {
   option.value = {
     title: {
       text: "几何外形",
-      left: "13%",
+      left: "12%",
       top: "5%",
       textStyle: {
         color: "#333333",
         fontSize: 16,
-        fontWeight: "normal"
+        fontWeight: "normal",
+        fontFamily:'Source Sans Pro-Regular'
       },
     },
     tooltip: {
@@ -147,16 +159,19 @@ const linechart = () => {
       backgroundColor: "rgba(0,0,0,.6)",
       borderColor: "rgba(147, 235, 248, .8)",
       textStyle: {
-        color: "#FFF"
+        color: "#333333"
       }
     },
     legend: {
-      data: vars.value
+      data: vars.value,
+      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
+      right: '4%',
+      top: '2%'
     },
     grid: {
       show: false,
-      left: "13%",
-      right: "4%",
+      left: "10%",
+      right: "5%",
       bottom: "10%",
       containLabel: true
     },
@@ -169,14 +184,20 @@ const linechart = () => {
       type: "category",
       boundaryGap: false,
       name: "x/c",
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
       nameLocation: 'middle',
       data: xdata.value,
       axisLine: {
         //X轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       },
@@ -187,13 +208,19 @@ const linechart = () => {
     yAxis: {
       type: "value",
       name: "y/c",
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
       nameLocation: 'middle',
       axisLine: {
         //Y轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       },

src/views/echart/process-monitor2.vue

@@ -20,8 +20,14 @@ import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
 import * as echarts from "echarts"
 let vars = ref([])
 let vals = ref([])
-let series = ref([])
-let xdata = ref([])
+let series = ref([
+  {
+    name: "变量1",
+    type: "line",
+    data: [10, 20, 30, 40] // y轴对应数据
+  }
+])
+let xdata = ref(['-0.25','0.00','0.25','0.50','0.75','1.00'])
 let chartContainer = ref()
 let myChart
 let chartDom = ref()
@@ -134,12 +140,13 @@ const linechart = () => {
   option.value = {
     title: {
       text: "压力分布",
-      left: "13%",
+      left: "7.5%",
       top: "5%",
       textStyle: {
         color: "#333333",
         fontSize: 16,
-        fontWeight: "normal"
+        fontWeight: "normal",
+        fontFamily:'Source Sans Pro-Regular'
       },
     },
     tooltip: {
@@ -147,16 +154,19 @@ const linechart = () => {
       backgroundColor: "rgba(0,0,0,.6)",
       borderColor: "rgba(147, 235, 248, .8)",
       textStyle: {
-        color: "#FFF"
+        color: "#333333"
       }
     },
     legend: {
-      data: vars.value
+      data: vars.value,
+      orient: "vertical", // 图例方向 (horizontal水平, vertical垂直)
+      right: '4%',
+      top: '2%'
     },
     grid: {
       show: false,
-      left: "13%",
-      right: "4%",
+      left: "5%",
+      right: "10%",
       bottom: "10%",
       containLabel: true
     },
@@ -169,14 +179,20 @@ const linechart = () => {
       type: "category",
       boundaryGap: false,
       name: "x/c",
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
       nameLocation: "middle",
       data: xdata.value,
       axisLine: {
         //X轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       },
@@ -187,13 +203,19 @@ const linechart = () => {
     yAxis: {
       type: "value",
       name: "cp",
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
       nameLocation: "middle",
       axisLine: {
         //Y轴线
         show: true,
         lineStyle: {
-          color: "#000", // 线的颜色
-          width: 2, // 线宽
+          color: "#333333", // 线的颜色
+          width: 1, // 线宽
           type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
         }
       },

src/views/echart/scatter.vue

@@ -1,240 +1,256 @@
 <template>
-    <!-- 优化监控 -->
-<!-- 散点图 -->
-  <div style="width: 100%;height: 100%;">
-  <div class="echartitem" style="width: 100%;height: 100%;">
-    <div id="linesan" ref="chartContainer" style="width: 100%;height:100%"></div>
-  </div>
+  <!-- 优化监控 -->
+  <!-- 散点图 -->
+  <div style="width: 100%; height: 100%">
+    <div class="echartitem" style="width: 100%; height: 100%">
+      <div
+        id="linesan"
+        ref="chartContainer"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 <script setup>
-import { ref, onMounted, reactive, nextTick} from "vue";
+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 dateList=ref(['01:10:00', '03:10:33', '06:00:00', '12:25:00', '21:36:00', '23:00']);
-let dataSource1 = ref([[10, 20], [15, 35], [20, 50], [25, 65]]);
-let dataSource2 = ref([[10, 40], [35, 80], [40, 75], [45, 85]]);
-let vars=ref([]);
-let vals=ref([]);
-let series=ref([]);
-let xdata=ref([]);
-let chartContainer=ref(null);
-let chartDom=ref()
-let convergeDate=ref([]);
-let curvedata=ref('')  
-const getData = () => {
-  setOption(dateList.value, numList.value, numList2.value);
-};
+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('linesan');
-    console.log("chartDom:", chartDom);  // 检查是否获取到 DOM 元素
+    console.log("onMounted called")
+    const chartDom = document.getElementById("linesan")
+    console.log("chartDom:", chartDom) // 检查是否获取到 DOM 元素
 
     if (chartDom) {
-      myChart = echarts.init(chartDom);
-      myChart.resize();
-      setOptionfunc();
+      myChart = echarts.init(chartDom)
+      myChart.resize()
+      setOptionfunc()
     }
-  });
-});
-
+  })
+})
 
 const props = defineProps({
   scattershow: {
     type: Boolean,
-    default: false,
-  },
-});
-// 监听 scattershow 变化
-watch(() => props.scattershow, (newValue) => {
-  if (newValue) {
-    nextTick(() => {
-      const chartDom = chartContainer.value;
-      if (chartDom) {
-        myChart = echarts.init(chartDom);
-        myChart.resize();  // 手动调整图表大小
-        setOptionfunc();  // 设置图表配置
-      }
-    });
+    default: false
   }
-}, { immediate: true });
+})
+// 监听 scattershow 变化
+watch(
+  () => props.scattershow,
+  (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 echatinit = () => {
+  convergeDate.value = []
+  series.value = []
+  xdata.value = []
 }
-//数据组装
-// const getsockechart=(data)=>{
-//   curvedata.value=data;
-//   series.value=[];
-//   let rows=curvedata.value;
-//   for(let i=0;i<rows.length;i++){
-//        vars.value=(rows[i].vars).split(",");
-//        vals.value=(rows[i].vals).split(" ");
-//        let data= vals.value.map((str) => Number(str));
-//        convergeDate.value.push(data);
-//        xdata.value.push(Number(rows[i].step));
-//     }
-//     //console.log(convergeDate.value)
-//     //console.log( xdata.value)
-//     for(let j=0;j<vars.value.length;j++){
-//      let firstColumn=(convergeDate.value.map((row) => row[j]));
-//      const zippedArray = xdata.value.map((x, index) => [x, firstColumn[index]]);
-//     let item={
-//             name:vars.value[j],
-//             type: 'scatter',
-//             data:zippedArray,
-//             itemStyle: {}
-         
-//     }
-//    series.value.push(item)
-//     }
-//     myChart.setOption({
-//       legend: {
-//             data:vars.value
-//         },
-//       xAxis:{
-//         data:  xdata.value,
-//       },
-//       series: series.value
-//     });
-// }
+
 // 数据 从接口处取
-const getsockechart=(data)=>{
-  curvedata.value=data;
-  convergeDate.value=[];
-  series.value=[];
-  xdata.value=[];
-    let rows=JSON.parse(curvedata.value);
-  let num=0;
-    for(let i=0;i<rows.length;i++){
-      num+=1;
-       vars.value=(rows[i].vars).split(",");
-       vals.value=(rows[i].vals).split(" ");
-       let data= vals.value.map((str) => Number(str));
-       convergeDate.value.push(data);
-       xdata.value.push(num);
-    }
-    console.log(convergeDate.value);
-   // console.log( convergeDate.value);
-    for(let j=0;j<vars.value.length;j++){
-     let firstColumn=  convergeDate.value.map(row => row[j]);
-     const zippedArray = xdata.value.map((x, index) => [x, firstColumn[index]]);
-         let item={
-            name:vars.value[j],
-            type: 'scatter',
-            data:zippedArray,
-            itemStyle: {}
-         
-    }
-    series.value.push(item)
+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) 数据点
     }
-    myChart.setOption({
-      legend: {
-            data:vars.value
-        },
-      xAxis:{
-        data:  xdata.value,
-      },
-      series: series.value
-    });
+  }
+
+  console.log(variableMap)
 
+  // 遍历变量映射表，生成 `series` 数据
+  for (let key in variableMap) {
+    series.value.push({
+      name: key,
+      type: "scatter",
+      data: variableMap[key],  // 直接取出 (x, y) 数据点
+      itemStyle: {}
+    })
   }
-const setOptionfunc =async () => {
-   
- option.value = {
+
+  // 更新图表
+  myChart.setOption({
     legend: {
-        // 开启图例
-        show: true,
-        // 图例的位置
-        data:vars.value
+      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:'Source Sans Pro-Regular'
+      }
+    },
+    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",
-          },
+      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:'Source Sans Pro-Regular'
         },
-        xAxis: [
-    {
-      type: 'category',
-      boundaryGap: false,
-      data:  xdata.value,
-      axisLine: {//X轴线
-            show: true, 
-            lineStyle: {
-                color: '#000', // 线的颜色
-                width: 2, // 线宽
-                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-            }
-            },
-    }
-  ],
-    // xAxis: {
-    //     splitLine: {//去掉网格线
-    //         show: false,
-    //         lineStyle: {
-    //           color: "rgba(31,99,163,.2)",
-    //         },
-    //       }, 
-    //       axisLine: {//Y轴线
-    //         show: true, 
-    //         lineStyle: {
-    //             color: 'rgba(31,99,163,.3)', // 线的颜色
-    //             width: 2, // 线宽
-    //             type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-    //         }
-    //         },
-    //         axisLabel: {
-    //         color: "#7EB7FD",
-    //         fontWeight: "500",
-    //       },
-    // },
-    yAxis: {
-        axisTick: {
-            show: false,
+        nameLocation: 'middle',
+        data: xdata.value,
+        axisLine: {
+          //X轴线
+          show: true,
+          lineStyle: {
+            color: "#333333", // 线的颜色
+            width: 1, // 线宽
+            type: "solid" // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+          }
+        },
+        splitLine: {
+          show: true // 如果不需要网格线，可以设置为 false
         },
-        axisLabel: {
-            color: "#000",
-            fontWeight: "500",
-          },
-        splitLine: {//去掉网格线
-            show: false,
-            lineStyle: {
-              color: "rgba(31,99,163,.2)",
-            },
-          }, 
-          axisLine: {//Y轴线
-            show: true, 
-            lineStyle: {
-                color: '#000', // 线的颜色
-                width: 2, // 线宽
-                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
-            }
-},
+      }
+    ],
+
+    yAxis: {
+      type: "value",
+      name:'-cl',
+      nameGap:40,
+      nameTextStyle:{
+        fontSize: 16,
+        color:'#333333',
+        fontFamily:'Source Sans Pro-Regular'
+      },
+      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()
+  }
+  option.value && myChart.setOption(option.value)
 
-    }
+  window.onresize = function () {
+    myChart.resize()
   }
-  defineExpose({getsockechart,echatinit}); 
+}
+defineExpose({ getsockechart, echatinit })
 </script>
 <style lang="scss" scoped>
-
 </style>
 

src/views/home.vue

@@ -1368,6 +1368,8 @@
                     <BarChart ref="BarChartref" v-show="BarChartshow" :BarChartshow="BarChartshow"/>
                     <scatter ref="scatterref" v-show="scattershow" :scattershow="scattershow"/>
                     <radar ref="radarref" v-show="radarshow" :radarshow="radarshow"/>
+                    <pie ref="pieref" v-show="pieshow" :pieshow="pieshow" />
+                    <pareto ref="paretoref" v-show="paretoshow" :paretoshow="paretoshow" />
                   </div>
                   <!-- 可视化结束 -->
                   <!-- 右侧边栏开始 -->
@@ -1653,6 +1655,9 @@ import echartLine from './echart/echartLine.vue'
 import BarChart from './echart/BarChart.vue'
 import scatter from './echart/scatter.vue'
 import radar from './echart/radar.vue'
+import pie from './echart/pie.vue'
+import pareto from './echart/pareto.vue' 
+
 import Doptimize from './titlecomponent/Doptimize.vue'
 import Joptimize from './titlecomponent/Joptimize.vue'
 import Toptimize from './titlecomponent/Toptimize.vue'
@@ -1726,10 +1731,14 @@ let BarChartshow = ref(false);
 let bargraphshow = ref(false);
 let scattershow = ref(false);
 let radarshow = ref(false);
+let pieshow = ref(false);
+let paretoshow = ref(false);
 let bargraphref = ref();
 let echartLineref = ref();
 let BarChartref = ref();
 let radarref = ref();
+let pieref = ref();
+let paretoref = ref();
 let scatterref = ref();
 let echartzongshow = ref(false);
 const router = useRouter();
@@ -1961,7 +1970,7 @@ let question = ref([
   { url: 'kk8.png', titlie: "帕雷托图" },
   { url: 'kk3.png', titlie: "面积图" },
   { url: 'kk5.png', titlie: "柱状图" },
-  // { url: 'k3.png', titlie: "饼状图" },
+  { url: 'k3.png', titlie: "饼状图" },
  
   { url: 'kk6.png', titlie: "横条图" },
   { url: 'kk7.png', titlie: "雷达图" },
@@ -2634,9 +2643,9 @@ const dialogbolen = () => {
       vuefval.value.onSelection();
       break;
     case "开始":
-      optmonitor1.value.echatinit();
-      processMonitor1ref.value.echatinit();
-      processMonitor1ref.value.echatinit();
+      // optmonitor1.value.echatinit();
+      // processMonitor1ref.value.echatinit();
+      // processMonitor1ref.value.echatinit();
       runok();
       break;
     case "列表监控":
@@ -2656,6 +2665,9 @@ const dialogbolen = () => {
     case "面积图":
       echatsfunc();
       break;
+    case "饼状图":
+      echatsfunc();
+      break;
     case "柱状图":
       echatsfunc();
       break;
@@ -2677,7 +2689,7 @@ const dialogbolen = () => {
       break;
     case "帕雷托图":
       dialog.value.paretodialog = true;
-      // echatsfunc();
+      echatsfunc();
       break;
     case "云图/等值线":
       dialog.value.clouddialog = true;
@@ -2701,10 +2713,12 @@ const echartclear = () => {
   BarChartref.value.echatinit();
   radarref.value.echatinit();
   scatterref.value.echatinit();
+  pieref.value.echatinit();
+  paretoref.value.echatinit();
 }
 const echatsfunc = () => {
   //echartzongshow.value=true;
-  echartclear();
+  // echartclear();
   switch (tabactive.value) {
     case "面积图":
       areashow.value = true;
@@ -2713,6 +2727,8 @@ const echatsfunc = () => {
       BarChartshow.value = false;
       radarshow.value = false;
       scattershow.value = false;
+      pieshow = false;
+      paretoshow =false;
       break;
     case "柱状图":
       areashow.value = false;
@@ -2721,6 +2737,8 @@ const echatsfunc = () => {
       BarChartshow.value = false;
       radarshow.value = false;
       scattershow.value = false;
+      pieshow = false;
+      paretoshow = false;
       break;
     case "饼状图":
       areashow.value = false;
@@ -2729,6 +2747,8 @@ const echatsfunc = () => {
       BarChartshow.value = false;
       radarshow.value = false;
       scattershow.value = false;
+      pieshow = true;
+      paretoshow = false;
       break;
     case "折线图":
       areashow.value = false;
@@ -2737,6 +2757,8 @@ const echatsfunc = () => {
       BarChartshow.value = false;
       radarshow.value = false;
       scattershow.value = false;
+      pieshow = false;
+      paretoshow = false;
       break;
     case "散点图":
       areashow.value = false;
@@ -2745,6 +2767,8 @@ const echatsfunc = () => {
       BarChartshow.value = false;
       radarshow.value = false;
       scattershow.value = true;
+      pieshow = false;
+      paretoshow = false;
       break
     case "横条图":
       areashow.value = false;
@@ -2753,6 +2777,8 @@ const echatsfunc = () => {
       BarChartshow.value = true;
       radarshow.value = false;
       scattershow.value = false;
+      pieshow = false;
+      paretoshow = false;
       break
     case "雷达图":
       areashow.value = false;
@@ -2761,14 +2787,28 @@ const echatsfunc = () => {
       BarChartshow.value = false;
       radarshow.value = true;
       scattershow.value = false;
+      pieshow = false;
+      paretoshow = false;
+      break
+    case "帕雷托图":
+      areashow.value = false;
+      bargraphshow.value = false;
+      echartLineshow.value = false;
+      BarChartshow.value = false;
+      radarshow.value = false;
+      scattershow.value = false;
+      pieshow = false;
+      paretoshow = true;
       break
     default:
-    areashow.value = false;
+      areashow.value = false;
       bargraphshow.value = false;
       echartLineshow.value = false;
       BarChartshow.value = false;
       radarshow.value = false;
       scattershow.value = false;
+      pieshow = false;
+      paretoshow = false;
       break
 
   }
@@ -2835,9 +2875,10 @@ const curveLine = () => {
       bargraphref.value.getsockechart(curvedata.value);
       echartLineref.value.getsockechart(curvedata.value);
       BarChartref.value.getsockechart(curvedata.value);
-       radarref.value.getsockechart(curvedata.value);
-       scatterref.value.getsockechart(curvedata.value);
-
+      radarref.value.getsockechart(curvedata.value);
+      scatterref.value.getsockechart(curvedata.value);
+      pieref.value.getsockechart(curvedata.value);
+      paretoref.value.getsockechart(curvedata.value);
       // optmonitor1.value.getecharts();
 
     })
@@ -3553,6 +3594,8 @@ const websocketonmessage = (res) => {
     BarChartref.value.getsockechart(arrobj.value);
     radarref.value.getsockechart(arrobj.value);
     scatterref.value.getsockechart(arrobj.value);
+    pieref.value.getsockechart(arrobj.value);
+    paretoref.value.getsockechart(arrobj.value);
   } else {
     if (res.data.indexOf('——成功') !== -1) {
 
@@ -3857,7 +3900,7 @@ const openSeconddialog = (name) => {
 
   .ech {
     flex: 1;
-    border: 1px solid;
+    
   }
 }
 

src/views/vuetree/index.vue

@@ -37,7 +37,7 @@
       <!-- <button @click="onSelection()"  class="lableaniu">获取</button> -->
     </Panel>
     <Controls position="top-left">
-      <ControlButton title="Reset Transform" @click="resetTransform">
+      <ControlButton title="重置" @click="resetTransform">
         <Icon name="reset" />
       </ControlButton>
       <ControlButton title="背景切换" @click="toggleDarkMode">