echarts如何在vue2中使用

在 Vue2 中使用 Echarts 有两种方式：

1. 直接引入 Echarts 的 JS 文件并在 Vue 组件中使用。

在 Vue 组件的 `mounted` 钩子函数中，使用 `this.$refs` 获取到组件的 DOM 元素，然后使用 `echarts.init` 方法初始化一个 Echarts 实例，并通过 `setOption` 方法设置图表的配置项。例如：

<template>
  <div ref="chart" style="width: 100%; height: 300px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    const chartDom = this.$refs.chart
    const myChart = echarts.init(chartDom)

    myChart.setOption({
      // 图表配置项
    })
  }
}
</script>

需要注意的是，这种方式在多个组件中使用时可能会重复引入 Echarts 的 JS 文件，影响页面加载速度。

2. 使用 `vue-echarts` 包装 Echarts 组件。

`vue-echarts` 是一个基于 Vue 的 Echarts 封装组件，它提供了更加便捷的方式来使用 Echarts。首先，安装 `vue-echarts`：

npm install vue-echarts echarts --save

然后，在 Vue 组件中引入 `vue-echarts` 并注册：

<template>
  <v-chart :options="options" />
</template>

<script>
import { VChart } from 'vue-echarts'

export default {
  components: {
    VChart
  },
  data() {
    return {
      options: {
        // 图表配置项
      }
    }
  }
}
</script>

使用 `vue-echarts` 的好处是，可以通过 `echarts` 属性访问到 Echarts 实例，方便进行一些高级操作。例如：

<template>
  <v-chart :options="options" ref="chart" />
</template>

<script>
import { VChart } from 'vue-echarts'

export default {
  components: {
    VChart
  },
  data() {
    return {
      options: {
        // 图表配置项
      }
    }
  },
  mounted() {
    const chart = this.$refs.chart.echarts
    chart.on('click', params => {
      console.log(params)
    })
  }
}
</script>

以上是两种在 Vue2 中使用 Echarts 的方式，可以根据项目需求选择合适的方式。