前置条件
使用echarts-gl3D插件需要先安装 Echarts插件
npm install echarts --save
或
yarn add echarts --save
安装 echarts-gl echart3D插件
npm install echarts-gl
或
yarn add echarts-gl
使用
- 在需要使用的组件里引入echarts-gl
// 导入Echarts插件
import echarts from "echarts";
import "echarts-gl"; //echarts 3D插件
Vue.prototype.$echarts = echarts;
- 在模板中加入 DOM节点
<template>
<div id="app" class="app">
<div ref="echarts" id="echarts"></div>
</div>
</template>
<style lang="less">
#echarts {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
- 在 methods 中添加 bar3D调用方法
methods: {
bar3D() {
let dom = this.$refs.echarts;
let option = {
xAxis3D: {
type: "category",
name: "X:中心名称",
// nameGap: 45,
nameTextStyle: {
color: "#ffffff",
},
axisLine: {
lineStyle: {
color: "#FFFFFF",
},
},
axisLabel: {
show: false,
},
},
yAxis3D: {
type: "value",
name: "Y:调用数量",
nameTextStyle: {
color: "#ffffff",
},
axisLine: {
lineStyle: {
color: "#FFFFFF",
},
},
},
zAxis3D: {
type: "value",
name: "Z:服务数量",
nameTextStyle: {
color: "#ffffff",
},
axisLine: {
lineStyle: {
color: "#FFFFFF",
},
},
},
grid3D: {
viewControl: {
// autoRotate: true
},
light: {
main: {
shadow: true,
quality: "ultra",
intensity: 1.5,
},
},
top: "6%",
width: "90%",
height: "80%",
},
series: [
{
name: "静态服务数量",
type: "bar3D",
data: [
["资源中心", 2, 1],
["资产中心", 8, 6],
["图形中心", 11, 10],
["拓扑中心", 2, 1],
["管理中心", 11, 8],
["计量中心", 4, 3],
],
stack: "stack",
shading: "lambert",
emphasis: {
label: {
show: false,
},
},
itemStyle: {
color: "#0BB33E",
},
},
{
name: "动态服务数量",
type: "bar3D",
data: [
["资源中心", 2, 1],
["资产中心", 8, 3],
[" 图形中心", 11, 4],
["拓扑中心", 2, 1],
["测点管理中心", 11, 3],
["计量中心", 4, 1],
],
stack: "stack",
shading: "lambert",
emphasis: {
label: {
show: false,
},
},
itemStyle: {
color: "#0AC1C1",
},
},
{
name: "异常服务数量",
type: "bar3D",
data: [
["资源中心", 2, 1],
["资产中心", 8, 2],
[" 图形中心", 11, 3],
["拓扑中心", 2, 1],
["测点管理中心", 11, 6],
["计量中心", 4, 2],
],
stack: "stack",
shading: "lambert",
emphasis: {
label: {
show: false,
},
},
itemStyle: {
color: "#DF0024",
},
},
],
};
this.echartsMit(dom, option);
},
echartsMit(dom, option) {
let myChart = this.$echarts.init(dom);
myChart.setOption(option);
},
}
- 在项目页面挂载的时候，调用方法
mounted() {
this.bar3D();
},
生成效果图如下
ECharts GL bar3D 柱状图
