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}
                    
                    ${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%',
            },
            
            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
                },
            },
            
            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