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>