vue 怎么封装echarts 折线图案列 并且提供案列

### 回答1：
Vue 可以使用 ECharts 的 Vue 组件进行封装折线图。

首先，安装 ECharts：

npm install echarts

然后，在 Vue 中注册 ECharts 组件：

import echarts from 'echarts'

export default {
  name: 'LineChart',
  props: {
    data: {
      type: Array,
      required: true
    },
    xLabel: {
      type: String,
      default: ''
    },
    yLabel: {
      type: String,
      default: ''
    }
  },
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.data.map(item => item.x),
          name: this.xLabel
        },
        yAxis: {
          type: 'value',
          name: this.yLabel
        },
        series: [{
          data: this.data.map(item => item.y),
          type: 'line'
        }]
      }
      myChart.setOption(option)
    }
  },
  render () {
    return (
      <div ref="chart" style={{ width: '100%', height: '400px' }}></div>
    )
  }
}

在上面的代码中，我们定义了一个名为 LineChart 的组件，它接受一个 data 属性，该属性是一个数组，每个元素包含 x 和 y 值，用于绘制折线图。另外，我们还可以传入 xLabel 和 yLabel 属性，用于设置 X 轴和 Y 轴的标签。

在组件的 mounted 钩子函数中，我们调用 initChart 方法来初始化图表。在 initChart 方法中，我们创建了一个 ECharts 实例，并设置了图表的配置项。

最后，在组件的 render 函数中，我们使用 ref 属性引用了一个 div 元素，用于渲染图表。

使用 LineChart 组件可以很方便地绘制折线图。例如，我们可以在父组件中这样使用它：

<template>
  <div>
    <line-chart :data="data" x-label="X轴标签" y-label="Y轴标签" />
  </div>
</template>

<script>
import LineChart from './LineChart'

export default {
  components: {
    LineChart
  },
  data () {
    return {
      data: [
        { x: '1月', y: 100 },
        { x: '2月', y: 200 },
        { x: '3月', y: 300 },
        { x: '4月', y: 400 },
        { x: '5月', y: 500 },
        { x: '6月', y: 600 }
      ]
    }
  }
}
</script>

在上面的代码中，我们引入了 LineChart 组件，并在模板中使用它。我们传入了一个 data 数组，用于绘制折线图。同时，我们还设置了 X 轴和 Y 轴的标签。

### 回答2：
Vue封装echarts折线图需要以下几个步骤：

1. 安装echarts：首先，我们需要在Vue项目中安装echarts依赖。可以通过npm或者yarn来安装echarts：npm install echarts 或者 yarn add echarts。

2. 创建组件：在Vue项目中创建一个用来展示折线图的组件，可以命名为LineChart.vue。

3. 引入echarts：在LineChart.vue组件中引入echarts库，可以在代码中使用 import echarts from 'echarts' 进行引入。

4. 创建DOM容器：在LineChart.vue中创建一个DOM容器，用来渲染echarts折线图。

5. 初始化echarts实例：在LineChart.vue中的mounted生命周期钩子函数中，使用echarts.init方法初始化一个echarts实例。

6. 配置图表选项：在初始化echarts实例后，可以使用实例对象的setOption方法来配置echarts图表的选项，例如定义x轴数据、y轴数据和折线数据等。

7. 监听窗口大小改变：为了保证echarts图表在窗口大小改变时能够自适应，可以使用window.addEventListener函数监听窗口大小改变事件，并在事件触发时调用echarts实例的resize方法进行图表的重绘。

8. 销毁实例：在组件销毁时，可以通过echarts实例的dispose方法来销毁实例，以防止内存泄漏。

下面是一个简单的例子，演示了如何使用Vue封装echarts折线图：

<template>
  <div id="line-chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const container = document.getElementById('line-chart');
      const chart = echarts.init(container);
      
      const option = {
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'line'
        }]
      };
      
      chart.setOption(option);
      
      window.addEventListener('resize', () => {
        chart.resize();
      });
      
      this.$once('hook:beforeDestroy', () => {
        chart.dispose();
      });
    }
  }
};
</script>

在该案例中，我们在LineChart.vue组件的模板中创建了一个id为line-chart的div作为echarts图表的容器。在mounted生命周期钩子函数中，我们初始化了一个echarts实例，并进行了一些简单的配置，如x轴数据，y轴数据和折线数据。另外，我们还监听了窗口大小改变事件，当窗口大小改变时，调用echarts实例的resize方法对图表进行重绘。当组件销毁时，调用echarts实例的dispose方法进行销毁。

### 回答3：
要封装echarts折线图，首先需要在Vue项目中引入echarts库，可以通过npm安装依赖。

在.vue文件中，需要引入echarts并注册一个全局组件，例如：

<template>
  <div>
    <line-chart :data="chartData"></line-chart>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      chartData: [
        {name: 'A', value: 10},
        {name: 'B', value: 20},
        {name: 'C', value: 30},
        {name: 'D', value: 25},
        {name: 'E', value: 15}
      ]
    }
  },
  components: {
    'line-chart': {
      template: '<div ref="chart"></div>',
      props: ['data'],
      mounted() {
        this.initChart()
      },
      methods: {
        initChart() {
          const chart = echarts.init(this.$refs.chart)
          const xAxisData = this.data.map(item => item.name)
          const yAxisData = this.data.map(item => item.value)
          const option = {
            xAxis: {
              data: xAxisData
            },
            yAxis: {},
            series: [{
              type: 'line',
              data: yAxisData
            }]
          }
          chart.setOption(option)
        }
      }
    }
  }
}
</script>

上述代码中，使用props接收外部数据，并在mounted钩子中调用initChart方法来初始化图表。initChart方法中，可以通过ref获取到挂载的DOM元素，并使用echarts的API来配置和渲染折线图。

在data中定义了一个chartData数组，用于接收图表数据。折线图的x轴数据使用map方法从chartData中提取name字段，y轴数据使用map方法从chartData中提取value字段。通过配置xAxis和yAxis，以及series来生成折线图的配置项(option)，然后调用chart.setOption(option)来显示图表。

在模板中，使用line-chart组件，并传递chartData作为props来渲染折线图。

通过以上步骤，就可以封装一个可复用的echarts折线图组件，并在Vue项目中使用了。