echarts制作3d柱形图

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柱形图的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。