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 }
