如何用 Vue 和 Echarts 库实现饼图，并解决同一个组件中两个饼图不加载的问题？

前端

2023-10-03 23:14:55

使用 Vue 和 Echarts 库创建令人惊艳的饼图

探索饼图的神奇世界

饼图是一种强大的数据可视化工具，它通过将数据划分为扇形区域来显示不同类别在整体中的比例。它经常用于展示市场份额、客户人口统计数据以及其他比例相关的数据。

利用 Vue 和 Echarts 简化饼图创建

Vue 和 Echarts 是两个强大的 JavaScript 库，可以轻松创建互动式饼图。

安装和配置库

要开始使用，请通过 npm 安装 Vue 和 Echarts 库：

npm install vue echarts

然后，在 Vue 组件中导入库并将其注册为组件：

import Vue from 'vue'
import Echarts from 'echarts'

Vue.component('echarts', {
  template: '<div :id="id" style="width: 100%;height: 400px;"></div>',
  props: ['id', 'options'],
  mounted() {
    this.echartsInstance = Echarts.init(document.getElementById(this.id))
    this.echartsInstance.setOption(this.options)
  },
  beforeDestroy() {
    this.echartsInstance.dispose()
  }
})

创建你的第一个饼图

现在，你已经设置好了库，就可以创建你的第一个饼图了。

<template>
  <div>
    <echarts id="pie-chart" :options="pieChartOptions"></echarts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pieChartOptions: {
        title: {
          text: '饼图示例'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: '苹果' },
            { value: 310, name: '香蕉' },
            { value: 234, name: '梨' },
            { value: 135, name: '葡萄' },
            { value: 1548, name: '其他' }
          ]
        }]
      }
    }
  }
}
</script>

这个组件将显示一个标题为 "饼图示例" 的饼图，其中包含五个不同的扇形区域，分别代表苹果、香蕉、梨、葡萄和其他水果的市场份额。

克服多个饼图加载问题

如果你在同一个组件中尝试创建多个饼图，你可能会遇到一个饼图加载而另一个不加载的问题。这是因为 Echarts 只允许在一个容器中渲染一个图表。

要解决这个问题，可以将饼图放在不同的容器中，然后分别初始化 Echarts 实例：

<template>
  <div>
    <div id="pie-chart-1"></div>
    <div id="pie-chart-2"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const pieChart1 = Echarts.init(document.getElementById('pie-chart-1'))
    const pieChart2 = Echarts.init(document.getElementById('pie-chart-2'))

    pieChart1.setOption({
      title: {
        text: '饼图示例 1'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        data: [
          { value: 335, name: '苹果' },
          { value: 310, name: '香蕉' },
          { value: 234, name: '梨' },
          { value: 135, name: '葡萄' },
          { value: 1548, name: '其他' }
        ]
      }]
    })

    pieChart2.setOption({
      title: {
        text: '饼图示例 2'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [{
        type: 'pie',
        data: [
          { value: 335, name: '苹果' },
          { value: 310, name: '香蕉' },
          { value: 234, name: '梨' },
          { value: 135, name: '葡萄' },
          { value: 1548, name: '其他' }
        ]
      }]
    })
  }
}
</script>