//1、安装脚手架 npm install echarts --save //2、Vue组件代码 <template> <div class="chart-container"> <div ref="chart" class="chart"></div> </div> </template> <script> import echarts from 'echarts'; export default { mounted() { this.initChart(); }, methods: { initChart() { const chartDom = this.$refs.chart; const myChart = echarts.init(chartDom, null, { renderer: 'svg', }); const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, grid3D: { boxWidth: 150, boxDepth: 80, viewControl: { // 3D旋转 orbitRotation: 45, }, }, xAxis3D: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine: { show: true, }, }, yAxis3D: { type: 'value', axisLine: { show: true, }, }, zAxis3D: { type: 'value', axisLine: { show: true, }, }, series: [ { type: 'bar3D', data: [ ['Mon', 0, 120], ['Tue', 1, 200], ['Wed', 2, 150], ['Thu', 3, 80], ['Fri', 4, 70], ['Sat', 5, 110], ['Sun', 6, 130], ], shading: 'color', label: { show: true, textStyle: { color: '#000', fontSize: 12, }, }, emphasis: {}, }, ], }; myChart.setOption(option); this.chart = myChart; } }, }; </script> <style scoped> .chart-container { width: 100%; height: 400px; } .chart { width: 100%; height: 100%; } </style>