Vue3中使用Echarts

一、Echarts的介紹

ECharts是一個基於JavaScript的開源可視化庫。它可以支持所有的可交互的數據可視化，例如線圖、柱狀圖、散點圖、餅圖、K線圖等。ECharts 4 提供了更好的性能、更友好的API以及完整的 TypeScript 支持。

為了更方便地在Vue3中使用Echarts，我們可以使用Vue-Echarts插件。Vue-Echarts是一個基於Echarts封裝的Vue組件，其實現了Echarts中常用的功能，同時又兼容了Vue的生命周期。

二、Vue3中使用Vue-Echarts

1. 安裝Vue-Echarts

安裝Vue-Echarts非常簡單，在命令行中輸入以下命令即可：

npm install vue-echarts

2. 引入Vue-Echarts

在Vue3項目的入口文件中，可以使用以下方式引用Vue-Echarts：

import ECharts from 'vue-echarts'

如果要使用全局註冊，可以使用以下語句：

app.component("v-chart", ECharts)

3. 使用Vue-Echarts繪製圖表

可以在Vue3組件中使用Vue-Echarts繪製圖表。在組件的template中輸入如下代碼即可：

<template>
  <div>
    <v-chart :options="chartOption" :notMerge="true" :lazyUpdate="true"></v-chart>
  </div>
</template>

chartOption是Echarts中繪製圖表所需要的配置項，它必須是一個Object類型的數據。可以在Vue3組件的data函數中定義chartOption，並在其他函數中修改這個數據來繪製不同的圖表。

三、使用Vuex管理圖表狀態

1. 在Vuex中定義狀態

為了更好地管理我們的圖表，我們可以使用Vuex來管理圖表的狀態。在Vuex中定義一個state，用來保存chartOption：

const state = {
  chartOption: {}
}

2. 在Vue3組件中使用Vuex

在Vue3組件中使用Vuex，首先需要在Vue3組件中導入Vuex：

import { useStore } from 'vuex'

然後使用useStore函數將Vuex store綁定到Vue3組件的實例上：

const store = useStore()

在使用Vue-Echarts繪製圖表時，chartOption應該從Vuex store中獲取，而不是直接定義在組件的data中。可以在Vue3組件的computed函數中定義chartOption，使其從Vuex store中獲取數據：

const chartOption = computed(() => {
  return store.state.chartOption
})

3. 在Vue3組件中修改狀態

在Vue3組件中修改chartOption狀態，可以使用Vuex中提供的mutations函數。先定義一個mutation函數：

const mutations = {
  setChartOption(state, option) {
    state.chartOption = option
  }
}

然後在Vue3組件中使用mutations函數來修改chartOption狀態：

store.commit('setChartOption', newOption)

newOption是一個新的圖表選項，它將替換store中原來的chartOption。

四、使用ECharts API

1. ECharts全局對象

在ECharts中，全局對象是echarts。可以使用以下代碼獲取echarts對象：

import echarts from 'echarts'

得到echarts對象後，可以使用它的API實現更多的功能。例如，可以使用以下API調整圖表大小、設置數據、設置自定義屬性：

const chartInstance = ref(null)
onMounted(() => {
  const chart = echarts.init(chartInstance.value)
  chart.setOption(chartOption.value)
  chart.resize()
  chart.setOption({
    dataset: {
        source: myDataSource
    },
    myCustomProperty: 'myCustomValue'
  })
})

2. ECharts實例對象

ECharts實例是一個圖表的實例，每次調用echarts.init()函數都會創建一個新的實例。可以使用以下代碼獲取ECharts實例對象：

const chartInstance = ref(null)
onMounted(() => {
  const chart = echarts.init(chartInstance.value)
})

獲取ECharts實例對象後，可以使用它的方法實現更多的功能。例如，可以使用以下方法調用tooltip：

const chartInstance = ref(null)
onMounted(() => {
  const chart = echarts.init(chartInstance.value)
  chart.on('mousemove', function (params) {
    chart.dispatchAction({
        type: 'showTip',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
    })
  })
})

五、總結

Vue3與ECharts的結合可以實現各種豐富多彩的數據可視化效果，本文介紹了使用Vue-Echarts、Vuex以及ECharts API的方法。希望讀者可以通過本文掌握基礎的Vue3+ECharts編程技能。