echarts制作3d柱形图

1.引入echarts

2.main.js引入

import * as echarts from 'echarts'
import 'echarts-gl';
Vue.prototype.$echarts = echarts

3.页面制作

<template>
  <div id="output_3DBarCharts"></div>
</template>

<script>
  import { get3DOptions } from "./options.js";
  export default {
    name: "outputMea",
    data(){
      return {  
        options:{
          xData:['青磁窑矿', '蒋家湾', '兴旺煤矿', '焦煤矿业', '安平煤矿', '树儿里村'],
          data:[2528,3018,4928,1858,3002,3695],
        },
      }
    },
    mounted() {
      this.init();
    },
    methods:{
      init() {
        //日总产量
        let output_3DBarCharts = this.$echarts.init(document.getElementById("output_3DBarCharts"));
        let options = get3DOptions(this.options);
        output_3DBarCharts.setOption(options);
        window.addEventListener("resize", function () {
          output_3DBarCharts.resize();
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  #output_3DBarCharts{
    width: calc(100% - 40px);
    height: calc(100% - 98px);
    margin: 0 20px;
    background: url("../../assets/bigData/3dBarBg.png") no-repeat 46px 93.5%;
    background-size: calc(100% - 60px) auto;
  }
</style>

options.js

import * as echarts from 'echarts'

/*3D柱形图*/
const get3DOptions = (op = {}) => {
  var options = {
    grid: {
      left: 60,
      right: 20,
      top: 50,
      bottom: 40
    },
    legend: {
      show: true,
      icon: 'circle',
      orient: 'horizontal',
      top: '90.5%',
      right: 'center',
      itemWidth: 16.5,
      itemHeight: 6,
      textStyle: {
        color: '#C9C8CD',
        fontSize: 14
      }
    },
    xAxis: [{
      data: op.xData || [],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#aaaaaa',
          fontSize: 12
        },
        margin: 30, //刻度标签与轴线之间的距离。
      },
      axisLine: {
        show: false //不显示x轴
      },
      axisTick: {
        show: false //不显示刻度
      },
      boundaryGap: true,
      splitLine: {
        show: false,
        width: 1,
        lineStyle: {
          type: "solid",
          color: "#03202E"
        }
      }
    }],
    yAxis: [{
      show: true,
      axisLabel: {
        interval: 'auto',
        show: true,
        textStyle: {
          fontSize: 14,
          color: '#fff',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'rgba(49,176,255,0.05)',
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(49,176,255,0.5)',
        },
      },
    }],
    series: [
      {//柱底圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 8],//调整截面形状
        symbolOffset: [0, 4],
        z: 12,
        itemStyle: {
          normal: {
            color: '#183E96',
          }
        },
        data: op.data || []
      },
      //柱体
      {
        name: '',
        type: 'bar',
        barWidth: 20,
        barGap: '0%',
        itemStyle: {
          color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#01AEF6'},
              { offset: 1, color: 'rgba(16,36,95,0.6)' },
            ])
          },
          opacity:1
        },
        data: op.data || []
      },
      //柱顶圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 8],//调整截面形状
        symbolOffset: [0, -5],
        z: 12,
        symbolPosition: "end",
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: '#fff'
          }
        },
        itemStyle: {
          normal: {
            color: '#17E1FF',
          }
        },
        data: op.data || []
      }
    ]
  }
  return options;
};

export { get3DOptions }

4.最终实现效果