当前位置：首页 > news >正文

vue3之echarts3D圆柱

news 2025/8/15 12:02:30

vue3之echarts3D圆柱

效果：
在这里插入图片描述
版本
"echarts": "^5.1.2"

核心代码：

<template><div ref="charts" class="charts"></div><svg><linearGradient id="labColor" x1="0" y1="0" x2="0" y2="1"><stop offset="21%" stop-color="#ffffff"></stop><stop offset="100%" stop-color="#7FFFFF"></stop></linearGradient></svg>
</template><script lang="ts" setup>
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
import * as echarts from "echarts";const data: any = reactive({"list": [104,86,210,135,72,180,180],"xAxis": ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
});
const charts = ref(null);
let myechart: any = null;
let timer: any = null;// 圆柱宽度
const barWidth = 40;const initChart = () => {if (charts.value && !myechart) {myechart = echarts.init(charts.value, '', { renderer: 'svg' });}const option = {tooltip: {show: false},xAxis: [{data: data.xAxis,axisTick: {show: false,},axisLine: {show: false,},axisLabel: {interval: 0,textStyle: {fontSize: 20,color: "#ffffff",fontFamily: "OPPOSans-R",},margin: 38, //刻度标签与轴线之间的距离。},}, {type: "category",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},splitArea: {show: false,},splitLine: {show: false,},data: data.xAxis,}],yAxis: {splitLine: {show: false,},axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},grid: {left: "5%",right: "5%",bottom: "0%",top: '10%',containLabel: true,},series: [{name: '顶部渐变文字',type: 'pictorialBar',symbol: 'rect',symbolRepeat: false,symbolSize: [0, 0],symbolOffset: [0, -10],z: 200,symbolPosition: 'end',data: data.list.map((item: any) => {return {value: item,label: {show: true,position: 'top',formatter: (item: any) => {return `${item.value}次`;},fontSize: 24,fontFamily: 'OPPOSans',// 使用svg渐变颜色color: 'url(#labColor)',},};}),},{name: "顶部圆形",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, -5],symbolPosition: 'end',z: 12,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(28, 135, 175, 0)",},{offset: 1,color: "rgba(28, 135, 175, 1)",},])}},data: data.list,},{name: "顶部圆环",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, -5],symbolPosition: 'end',z: 100,itemStyle: {normal: {color: "transparent",borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(100, 207, 246, 0)",},{offset: 1,color: "rgba(100, 207, 246, 1)",},]),borderWidth: 1,},},data: data.list,},{name: "底部最小圆形",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, 5],z: 12,itemStyle: {normal: {color: 'rgba(56, 132, 160, 1)',},},data: data.list,},{name: "底部最小圆环",type: "pictorialBar",symbolSize: [barWidth, 15],symbolOffset: [0, 5],z: 13,itemStyle: {normal: {color: "transparent",borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(15, 97, 127, 0)",},{offset: 1,color: "rgba(56, 132, 160, 1)",},]),borderWidth: 1,},},data: data.list,},{name: "底部第二层圆形",type: "pictorialBar",symbolSize: [barWidth + (barWidth / 2), 20],symbolOffset: [0, 12],z: 1,itemStyle: {normal: {color: "#3884A0",opacity: 0.45},},data: data.list,},{name: "底部最外层圆形",type: "pictorialBar",symbolSize: [barWidth * 2, 30],symbolOffset: [0, 20],z: 0,itemStyle: {normal: {color: "#3884A0",opacity: 0.2},},data: data.list,},{type: "bar",name: "最外层柱状渐变",itemStyle: {color: "transparent",borderWidth: 1,borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(96, 199, 237, 0)",},{offset: 1,color: "#3884A0",},]),},silent: true,barWidth,barGap: "-100%",data: data.list,},{type: "bar",name: "大的柱状图",z: 0,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(15, 97, 127, 0)",},{offset: 1,color: "rgba(15, 97, 127, 1)",},]),},},silent: true,barWidth,barGap: "-100%",data: data.list,},{type: "bar",z: 100,name: "小的柱状图",xAxisIndex: 1,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(15, 97, 127, 0)",},{offset: 0.85,color: "rgba(15, 97, 127, 1)",},{offset: 1,color: 'rgba(56, 132, 160, 1)'}]),opacity: 0.5,},},silent: true,barWidth: 10,barGap: "-100%",data: data.list.map((item: any) => item - item * 0.1),},],};myechart.setOption(option);
};onMounted(() => {initChart();
});onBeforeUnmount(() => {if (timer) {clearInterval(timer);timer = null;}if (myechart) {myechart.clear();myechart.dispose();myechart = null;}
});
</script>
<style scoped lang="scss">
.charts {width: 777px;height: 478px;background: url(@/assets/img/overview/coal-bg.png) no-repeat center bottom;
}
</style>