echarts用pictorialBar实现3D柱状图

先看下效果

实现思路

1. 描绘一个普通的柱状图
2. 通过象形柱图（pictorialBar）在柱状图的顶部添加一个图形类型（symbol）菱形

代码实现

<template>
    <div id="symbolBar"></div>
</template>
<script setup>
    import {onMounted} from 'vue'
    import * as echarts from 'echarts';
    
	// 模拟数据
    const chartData = {
        xData: ['智慧社区','智慧园区','智慧党建'],
        data: [2000, 5000, 4000]
    }
    const drawBar = () => {
        let curChart = echarts.init(document.getElementById('symbolBar'))
        const exampleOption = {
        	// 提示框效果设置
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                formatter: (params) => {
                    const str = `项目： ${params[0].axisValue}
                    </br>
                    ${params[0].marker}访问量: ${params[0].value}`
                    return str;
                },
            },
            // 图例设置
            legend: {
                show:true,
                textStyle: { fontSize: 12, color: '#fff' },
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 15,
                top: '0%',
                right: '0%',
            },
            textStyle: {
                fontSize: 12
            },
            grid: {
                containLabel: true, // 防止标签溢出
                left: '0%',
                top: '10%',
                bottom: '0%',
                right: '0%',
            },
            // X轴设置
            xAxis: {
                type: 'category',
                data: chartData.xData,
                axisLine: {
                    lineStyle: {
                        color: '#979797',
                        opacity: 0.38
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    margin: 10,
                    fontFamily: 'Microsoft YaHei',
                    color: '#ffffff',
                    fontSize: 12
                },
            },
            // Y轴设置
            yAxis: {
                nameTextStyle: {
                    verticalAlign: 'middle',
                    align: "right"
                },
                type: 'value',
                min:0,
                boundaryGap: ['0%', '10%'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#979797',
                        opacity: 0.38
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: ['#fff'],
                        type: 'dashed',
                        opacity: 0.09,
                    },
                },
                axisLabel: {
                    fontSize: 12
                },
            },
            series: [
            	// 柱状图描绘
                {
                    name: "项目",
                    data: chartData.data,
                    type: 'bar',
                    barMaxWidth: 'auto',
                    barWidth: 22,
                    itemStyle: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#16B2FF',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(90,74,219,0.44)'
                                },
                            ],
                        },
                    },
                },
                // 菱形描绘
                {
                    data: chartData.data,
                    type: 'pictorialBar',
                    barMaxWidth: 'auto',
                    symbolPosition: 'end', // 位置在柱状图顶部
                    symbol: 'diamond', // 图形类型为菱形
                    symbolOffset: [0, '-50%'], // 下移一半，遮住柱状图顶部
                    symbolSize: [22, 10],
                    zlevel: 200, // 菱形图形显示在柱状图之上
                    itemStyle: {
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1.3,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#16B2FF',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(90,74,219,0.8)'
                                },
                            ],
                        },
                    }
                },
            ],
        };
        curChart.setOption(exampleOption)
    }
    onMounted(() => {
        drawBar()
    })
</script>
 
<style scoped>
 
#symbolBar{
    width: 360px;
    height: 300px;
}
</style>
 复制

补充说明

1. 以上内容是vite构建的vue3项目
2. echarts版本5.5.1