1.引入echarts
2.main.js引入
import * as echarts from 'echarts' import 'echarts-gl'; Vue.prototype.$echarts = echarts
3.页面制作
<template>
<div id="output_3DBarCharts"></div>
</template>
<script>
import { get3DOptions } from "./options.js";
export default {
name: "outputMea",
data(){
return {
options:{
xData:['青磁窑矿', '蒋家湾', '兴旺煤矿', '焦煤矿业', '安平煤矿', '树儿里村'],
data:[2528,3018,4928,1858,3002,3695],
},
}
},
mounted() {
this.init();
},
methods:{
init() {
//日总产量
let output_3DBarCharts = this.$echarts.init(document.getElementById("output_3DBarCharts"));
let options = get3DOptions(this.options);
output_3DBarCharts.setOption(options);
window.addEventListener("resize", function () {
output_3DBarCharts.resize();
});
},
}
}
</script>
<style scoped lang="scss">
#output_3DBarCharts{
width: calc(100% - 40px);
height: calc(100% - 98px);
margin: 0 20px;
background: url("../../assets/bigData/3dBarBg.png") no-repeat 46px 93.5%;
background-size: calc(100% - 60px) auto;
}
</style>
options.js
import * as echarts from 'echarts'
/*3D柱形图*/
const get3DOptions = (op = {}) => {
var options = {
grid: {
left: 60,
right: 20,
top: 50,
bottom: 40
},
legend: {
show: true,
icon: 'circle',
orient: 'horizontal',
top: '90.5%',
right: 'center',
itemWidth: 16.5,
itemHeight: 6,
textStyle: {
color: '#C9C8CD',
fontSize: 14
}
},
xAxis: [{
data: op.xData || [],
axisLabel: {
show: true,
textStyle: {
color: '#aaaaaa',
fontSize: 12
},
margin: 30, //刻度标签与轴线之间的距离。
},
axisLine: {
show: false //不显示x轴
},
axisTick: {
show: false //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 1,
lineStyle: {
type: "solid",
color: "#03202E"
}
}
}],
yAxis: [{
show: true,
axisLabel: {
interval: 'auto',
show: true,
textStyle: {
fontSize: 14,
color: '#fff',
},
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(49,176,255,0.05)',
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(49,176,255,0.5)',
},
},
}],
series: [
{//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [20, 8],//调整截面形状
symbolOffset: [0, 4],
z: 12,
itemStyle: {
normal: {
color: '#183E96',
}
},
data: op.data || []
},
//柱体
{
name: '',
type: 'bar',
barWidth: 20,
barGap: '0%',
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#01AEF6'},
{ offset: 1, color: 'rgba(16,36,95,0.6)' },
])
},
opacity:1
},
data: op.data || []
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [20, 8],//调整截面形状
symbolOffset: [0, -5],
z: 12,
symbolPosition: "end",
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#17E1FF',
}
},
data: op.data || []
}
]
}
return options;
};
export { get3DOptions }
4.最终实现效果