echarts高逼格3D饼图

2023-10-22 15:02:30

前言

echarts作为一款优秀的前端图表库，其强大功能毋庸置疑。今天我们就来聊聊如何使用echarts实现逼格满满的3D饼图。

搭建3D饼图舞台

首先，引入echarts库和echarts-gl插件：

<script src="echarts.min.js"></script>
<script src="echarts-gl.min.js"></script>

然后，创建饼图容器：

<div id="pie-chart"></div>

最后，初始化echarts实例并设置3D效果：

var myChart = echarts.init(document.getElementById('pie-chart'));
myChart.setOption({
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直达'},
      {value: 310, name: '营销广告'},
      {value: 274, name: '搜索引擎'},
      {value: 235, name: '邮件营销'},
      {value: 1548, name: '联盟广告'}
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    label: {
      formatter: '{b}: {@value} ({d}%)'
    },
    labelLine: {
      length: 10,
      length2: 15
    },
    itemStyle: {
      borderWidth: 3,
      borderColor: '#fff'
    }
  }],
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0.5, 0.8]
    }
  },
  xAxis3D: {
    type: 'category',
    data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告']
  },
  yAxis3D: {
    type: 'value'
  },
  zAxis3D: {
    type: 'value'
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      autoRotate: true
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true
      },
      ambient: {
        intensity: 0.3
      }
    }
  }
});