import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; option && myChart.setOption(option); vue2 引入完整代码

在 Vue2 中，你可以将这个 echarts 图表封装成一个组件，以便在 Vue2 的模板中重复使用。以下是一个完整的 Vue2 组件的代码示例：

<template>
  <div :id="chartId" style="width: 100%; height: 500px;"></div>
</template>

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

export default {
  props: {
    chartId: {
      type: String,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    xLabels: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    const chartDom = document.getElementById(this.chartId);
    const myChart = echarts.init(chartDom);
    const option = {
      xAxis: {
        type: 'category',
        data: this.xLabels,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.data,
          type: 'line',
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

在这个组件中，我们接受三个属性：`chartId` 表示 echarts 图表的 DOM 元素 id，`data` 表示折线图的数据数组，`xLabels` 表示 x 轴的标签数组。在 `mounted()` 钩子函数中，我们通过 `echarts.init` 初始化 echarts 实例，并将其绑定到指定的 DOM 元素上。然后，我们定义了一个 `option` 对象，其中包含了 x 轴和 y 轴的数据以及一个折线图系列的数据。最后，我们通过 `myChart.setOption(option)` 方法将这个 `option` 对象应用到 echarts 实例上，从而呈现出一个折线图。

你可以在父组件中使用这个 echarts 图表组件，例如：

<template>
  <div>
    <echarts-chart chartId="my-chart" :data="chartData" :xLabels="chartLabels" />
  </div>
</template>

<script>
import EchartsChart from './EchartsChart.vue';

export default {
  components: {
    EchartsChart,
  },
  data() {
    return {
      chartData: [150, 230, 224, 218, 135, 147, 260],
      chartLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    };
  },
};
</script>

在这个父组件中，我们将 echarts 图表组件引入，并传递了 `chartId`、`data` 和 `xLabels` 这三个属性。这样，我们就可以在父组件中动态地修改图表数据和标签，而图表组件将自动更新并重新渲染 echarts 图表。