vue3之echarts3D圆柱

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>