数据风险模型模块修改

riku

2023-08-29 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b

 src/sfc/LineChart.vue

@@ -7,13 +7,34 @@
</template>
  
<script>
  import * as echarts from 'echarts';
import * as _echarts from 'echarts';
  
  export default {
    props: {
      chartData: {
        type: Object,
        required: true,
      default: () => {
        return {
          x: [],
          y: []
        };
      }
    },
    title: {
      type: String
    },
    xName: {
      type: String,
      default: '时间'
    },
    yName: {
      type: String,
      default: '百分比'
    },
    seriesName: {
      type: String,
      default: '系列一'
        }
    },
    data() {
@@ -22,19 +43,15 @@
      };
    },
    mounted() {
      this.renderChart();
    this.intiChart();
    //   this.chart.setOption(this.chartData)
      window.addEventListener('resize',this.resizeChart)
    window.addEventListener('resize', this.resizeChart);
    },
    watch: {
      chartData() {
        // option变化时，图形再次初始化
      // this.renderChart();
      this.chart.dispose();
      this.renderChart();
      this.chart.setOption(this.chartData)
      this.setOption();
      }
      
    },
    beforeUnmount() {
      if (this.chart) {
@@ -42,14 +59,19 @@
      }
    },
    methods: {
      renderChart() {
    intiChart() {
        // 创建echarts实例
        this.chart = echarts.init(this.$refs.chart);
      this.chart = _echarts.init(this.$refs.chart);
  
      // 使用刚指定的配置项和数据显示图表
      // this.chart.setOption(option, true);
    },

    setOption() {
        // 定义图表的配置项和数据
        const option = {
          title: {
            // text: '异步数据加载示例'
          text: this.title
          },
          tooltip: {},
  
@@ -66,8 +88,8 @@
            }
          },
          xAxis: {
            name: '时间',
            data: []
          name: this.xName,
          data: this.chartData.x
          },
          yAxis: {
              type: 'value',
@@ -75,24 +97,22 @@
              show: true,
              interval: 'auto'
            },
            name: '百分比'
          name: this.yName
          },
          series: [
            {
              name: 'fume',
            name: this.seriesName,
              type: 'line',
              data: []
            data: this.chartData.y
            }
          ]
        };
  
        // 使用刚指定的配置项和数据显示图表
        this.chart.setOption(option, true);
      this.chart.setOption(option);
      },
  
      // 跟页面响应式变化
      resizeChart(){
        this.chart.resize()
      this.chart.resize();
      }
    }
  };
@@ -104,6 +124,4 @@
      height: 500px;
      margin-top: 25px;
  }
  
  </style>