ECharts实现多簇伪3D/2.5D柱状图_echarts 伪3d 柱状图
import * as echarts from \'echarts\'
import { use, graphic } from \'echarts/core\'
import { fitChartSize } from \'@/utils/utils\'
import triangleTopImg from \'@/assets/v2img/triangle_top.png\'
import triangleBottomImg from \'@/assets/v2img/triangle_bottom.png\'
const data = [
{ name: \'中国铁物\', value: \'2010.58\', value2: \'800\' },
{ name: \'中国储运\', value: \'4458.76\', value2: \'2000\' },
{ name: \'物流股份\', value: \'2088.58\', value2: \'5088.58\' },
{ name: \'资产公司\', value: \'235.90\', value2: \'935.90\' }
]
const category = data.map(item => item.name)
const value2024 = data.map(item => item.value)
const value2025 = data.map(item => item.value2)
const color = [
[\'#FFD700\', \'#FF8C00\'],
[\'#48D5E5\', \'#422BF3\']
]
// 各公司年累计吞吐量-相关配置
const BAR_OPTION_TUNTU = {
color: [\'#00B09C\', \'#93cc79\', \'#f9c761\', \'#ec6468\', \'#18a3a0\'],
tooltip: {
trigger: \'axis\',
borderWidth: 0,
axisPointer: {
type: \'shadow\',
},
backgroundColor: \'rgba(0,53,89,0.5)\',
position: function (point, params, dom, rect, size) {
// 固定在顶部
return [point[0] - size.contentSize[0] / 2, \'9%\'];
},
className: \'tooltip-box\',
formatter: function (params) {
const htmlText = `
同比:
7.5%
`
return htmlText
},
},
grid: {
// left: \'2%\',
// right: \'2%\',
// bottom: 10,
// containLabel: true
top: fitChartSize(50),
left: fitChartSize(10),
right: fitChartSize(18),
bottom: fitChartSize(10),
containLabel: true,
},
legend: {
textStyle: {
color: \'#ffffff\'
},
icon: \'rect\',
itemWidth: 14,
itemHeight: 3
},
xAxis: {
data: category,
type: \'category\',
nameLocation: \'middle\',
//刻度线
axisLine: {
lineStyle: {
color: \'#cbcbcb\'
}
},
axisTick: {
lineStyle: {
color: \'#cbcbcb\'
},
alignWithLabel: true
},
axisLabel: {
color: \'#999999\'
},
// 鼠标悬浮阴影
axisPointer: {
type: \'shadow\'
}
},
yAxis: {
scale: true,
splitLine: {
lineStyle: {
// color: \"rgba(30,163,255,0.3)\",
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: \'#cbcbcb\'
}
},
axisLabel: {
color: \'#999999\'
}
},
series: [
// 第一个圆柱顶部的椭圆形
{
type: \'pictorialBar\', //pictorialBar(象形柱图)
symbolSize: [14, 8], //椭圆的大小[宽，高]
symbolOffset: [-10.5, -4], //图形偏移[x轴，y轴]，不确定的话，可以微调，本实例x轴叠加了柱状之间的间距[-7+(间距7/2),y轴]
z: 12, //图形的层级，控制图形的前后顺序，z值小的图形会被z值大的图形覆盖
symbolPosition: \'end\', //椭圆位置，默认\'start\'，在最底下，end是最上面
itemStyle: {
color: \'rgba(255, 223, 165, 0.9)\'
},
data: value2024
},
{
name: \'2024年\',
data: value2024,
type: \'bar\',
barWidth: 14,
barGap: \'50%\', //柱状图间距，此处为14*50%=7
itemStyle: {
// 图形样式
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, // 0%处的颜色
color: \'rgba(255, 180, 41, 1) \'
},
{
offset: 0.5, // 50%处的颜色
color: \'rgba(255, 180, 41, 0.7) \'
},
{
offset: 1, // 100%处的颜色
color: \'rgba(255, 223, 165, 0.7)\'
}
])
},
label: {
show: true,
position: \'top\',
distance: 3,
fontSize: fitChartSize(20),
fontFamily: \'dinboldFont\',
color: \'#fff\',
formatter: function (params) {
return params.value
}
}
},
// 第一个圆柱底部的椭圆形
{
type: \'pictorialBar\',
symbolSize: [14, 8],
symbolOffset: [-10.5, 4],
z: 12,
itemStyle: {
color: \'rgba(255, 180, 41, 0.6)\'
},
data: value2024
},
// 第二个圆柱顶部的椭圆形
{
type: \'pictorialBar\',
symbolSize: [14, 8],
symbolOffset: [10.5, -4],
z: 12,
symbolPosition: \'end\',
itemStyle: {
color: \'rgba(165, 195, 255, 0.7)\'
},
data: value2025
},
{
name: \'2025年\',
data: value2025,
type: \'bar\',
barWidth: 14,
itemStyle: {
// 图形样式
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, // 0%处的颜色
color: \'rgba(41, 112, 255, 1) \'
},
{
offset: 0.5, // 50%处的颜色
color: \'rgba(41, 112, 255, 0.7) \'
},
{
offset: 1, // 100%处的颜色
color: \'rgba(165, 195, 255, 0.7) \'
}
])
},
label: {
show: true,
position: \'top\',
distance: 3,
fontSize: fitChartSize(20),
fontFamily: \'dinboldFont\',
color: \'#fff\',
formatter: function (params) {
return params.value
}
}
},
// 第二个圆柱底部的椭圆形
{
type: \'pictorialBar\',
symbolSize: [14, 8],
symbolOffset: [10.5, 4],
z: 12,
itemStyle: {
color: \'rgba(41, 112, 255, 0.6)\'
},
data: value2025
}
]
}
export { BAR_OPTION_TUNTU }
