先看下效果
实现思路
- 描绘一个普通的柱状图
- 通过象形柱图(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%',},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>
补充说明
- 以上内容是vite构建的vue3项目
- echarts版本5.5.1