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.最終實現效果

總結

以上是生活随笔為你收集整理的echarts制作3d柱形图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。