| 本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码，供大家参考，具体内容如下 预览： 
代码： 页面部分: <template> <div class="roadnum-all" ref="roadnumall"> <div id="roadnum" ref="dom"></div> </div></template> CSS部分: .roadnum-all { width: 100%; height: 100%; /*填满父级容器*/}JS部分: import echarts from 'echarts' // 引入Echartsexport 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 = []; this.data.forEach(item => { xAxisText.push(item.name); dataList.push(item.value) }) // 从这里开始 创建自定义图形
vue.js实现日历插件使用方法详解
vue基于echarts实现立体柱形图 |
