上一篇已经写了单柱形图，这次在给大家展示下双柱形图，顺手牵来，复制可用
const offsetX = 10
const offsetY = 5
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint
// console.log(shape);
const c0 = [shape.x, shape.y]
const c1 = [shape.x - offsetX, shape.y - offsetY]
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1])?.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
const c4 = [shape.x + offsetX, shape.y - offsetY]
ctx.moveTo(c1[0], c1[1])?.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
const c3 = [shape.x, shape.y - offsetX]
const c4 = [shape.x - offsetX, shape.y - offsetY]
ctx.moveTo(c1[0], c1[1])?.lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const VALUE = [120, 170, 180, 110, 50]
const VALUE1 = [60, 130, 80, 30, 40]
const chartOption = () => {
const option = {
legend: {
data: [
{
name: '污水处理量',
itemStyle: {
color: '#2465E3'
}
},
{
name: '污水再生利用量',
itemStyle: {
color: '#FCB072'
}
}
],
textStyle: {
fontFamily: 'MicrosoftYaHei',
fontSize: 14,
color: '#ffffff'
},
itemWidth: 10,
itemHeight: 8,
itemGap: 15,
top: '16%',
right: 'center'
},
tooltip: {
trigger: 'axis',
textStyle: { color: '#fff', fontSize: 14 },
className: 'tooltip',
order: 'seriesDesc',
renderMode: 'html',
backgroundColor: 'rgba(255,255,255,0.1)', // 设置背景颜色
borderColor: 'rgba(255,255,255,0.3)', // 边框颜色
formatter: (params: any) => {
return `<span style=\"font-size: 16px;font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;font-weight: bold;color: #FFFFFF;line-height: 19px;text-shadow: 0px 0px 13px rgba(191,221,255,0.5);
background: linear-gradient(360deg, #87CDFF 0%, #E4F7FF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\">
${params[0].name}</span><br/>
<span style=\"width:100%;display:block;margin: 10px 0;height: 1px;background: rgba(255,255,255,0.2);\"></span>
<span style=\"display:inline-block;width: 8px;height: 3px;background: #58A9FF;border-radius: 1px;margin-right:3px;margin-bottom:4px;\"></span>
${params[0].seriesName}
<span style=\"font-size: 20px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #29FBFF;line-height: 24px;
background: linear-gradient(180deg, #1EDB9C 0%, #29FBFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\">
${params[0].value === 0 ? '-' : Number(params[0].value).toLocaleString()} </span> 万吨<br/>
<span style=\"display:inline-block;width: 8px;height: 3px;background: #58A9FF;border-radius: 1px;margin-right:3px;margin-bottom:4px;\"></span>
${params[1].seriesName}
<span style=\"font-size: 20px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #29FBFF;line-height: 24px;
background: linear-gradient(180deg, #1EDB9C 0%, #29FBFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;\">
${params[1].value === 0 ? '-' : Number(params[1].value).toLocaleString()} </span> 万吨
`
}
},
grid: {
left: '0',
right: '0',
top: '30%',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'category',
data: ['六景水厂', '竹海山泉水厂', '六景水厂', '竹海山泉水厂'],
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#CEDDF2'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '单位：万吨',
axisLine: {
show: false,
lineStyle: {
width: 2,
color: '#CEDDF2'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#2A353F',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12
}
},
dataZoom: [
{
type: 'slider',
show: false,
realtime: true,
startValue: 0,
endValue: 3, // 初始显示index0-30的数据,可根据你的数据量设置
filterMode: 'none'
}
],
series: [
{
type: 'custom',
name: '污水处理量',
renderItem: (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
x: -10,
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#5D94FF'
},
{
offset: 1,
color: '#0B334A'
}
])
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2465E3'
},
{
offset: 1,
color: '#062131'
}
])
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#94B9FF'
},
{
offset: 1,
color: '#94B9FF'
}
])
}
}
]
}
},
data: VALUE
},
{
type: 'custom',
name: '污水再生利用量',
renderItem: (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
x: 15,
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1] + 5,
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FFBD88'
},
{
offset: 1,
color: '#372413'
}
])
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1] + 5,
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#E59350'
},
{
offset: 1,
color: '#24170C'
}
])
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1] + 5,
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FFCA9F'
},
{
offset: 1,
color: '#FFCA9F'
}
])
}
}
]
}
},
data: VALUE1
},
{
name: '',
barGap: '150%',
type: 'bar',
z: 0,
tooltip: {
show: false
},
data: [200, 200, 200, 200, 200],
barWidth: '70%',
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.05)' // 0% 处的颜色
}
}
}
]
}
return option as EChartsOption
}
