vue2项目echarts3d圆柱图示例

以下是一个基于 Vue2 和 echarts3d 的圆柱图示例：

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

<script>
import * as echarts from 'echarts'
import 'echarts-gl'

export default {
  mounted() {
    // 初始化 echarts 实例
    const chart = echarts.init(this.$refs.chart)

    // 定义数据
    const data = [
      [0, 0, 1],
      [0, 1, 2],
      [0, 2, 3],
      [0, 3, 4],
      [1, 0, 2],
      [1, 1, 4],
      [1, 2, 5],
      [1, 3, 6],
      [2, 0, 3],
      [2, 1, 5],
      [2, 2, 6],
      [2, 3, 7],
      [3, 0, 4],
      [3, 1, 6],
      [3, 2, 7],
      [3, 3, 8]
    ]

    // 配置选项
    const option = {
      tooltip: {},
      visualMap: {
        max: 10,
        inRange: {
          color: ['#006edd', '#e0ffff']
        }
      },
      xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
      },
      yAxis3D: {
        type: 'category',
        data: ['I', 'II', 'III', 'IV']
      },
      zAxis3D: {
        type: 'value'
      },
      grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        viewControl: {
          // 设置视角
          beta: 10,
          alpha: 25
        }
      },
      series: [{
        type: 'bar3D',
        data: data.map(item => ({
          value: [item[1], item[0], item[2]]
        })),
        shading: 'lambert',
        label: {
          textStyle: {
            fontSize: 16,
            borderWidth: 1
          }
        },
        emphasis: {
          label: {
            textStyle: {
              fontSize: 20,
              color: '#900'
            }
          },
          itemStyle: {
            color: '#900'
          }
        }
      }]
    }

    // 渲染图表
    chart.setOption(option)
  }
}
</script>

<style>
.chart-container {
  height: 500px;
  width: 100%;
}

.chart {
  height: 100%;
}
</style>

这个示例中，我们使用了 echarts-gl 来绘制 3D 图表，并使用了 bar3D 类型的系列来绘制圆柱图。具体实现可参考代码注释。