修改

jinlin

2024-08-02 826cd5b51d5106cfea07e397eda184fb15ec7a30

 web/src/views/modules/taskReliability/SimulatCurve.vue

@@ -1,49 +1,124 @@
<template>
  <div class="mod-taskReliability-taskPhase">
    <div class="echart" id="mychart" :style="myChartStyle"></div>
    <div class="echart" id="myChart" :style="myChartStyle"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import echart from "echarts";

  export default {
    name: 'SimulatCurve',
    data() {
      return {
        xDataList: [],
        yDataList: [],
        mttr: '',
        mtbf: '',
        myChart: {},
        myChartStyle: {float: "left", width: "100%", height: "400px"} //图表样式
        myChartStyle: {float: "left", width: "100%", height: "600px"}, //图表样式
        option: {}
      }
    },
    components: {},
    methods: {
      initEcharts(CurveData) {
        console.log(eval(CurveData), 'initEcharts(CurveData)')
        const option = {
          title:{
            text:'仿真可靠度收敛曲线图',
      async initEcharts(Param) {
        console.log(Param)
        let res = await this.$http.post(`/taskReliability/SimulatAssess/getResultXML`, Param)
        console.log(res.data)
        if (res.data) {
          this.yDataList = res.data.curveParam.ydata
          this.xDataList = res.data.curveParam.xdata
          this.mttr = res.data.mttr.toFixed(4)
          this.mtbf = res.data.mtbf.toFixed(4)
        }
        this.option = {
          title: {
            text: "mttr:" + this.mttr + "    mtbf:" + this.mtbf,
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial',
              fontSize: 20,
              fontSize: 30,
              fontStyle: 'normal',
              fontWeight: 'normal',
            }
            },
            textAlign:'auto',//整体（包括 text 和 subtext）的水平对齐
            textVerticalAlign:'auto',//整体（包括 text 和 subtext）的垂直对齐
            padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
            left:'center',//'5' | '5%'，title 组件离容器左侧的距离
            right:'auto',//'title 组件离容器右侧的距离
            top:'auto',//title 组件离容器上侧的距离
            bottom:'auto',//title 组件离容器下侧的距离
          },
          xAxis: {
            data: [10, 30, 50, 70, 90, 110, 130,150,170],
            name:'仿真次数'
            data: this.xDataList,
            name: '仿真总时长'
          },
          yAxis: {},
          yAxis: {

            name: '',
          },
          series: [
            {
              data: [15, 85, 75, 25, 65,35,55,45,50],
              data: this.yDataList,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.myChart = echarts.init(document.getElementById("mychart"));
        this.myChart.setOption(option);
        this.myChart = echart.init(document.getElementById("myChart"));
        console.log(this.option, ' this.option ')
        this.myChart.setOption(this.option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
      async getProductEcharts(Param) {
        let res = await this.$http.post(`/taskReliability/SimulatAssess/getResultData`, Param)
        console.log(res.data)
        if (res.data) {
          this.yDataList = res.data.curveParam.ydata
          this.xDataList = res.data.curveParam.xdata
          this.mttr = res.data.mttr.toFixed(4)
          this.mtbf = res.data.mtbf.toFixed(4)
        }
        this.option = {
          title: {
            text: "mttr:" + this.mttr + "    mtbf:" + this.mtbf,
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial',
              fontSize: 30,
              fontStyle: 'normal',
              fontWeight: 'normal',
            },
            textAlign: 'auto',//整体（包括 text 和 subtext）的水平对齐
            textVerticalAlign: 'auto',//整体（包括 text 和 subtext）的垂直对齐
            padding: 0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
            left: 'center',//'5' | '5%'，title 组件离容器左侧的距离
            right: 'auto',//'title 组件离容器右侧的距离
            top: 'auto',//title 组件离容器上侧的距离
            bottom: 'auto',//title 组件离容器下侧的距离
          },
          xAxis: {
            data: this.xDataList,
            name: '仿真总时长',
            splitNumber: 10
          },
          yAxis: {

            name: '',
          },
          series: [
            {
              data: this.yDataList,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.myChart = echart.init(document.getElementById("myChart"));
        console.log(this.option, ' this.option ')
        this.myChart.setOption(this.option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.myChart.resize();