Vue2 中使用 ECharts

2023-11-23 20:14:24

如何在 Vue2 和 Vue3 中使用 ECharts

前言

随着数据可视化在现代应用程序中的日益普及，交互式图表库变得必不可少。ECharts 作为一款功能强大的开源 JavaScript 图表库，在 Vue2 和 Vue3 框架中备受推崇。本文将深入探讨如何在 Vue 项目中使用 ECharts，从安装和初始化到创建和自定义图表。

安装

在 Vue2 项目中安装 ECharts 很简单：

npm install echarts --save

初始化

在 Vue2 中，可以在 main.js 文件中全局注册 ECharts：

import Vue from 'vue'
import ECharts from 'echarts'

Vue.component('v-chart', ECharts)

这将使你可以在 Vue 模板中使用 <v-chart> 组件。

示例

在 Vue2 组件中使用 ECharts 的一个简单示例：

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

<script>
export default {
  data() {
    return {
      options: {
        title: {
          text: '我的第一个图表'
        },
        series: [{
          type: 'line',
          data: [1, 2, 3, 4, 5]
        }]
      }
    }
  }
}
</script>

安装

在 Vue3 项目中安装 ECharts 与 Vue2 类似：

npm install echarts --save

初始化

Vue3 中的 ECharts 初始化过程略有不同：

import { defineComponent, ref } from 'vue'
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([BarChart, CanvasRenderer])

export default defineComponent({
  setup() {
    const chartRef = ref(null)

    const initChart = () => {
      const myChart = echarts.init(chartRef.value)
      myChart.setOption({
        title: {
          text: '我的第一个图表'
        },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4, 5]
        }]
      })
    }

    return {
      chartRef,
      initChart
    }
  },
  mounted() {
    this.initChart()
  }
})

示例

在 Vue3 组件中使用 ECharts 的一个简单示例：

<template>
  <div>
    <div ref="chart"></div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([BarChart, CanvasRenderer])

export default defineComponent({
  setup() {
    const chartRef = ref(null)

    const initChart = () => {
      const myChart = echarts.init(chartRef.value)
      myChart.setOption({
        title: {
          text: '我的第一个图表'
        },
        series: [{
          type: 'bar',
          data: [1, 2, 3, 4, 5]
        }]
      })
    }

    return {
      chartRef,
      initChart
    }
  },
  mounted() {
    this.initChart()
  }
})
</script>