数据风险模型模块修改

riku

2023-08-29 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b

 src/sfc/LineChart.vue

@@ -2,108 +2,126 @@
子组件有基本的样式 
使用同一个图形实例，接受父组件传入的折线图option
 -->
 <template>
    <div ref="chart" class="line-chart"></div>
<template>
  <div ref="chart" class="line-chart"></div>
</template>
  

<script>
  import * as echarts from 'echarts';
  
  export default {
    props: {
      chartData: {
        type: Object,
        required: true,
        }
    },
    data() {
      return {
        chart: null
      };
    },
    mounted() {
      this.renderChart();
    //   this.chart.setOption(this.chartData)
      window.addEventListener('resize',this.resizeChart)
    },
    watch: {
      chartData() {
        // option变化时，图形再次初始化
      // this.renderChart();
      this.chart.dispose();
      this.renderChart();
      this.chart.setOption(this.chartData)
      }
      
    },
    beforeUnmount() {
      if (this.chart) {
        this.chart.dispose();
      }
    },
    methods: {
      renderChart() {
        // 创建echarts实例
        this.chart = echarts.init(this.$refs.chart);
  
        // 定义图表的配置项和数据
        const option = {
          title: {
            // text: '异步数据加载示例'
          },
          tooltip: {},
  
          toolbox: {
            // 工具栏
            feature: {
              dataZoom: {
                // 区域缩放
                yAxisIndex: 'none'
              },
           
              // 保存为图片
              saveAsImage: {}
            }
          },
          xAxis: {
            name: '时间',
            data: []
          },
          yAxis: {
              type: 'value',
              axisLabel: {
              show: true,
              interval: 'auto'
            },
            name: '百分比'
          },
          series: [
            {
              name: 'fume',
              type: 'line',
              data: []
            }
          ]
import * as _echarts from 'echarts';

export default {
  props: {
    chartData: {
      type: Object,
      required: true,
      default: () => {
        return {
          x: [],
          y: []
        };
  
        // 使用刚指定的配置项和数据显示图表
        this.chart.setOption(option, true);
      },
  
      // 跟页面响应式变化
      resizeChart(){
        this.chart.resize()
      }
    },
    title: {
      type: String
    },
    xName: {
      type: String,
      default: '时间'
    },
    yName: {
      type: String,
      default: '百分比'
    },
    seriesName: {
      type: String,
      default: '系列一'
    }
  };
  </script>
  
  <style>
  .line-chart {
      width: 100%;
      height: 500px;
      margin-top: 25px;
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.intiChart();
    //   this.chart.setOption(this.chartData)
    window.addEventListener('resize', this.resizeChart);
  },
  watch: {
    chartData() {
      // option变化时，图形再次初始化
      this.setOption();
    }
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    intiChart() {
      // 创建echarts实例
      this.chart = _echarts.init(this.$refs.chart);

      // 使用刚指定的配置项和数据显示图表
      // this.chart.setOption(option, true);
    },

    setOption() {
      // 定义图表的配置项和数据
      const option = {
        title: {
          text: this.title
        },
        tooltip: {},

        toolbox: {
          // 工具栏
          feature: {
            dataZoom: {
              // 区域缩放
              yAxisIndex: 'none'
            },

            // 保存为图片
            saveAsImage: {}
          }
        },
        xAxis: {
          name: this.xName,
          data: this.chartData.x
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
          },
          name: this.yName
        },
        series: [
          {
            name: this.seriesName,
            type: 'line',
            data: this.chartData.y
          }
        ]
      };
      this.chart.setOption(option);
    },

    // 跟页面响应式变化
    resizeChart() {
      this.chart.resize();
    }
  }
  
  </style>
  
};
</script>

<style>
.line-chart {
  width: 100%;
  height: 500px;
  margin-top: 25px;
}
</style>