柱状图多维条形图vue_Vue中使用Echarts实现立体柱状图（长方体）

预览：

代码：

页面部分:

CSS部分:

.roadnum-all {

width: 100%;

height: 100%; /*填满父级容器*/

}

JS部分:

import echarts from 'echarts' // 引入Echarts

export default {

name: "ltzzt",

data() {

return {

data: [],

dom: null

}

},

mounted() {

this.$nextTick(() => { // 给图标宽高 使图标填满容器

document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';

document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';

this.draw();

})

},

methods: {

// 画图

draw() {

// 网络请求 假装从后端拿回来的数据

this.data = [

{ name: '京哈高速', value: 10 },

{ name: '京哈高速1', value: 20 },

{ name: '京哈高速2', value: 30 },

{ name: '京哈高速3', value: 40 },

{ name: '京哈高速4', value: 50 },

{ name: '京哈高速5', value: 60 },

{ name: '京哈高速6', value: 70 },

{ name: '京哈高速7', value: 80 },

{ name: '京哈高速8', value: 90 },

{ name: '京哈高速9', value: 100 },

{ name: '京哈高速10', value: 110 },

{ name: '京哈高速11', value: 120 }

];

// 拼轴显示和数据的数组

let xAxisText = [];

let dataList = [];<