在vue中插入echarts图表

<template>
  <div
    class="echart"
    ref="mychart1"
    id="mychart1"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>
  <div
    class="echart"
    ref="mychart2"
    id="mychart2"
    :style="{ float: 'left', width: '100%', height: '400px' }"
  ></div>
</template>

<script>
import * as echarts from 'echarts';
// import {ref,onMounted} from vue
export default {
  
  mounted() {
    this.$nextTick(() => {
      this.initEcharts();
    });

  },
  methods: {
    initEcharts() {
      const chartDom1 = this.$refs.mychart1;
      const myChart1 = echarts.init(chartDom1);
      const option1 = {
        xAxis: {
          type: 'category',
          data:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,
         21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,
         39,40,41,42,43,44,45,46,47,48,49,]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:[0.146299484,0.488812392,0.853700516,0.853700516,0.853700516,0.853700516,0.853700516,0.853700516,0.853700516,
    0.853700516,0.853700516,0.853700516,0.905335628,0.908777969,0.908777969,0.91222031,0.91394148,0.91394148,0.91394148,
    0.91394148,0.917383821,0.919104991,0.919104991,0.919104991,0.919104991,0.920826162,0.920826162,0.920826162,0.920826162,
    0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,0.922547332,0.922547332,0.920826162,0.920826162,
    0.919104991,0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,0.920826162,
    0.920826162,],
            type: 'line'
          }
        ]
      };
      option1 && myChart1.setOption(option1);

      const chartDom2 = this.$refs.mychart2;
      const myChart2 = echarts.init(chartDom2);
      const option2 = {
        xAxis: {
          type: 'category',
          data:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,
         21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,
         39,40,41,42,43,44,45,46,47,48,49,]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:[0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,
    0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,0.746837711,
    0.746837711,0.746837711,0.291002565,0.288495182,0.288172036,0.286044006,0.285230208,0.28466754,0.284258943,
    0.28390811,0.283597514,0.28333019,0.283045125,0.282801505,0.282566763,0.282336899,0.282146023,0.281934799,
    0.281753167,0.281543406,0.281496848,0.281532406,0.281580297,0.281468421,0.281410495,0.281327578,0.281245982,
    0.281173373,0.28107471,0.281006722,0.280915136,0.280841162,0.280741451,],
            type: 'line'
          }
        ]
      };
      option2 && myChart2.setOption(option2);

      

      window.addEventListener("resize", () => {
        myChart1.resize();
        myChart2.resize();
      });
    }
  }
};
</script>

这段代码是一个Vue.js组件，用于渲染两个ECharts图表（mychart1和mychart2）。让我详细解释每个部分的作用：

1. <template> 部分：

   这是Vue组件的模板部分，用于定义组件的外观和结构。在这里，你创建了两个<div> 元素，每个元素用于渲染一个ECharts图表。

   • class="echart"：这是CSS类，你可以用于样式控制或选择器选取，但在你提供的代码中，它没有被定义，这可能是一个错误或者它在实际的项目中有定义，但在提供的代码中没有包含。
   • ref="mychart1" 和 ref="mychart2"：这些是Vue的ref属性，它们允许你在组件中引用这些DOM元素，以便之后初始化ECharts图表。
   • id="mychart1" 和 id="mychart2"：这是HTML元素的ID属性，用于标识这两个图表的唯一性。
   • :style 属性：这里使用动态绑定样式，设置了这两个<div> 元素的浮动、宽度和高度。

2. <script> 部分：

   这是Vue组件的JavaScript逻辑部分，包含了ECharts图表的初始化和数据配置。

   • import * as echarts from 'echarts';：这行代码导入ECharts库，使你可以在组件中使用ECharts的功能。

   • mounted() 钩子：mounted 钩子在组件挂载到DOM后执行。在这个钩子中，你将调用 this.initEcharts() 来初始化图表。

   • methods 部分：这里定义了一个名为 initEcharts 的方法，用于初始化ECharts图表。

     • const chartDom1 = this.$refs.mychart1; 和 const chartDom2 = this.$refs.mychart2;：这两行代码分别获取了两个 <div> 元素的DOM引用，以便初始化相应的图表。
     • 创建了两个ECharts图表的配置选项 option1 和 option2。
     • 使用 echarts.init(chartDom1) 和 echarts.init(chartDom2) 来初始化两个ECharts图表，分别绑定到 myChart1 和 myChart2。
     • 使用 myChart1.setOption(option1) 和 myChart2.setOption(option2) 来设置每个图表的配置选项，从而渲染数据。
     • 最后，添加了一个窗口调整大小的监听器，以确保图表在窗口大小变化时能够自动调整大小。

总之，这个Vue组件的作用是在页面上渲染两个ECharts图表，每个图表都有自己的数据和配置选项，并在组件挂载后自动初始化。这使你能够在Vue应用中轻松地显示两个ECharts图表。请注意，实际应用中可能需要根据你的需求和数据，自定义这些配置选项和数据。