最近学习大数据，需要数据可视化，所以特地去学习了一下echarts，通过springboot+vue 整合了echarts 三维柱状图。先看效果。
因为我是初学vue脚手架，对一些vue内置方法不是很熟悉，所以踩了很多坑，建议新手小白可以直接按我的结构来写。
我这里的代码只展示第一个三维柱状图。
官网代码实例
// prettier-ignore
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a', '10a', '11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
// prettier-ignore
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
// prettier-ignore
var 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]];
option = {
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
}
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
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'
}
}
}
]
};
分析一下代码结构以及他是怎么传值的。
首先他准备了三个数组，这个可以想到，三个数组分别用于xyz三个轴的数据。这里我们重点看一下data这个二维数组，这个数组每一项中都封装了一个小数组，有三个数据，那肯定就分别是xyz周的数据了，儿前边显示的那两个只是显示的数据。所以我们从后端传来的数据也需要是这种形式的或者我们在前台给他处理成这种形式。
代码部分
①template
<template>
<div style="display: flex">
<div ref="main" style="height: 600px; width: 800px"></div>
<div ref="chart3" style="height: 600px; width: 800px"></div>
<div ref="chart4" style="height: 600px; width: 800px"></div>
</div>
</template>
②script
import 'echarts/lib/component/visualMap'
import * as echarts from 'echarts';
import 'echarts-gl';
import request from "@/utils/request";//本地封装的axios请求
export default {
name: "hometest",
data (){
return {
xdata : [],
ydata : [],
zdata : [], //这里最后我只用到了zdata
}
},
created() {
this.load1() //调用请求数据方法
},
methods :{
load1(){ //请求数据 request是我自己封装的axios请求
request.get("/user/hangkong").then(res =>{
//console.log(res)
for (var i =0 ; i<600 ;i++){
var data1 = []
this.xdata.push(res.data[i].dayId)
this.ydata.push(res.data[i].saleNbr)
data1.push(res.data[i].dayId)
data1.push(res.data[i].saleNbr)
data1.push(res.data[i].cnt)
this.zdata.push(data1) //这里把zdata处理成了二维数组，和官方实例一样
}
if(this.zdata){
this.drawLine1() //调用划线函数
}
// console.log(this.xdata)
// console.log(this.ydata)
// console.log(this.zdata)
})
},
drawLine1() { //划线方法
// 基于准备好的dom，初始化echarts实例
const myCharts = echarts.init(this.$refs.main);
const option = {
title :{
text : '航空公司销售数量'
},
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
}
},
xAxis3D: {
type: 'category',
name: '时间/日'
},
yAxis3D: {
type: 'category',
name: '公司代号'
},
zAxis3D: {
type: 'value',
name: '数量'
},
grid3D: {
boxWidth: 180,
boxDepth: 130,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [
{
type: 'bar3D',
data: this.zdata, //通过这里传值
shading: 'lambert',
label: {
fontSize: 16,
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20,
color: '#1f1e1e'
},
itemStyle: {
color: '#efcaca'
}
}
}
]
};
//console.log(this.zdata)
myCharts.hideLoading();
myCharts.setOption(option)
}
}
}
③后端接口
后端我采用的springboot+mybatis-plus 没有写sql
@GetMapping("/hangkong")
public Result<?> findPage(){
LambdaQueryWrapper<Hangkong> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.orderByAsc(Hangkong::getDayId,Hangkong::getSaleNbr);
List<Hangkong> list = hangkongMapper.selectList(queryWrapper);
return Result.success(list);
}
如果需要完整项目代码可以在wjbhyn/springboot-echarts: 石铁大软工hive测试 (github.com)拉取，记得点颗⭐哦！
标签：11,10,13,12,20,14,柱状图,Echarts,3D From： https://www.cnblogs.com/wjingbo/p/16774976.html