vue3使用 echarts折线图的方法

1. 安装 ECharts：`npm install echarts --save`

2. 在 Vue 组件中引入 ECharts：

   import echarts from 'echarts'

3. 在 Vue 组件的 `mounted` 钩子函数中初始化 ECharts 实例：

   mounted () {
     const myChart = echarts.init(this.$refs.chart)
   }

4. 设置 ECharts 实例的配置项和数据：

   const option = {
     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
       type: 'value'
     },
     series: [{
       data: [820, 932, 901, 934, 1290, 1330, 1320],
       type: 'line'
     }]
   }
   myChart.setOption(option)

5. 在 Vue 组件的模板中添加一个 DOM 元素作为 ECharts 的容器：

   <template>
     <div ref="chart" style="height: 400px"></div>
   </template>

完整代码示例：

<template>
  <div ref="chart" style="height: 400px"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted () {
    const myChart = echarts.init(this.$refs.chart)
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }
    myChart.setOption(option)
  }
}
</script>