在vue项目中使用echarts制作3D效果柱状图

在vue项目中使用echarts制作3D效果柱状图

1、第一步安装echarts组件。
npm install echarts
2、第二步安装好echarts后，安装echarts3d图形组件echarts-gl
npm install echarts-gl

如果package.json文件里面也可以找到这个配置，则安装成功

3.第三步在需要使用Echarts页面的script中附上以下代码

import * as echarts from 'echarts';
import 'echarts-gl';
require('echarts/lib/chart/bar.js');
require('echarts/lib/component/title.js');
require('echarts/lib/component/tooltip.js');

实例上代码！

<template>
  <div class="ChartAnalysis">
    <!-- 内容 -->
    <div id="main"></div>
  </div>
</template>

<script>

import * as echarts from 'echarts';
import 'echarts-gl';
require('echarts/lib/chart/bar.js');
require('echarts/lib/component/tooltip.js');
require('echarts/lib/component/title.js');

export default {
  name: "WaterMeter",
  mounted() {
    this.chartthreenD();
  },
  methods: {
    chartthreenD(){
     var myChart = echarts.init(document.getElementById('main'));
      var option = {
          title: {
                  text: '3D堆叠柱状图',
                  x: 'center'
              },
            color: ['#5470c6','#7ed3f4','#ffdc60','#9fe080','#0fa4ff','#1e1e1e','#25a0da','#4575b4','#313695','#4575b4','#313695'],
            tooltip: {},
            xAxis3D: {
                type: 'category',
                data: ['1111', '2222','3333', '4444','5555', '6666'],
                axisLine:{
                    lineStyle:{
                        color:'black',
                        width:2
                    }
                },
            },
            yAxis3D: {
                type: 'category',
                data: [''],
                axisLine:{
                    lineStyle:{
                      width:1,
                      color:'black',
                    }
                },
            },
            zAxis3D: {
                type: 'value',
                axisLine:{
                    lineStyle:{
                        color:'black',
                        width:1
                    }
                },
            },
            grid3D: {
                boxWidth: 200,
                boxDepth: 20,
                // splitLine:{//是否显示坐标轴轴线
                //   show:false
                // },
                axisPointer: {
                    show: false
                },
                light: {
                    main: {
                        intensity: 1
                    },
                    ambient: {
                        intensity: 0.4
                    }
                },
                viewControl: {//可以控制整个柱状图场景旋转平移等，自行代数数据试试
                    alpha: 0, 
                    beta: 0,
                    minAlpha: 0,//x轴旋转
                    maxAlpha: 0,
                    minBeta: 0,//y轴旋转
                    maxBeta: 0
                }
            },
            series: [{
                type: 'bar3D',
                
                name:'数据',
                barSize: 10,//柱子大小
                data: [
                    [0, 0, 5],
                    [2, 0, 4],
                    [4, 0, 6],
                ],
                stack: 'stack',
                shading: 'lambert',
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }, {
                type: 'bar3D',
                name:'数据',
                barSize: 10,
                data: [
                    [1, 0, 10],
                    [3, 0, 6],
                    [5, 0, 12],
                ],
                // stack: 'stack',
                shading: 'lambert',
                emphasis: {
                    label: {
                        show: true
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
  },
};
</script>

<style scoped>
#main{
  width: 100%;
  height: 100%;
}
</style>