登陆页换了背景，加了风险排名

zmc

2023-09-27 eeef5d4039d2b3fee6854ddc2789aa23232b2cfb

 src/views/line_graph/components/LineChart.vue

@@ -3,11 +3,11 @@
使用同一个图形实例，接受父组件传入的折线图option
 -->
<template>
  <div ref="chart" class="line-chart"></div>
  <div ref="chart" class="line-chart11"></div>
</template>

<script>
import * as _echarts from 'echarts';
import * as _echarts from 'echarts'

export default {
  props: {
@@ -18,7 +18,7 @@
        return {
          x: [],
          y: []
        };
        }
      }
    },
    title: {
@@ -40,28 +40,23 @@
  data() {
    return {
      chart: null
    };
    }
  },
  mounted() {
    this.intiChart();
    window.addEventListener('resize', this.resizeChart);
    this.intiChart()
    window.addEventListener('resize', this.resizeChart)
  },
  watch: {
    chartData() {
      // option变化时，图形再次初始化
      this.setOption();
    },

      this.setOption()
    }
  },
  // beforeUnmount() {
  //   if (this.chart) {
  //     this.chart.dispose();
  //   }
  // },

  methods: {
    intiChart() {
      // 创建echarts实例
      this.chart = _echarts.init(this.$refs.chart);
      this.chart = _echarts.init(this.$refs.chart)
    },

    setOption() {
@@ -88,11 +83,11 @@
          name: this.xName,
          data: this.chartData.x,
          type: 'category',
            axisLabel: {
              formatter: function (value) {
                return value.slice(5);
              }
          axisLabel: {
            formatter: function (value) {
              return value.slice(5)
            }
          }
        },
        yAxis: {
          type: 'value',
@@ -109,27 +104,25 @@
            data: this.chartData.y
          }
        ]
      };
      this.chart.setOption(option);
      }
      this.chart.setOption(option)
    },

    // 跟页面响应式变化
    resizeChart() {
      // this.chart.resize();
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
      setTimeout(() => {
        this.chart.resize()
      }, 1000)
    }
  }
};
}
</script>

<style>
.line-chart {
  width: 100%;
.line-chart11 {
  width: 600px;
  height: 300px;
  margin-top: 25px;
  margin-left: 30px;
}
</style>