3D echarts饼图

最新推荐文章于 2024-04-22 10:38:57 发布

ghx123456ghx

最新推荐文章于 2024-04-22 10:38:57 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

文章标签： echarts vue.js 3D

本文链接：https://blog.youkuaiyun.com/ghx123456ghx/article/details/123471296

本文介绍如何在Vue项目中整合ECharts库，特别是如何创建引人注目的3D饼图效果。首先在项目的dependencies中添加ECharts依赖，然后在前端代码部分编写实现3D饼图的Vue组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中引入依赖

dependencies中引入

"echarts-gl": "^1.1.2",

在这里插入图片描述

前端代码部分

    drawLine3(id) {
   
   
      this.charts3 = this.$echarts.init(document.getElementById(id))
      // eslint-disable-next-line no-unused-vars
      this.personChartListData =
    [{
   
   
      name: 'itema项目A',
      value: 666
    }, {
   
   
      name: 'itemb项目B',
      value: 1570
    }]

      const colorList = ['#00d8ff', '#018ef1', '#f8bc87', '#ffa130', '#c23531']
      const pieData = []
      for (let i = 0; i < this.personChartListData.length; i++) {
   
   
        const item = {
   
   
          name: this.personChartListData[i].name,
          value: this.personChartListData[i].value,
          itemStyle: {
   
   
            color: colorList[i]
          }
        }
        pieData.push(item)
      }
      var option = this.getPie3D(pieData, 0.59)
      this.charts3.setOption(option)
    },
    getPie3D(pieData, internalDiameterRatio) {
   
   
      debugger
      const series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      const legendData = []
      const k =
        typeof internalDiameterRatio !== 'undefined'
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3

      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
   
   
        sumValue += pieData[i].value

        const seriesItem = {
   
   
          name: typeof pieData[i].name === 'undefined'
            ? `series${
   
   i