在package.json文件中添加

 "dependencies": {"echarts": "^5.1.2""echarts-gl": "^1.1.1",//  "echarts-gl": "^2.0.8"},

npm install echarts-gl@1.1.1 --save

2.使用

完整代码如下（示例）：

HTML代码

<template><div :class="className" :style="{height:height,width:width}" />
</template>

js脚本代码

<script>import echarts from 'echarts'import "echarts-gl";require('echarts/theme/macarons') // echarts themeimport resize from '@/views/dashboard/mixins/resize'export default {mixins: [resize],props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '400px'},dataList: {type: Array,default: []}},data() {return {chart: null,}},mounted() {this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},watch: {dataList(val, oldVal) {//普通的watch监听this.initChart()}},methods: {initChart() {let data = [[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],[0, 0, 1, 1, 5, 7, 9, 11, 12, 13, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17],[5, 6, 9, 9, 9, 11, 11, 11, 13, 13, 14, 14, 14, 16, 16, 16, 16, 16, 18, 18, 18, 18],[13, 17, 22, 22, 26, 33, 34, 36, 36, 37, 39, 40, 40, 42, 42, 42, 43, 43, 44, 44, 44, 44],[13, 16, 17, 27, 35, 45, 49, 53, 58, 61, 65, 66, 68, 69, 71, 73, 73, 73, 74, 74, 74, 74]]let dataX = ['1/27', '1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10', '2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']let dataY = ['生产', '收购', '运输', '销售', '消费']var vdata = []for (var i = 0; i < dataY.length; i++) {vdata[i] = []}for (var t = 0; t < dataY.length; t++) {var y = dataY[t];for (var k = 0; k < data[0].length; k++) {for (var p = 0; p < dataX.length; p++) {var x = dataX[p];var z = data[t][p];vdata[t].push([x, y, z]);}break;}}this.chart = echarts.init(this.$el, 'macarons')this.chart.setOption({xAxis3D: {type: 'category',name: '',data: dataX,axisLabel: {show: true,interval: 0  //使x轴都显示}},yAxis3D: {type: 'category',name: '',data: dataY,axisLabel: {show: true,interval: 0   //使y轴都显示}},zAxis3D: {type: 'value',name: ''},//图例legend: {orient: 'vertical',right: 50,top: 200,icon: 'roundRect',textStyle: {color: '#FFFFFF'}},tooltip: {show: true},grid3D: {boxWidth: 300,boxHeight: 120,boxDepth: 200,axisLine: {show: true,interval: 0,lineStyle: {color: '#FFFFFF'}},viewControl: {distance: 400}},series: [{type: 'scatter3D',name: '生产',itemStyle: {color: 'rgb(165,  0, 38)'},label: {  //当type为scatter3D时有label出现show: true,position: 'top',   //标签的位置，也就是data中数据相对于线在哪个位置distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[0]},{type: 'scatter3D',name: '收购',itemStyle: {color: 'rgb(215, 48, 39)'},label: {show: true,position: 'bottom',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[1]},{type: 'scatter3D',name: '运输',itemStyle: {color: 'rgb(254,224,144)'},label: {show: true,position: 'bottom',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[2]},{type: 'scatter3D',name: '销售',itemStyle: {color: 'rgb(255,255,191)'},label: {show: true,position: 'top',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[3]},{type: 'scatter3D',name: '消费',itemStyle: {color: 'rgb(224,243,248)'},label: {show: true,position: 'bottom',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[4]},{type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项name: '生产',lineStyle: {width: 8,   //线的宽度color: 'rgb(165,  0, 38)'   //线的颜色},data: vdata[0]   //线数据和点数据所需要的格式一样},{type: 'line3D',name: '收购',lineStyle: {color: 'rgb(215, 48, 39)',  //线的颜色width: 8     //线的宽度},data: vdata[1]},{type: 'line3D',name: '运输',lineStyle: {color: 'rgb(254,224,144)',width: 8},data: vdata[2]},{type: 'line3D',name: '销售',lineStyle: {color: 'rgb(255,255,191)',width: 8},data: vdata[3]},{type: 'line3D',name: '消费',lineStyle: {color: 'rgb(224,243,248)',width: 8},data: vdata[4]},]})}}}
</script>

三、vue中使用三维柱状图

效果图

完整代码

<template><div :class="className" :style="{height:height,width:width}" />
</template><script>import echarts from 'echarts'import "echarts-gl";require('echarts/theme/macarons') // echarts themeimport resize from '@/views/dashboard/mixins/resize'export default {mixins: [resize],props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '400px'},dataList: {type: Array,default: []}},data() {return {chart: null,}},mounted() {this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},watch: {dataList(val, oldVal) {//普通的watch监听this.initChart()}},methods: {initChart() {let data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];let dataX = ['12a', '1a', '2a', '3a', '4a', '5a', '6a','7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p','6p', '7p', '8p', '9p', '10p', '11p'];let dataY = ['Saturday', 'Friday', 'Thursday','Wednesday', 'Tuesday', 'Monday', 'Sunday'];this.chart = echarts.init(this.$el, 'macarons')this.chart.setOption({tooltip: {},visualMap: {max: 20,inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},xAxis3D: {type: 'category',data: dataX},yAxis3D: {type: 'category',data: dataY},zAxis3D: {type: 'value'},grid3D: {boxWidth: 200,boxDepth: 80,viewControl: {// projection: 'orthographic'},light: {main: {intensity: 1.2,shadow: true},ambient: {intensity: 0.3}}},series: [{type: 'bar3D',data: data.map(function (item) {return {value: [item[1], item[0], item[2]]};}),shading: 'lambert',label: {fontSize: 16,borderWidth: 1},emphasis: {label: {fontSize: 20,color: '#900'},itemStyle: {color: '#900'}}}]})}}}
</script>