详解vue文件中使用echarts.js的两种方式

当我们需要在Vue项目中使用Echarts.js可视化库时，通常有两种方式可以实现，分别是直接引入Echarts.js文件和通过Vue-Echarts插件引入。

直接引入Echarts.js文件

步骤一： 在 Vue 项目中安装 Echarts

在项目根目录中使用 npm 安装 Echarts.js

npm install echarts --save

步骤二：在 Vue 文件中引入 Echarts.js

我们需要在需要使用 Echarts.js 的 Vue 文件中引入 Echarts.js 相关文件。

import echarts from 'echarts'

export default {
  name: 'Chart',
  data () {
    return {
      chart: null // 记录图表实例
    }
  },
  methods: {
    // 初始化图表方法
    initChart () {
      const data = [5, 20, 36, 10, 10, 20]
      let option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: data
        }]
      }
      let chartDom = document.getElementById('my-chart')
      let chart = echarts.init(chartDom)
      chart.setOption(option)
      this.chart = chart // 记录图表实例
    }
  },
  mounted () {
    this.initChart()
  },
  destroyed () {
    this.chart.dispose()
    this.chart = null
  }
}

步骤三：在 Vue 模板中使用 Echarts

最后，在模板中我们只需添加一个容器即可。

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

通过Vue-Echarts插件引入

Vue-Echarts 是一个针对 Vue 框架封装的 Echarts.js 插件，它可以更方便地在 Vue 项目中使用 Echarts.js 库。

步骤一：在 Vue 项目中安装 Vue-Echarts

在项目根目录中使用 npm 安装 Vue-Echarts 插件：

npm install vue-echarts --save

步骤二：在 Vue 文件中引用 Vue-Echarts

在需要使用 Echarts.js 的 Vue 文件中引用 Vue-Echarts，并注册为 Vue 的组件。

import VueEcharts from 'vue-echarts/components/ECharts'
import echarts from 'echarts'

export default {
  name: 'Chart',
  components: {
    VueEcharts
  },
  data () {
    return {
      data: [5, 20, 36, 10, 10, 20],
      option: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: this.data
        }]
      }
    }
  },
  methods: {
    // 更新数据方法
    updateData () {
      this.data = [10, 15, 40, 20, 10, 5]
      this.option.series[0].data = this.data
    }
  },
  mounted () {
    setInterval(() => {
      this.updateData()
    }, 2000)
  }
}

步骤三：在 Vue 模板中使用 Vue-Echarts

在模板中，我们定义一个 Vue-Echarts 组件，并通过 props 将数据和配置传递给它。

<template>
  <div>
    <vue-echarts :options="option" :data="data"></vue-echarts>
  </div>
</template>

示例说明：

第一个例子是通过在Vue文件中直接引入ECharts.js文件来使用ECharts.js库的。我们在Vue文件中引入ECharts.js文件（import echarts from 'echarts'）并在mounted方法中初始化图表，并在destroyed方法中销毁图表实例。在模板中，我们添加一个容器（

）用于显示图表。

第二个例子是通过Vue-Echarts插件引入ECharts.js库的。我们在Vue文件中引用VueEcharts组件（import VueEcharts from 'vue-echarts/components/ECharts'）并将其注册为Vue的组件。然后，我们在data对象中定义了数据和option配置用于初始化图表，在模板中，我们使用Vue-Echarts组件，并通过props将数据和配置传递给它。此外，我们还定义了一个方法updateData来更新数据，以演示Vue-Echarts插件的实时数据更新功能。