简单的vue三维饼状图，echacts

简单的vue三维饼状图，echacts

首先，需要在Vue项目中安装Echarts库：

npm install echarts --save复制

创建一个Vue组件，导入Echarts库和样式文件：

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>复制

<script>
import echarts from 'echarts'
import 'echarts-gl'
 
export default {
  name: 'Pie3DChart',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const chart = echarts.init(this.$refs.chart)
 
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      }
 
      chart.setOption(option)
    }
  }
}
</script>
 
<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.chart {
  width: 80%;
  height: 80%;
}
</style>复制

在上面的代码中，我们定义了一个名为Pie3DChart的Vue组件。我们导入了Echarts库和样式文件，并在mounted钩子中调用drawChart方法来绘制图表。

我们向组件传递一个名为data的属性，它是一个数组，包含图表的数据。我们使用Echarts的配置选项来设置图表的样式和数据。

最后，我们将Echarts图表渲染到组件的DOM元素中。

使用Pie3DChart组件时，您需要像这样向其传递数据：

<Pie3DChart :data="[
  {value: 335, name: '直接访问'},
  {value: 310, name: '邮件营销'},
  {value: 234, name: '联盟广告'},
  {value: 135, name: '视频广告'},
  {value: 1548, name: '搜索引擎'}
]"/>复制

这将在页面上呈现一个三维饼状图。