Vue3.0 之 echarts饼图轮播：奇妙的Hooks用法

2023-09-22 03:18:51





## 前言

echarts是一款强大的可视化工具库，可以帮助我们轻松创建各种各样的图表。饼图是一种常用的图表类型，可以用来表示数据在整体中所占的比例。当我们使用echarts创建饼图时，可以通过设置`currentIndex`属性来高亮显示某一块扇形。

在Vue 3.0中，我们可以使用Hooks来创建可重用的组件逻辑。Hooks是一种特殊类型的函数，它可以在组件之外使用。在本文中，我们将使用`currentIndex`来跟踪当前高亮的索引，并将`setInterval`函数与`watch`函数相结合来实现轮播效果。

## 实现步骤

### 1. 创建一个Vue组件

首先，我们需要创建一个Vue组件来封装echarts饼图轮播。我们可以使用以下代码来创建组件：

```html
<template>
  <div id="pie-chart"></div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

export default {
  setup() {
    const currentIndex = ref(0)
    const data = ref([
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 274, name: '联盟广告' },
      { value: 235, name: '视频广告' },
      { value: 400, name: '搜索引擎' }
    ])

    onMounted(() => {
      const chart = echarts.init(document.getElementById('pie-chart'))
      const option = {
        legend: {
          data: data.value.map(item => item.name)
        },
        series: [
          {
            type: 'pie',
            data: data.value,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      chart.setOption(option)

      watch(currentIndex, (newVal, oldVal) => {
        if (newVal !== oldVal) {
          chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: newVal
          })
        }
      })

      setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % data.value.length
      }, 2000)
    })

    return {
      currentIndex,
      data
    }
  }
}
</script>

2. 使用组件

接下来，我们需要在我们的Vue应用程序中使用这个组件。我们可以使用以下代码来使用组件：

<template>
  <pie-chart></pie-chart>
</template>

<script>
import PieChart from './PieChart.vue'

export default {
  components: {
    PieChart
  }
}
</script>