最近项目使用echart比较多，用的也是花里胡哨的，所以总结了下，方便大家参考和使用。
import * as echarts from 'echarts'
import { EChartsOption, Color, CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts'
// 渐变色定义
const verticalGradualColor = (colorArr: string[]): Color => {
return {
type: 'linear',
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colorArr[0]
},
{
offset: 1,
color: colorArr[1]
}
]
}
}
interface DimensionalBar {
xAxisData: string[]
barData: number[]
}
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
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)
export const dimensionalBar = (optionData: DimensionalBar): any => {
const colorArr = [ [ verticalGradualColor(['#5D94FF', '#0B334A']),
verticalGradualColor(['#2465E3', '#062131']),
verticalGradualColor(['#94B9FF', '#94B9FF'])
],
[ verticalGradualColor(['#FFBD88', '#372413']),
verticalGradualColor(['#E59350', 'rgba(36,23,12,0.78)']),
verticalGradualColor(['#FFCA9F', '#FFCA9F'])
]
]
return {
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/>
`
}
},
grid: {
left: '10%',
right: '10%',
top: '15%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: optionData.xAxisData,
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#DEDEDE',
type: 'dashed' // 线的类型 虚线
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '单位：万吨',
min: 0,
axisLine: {
show: false,
lineStyle: {
width: 2,
color: '#CEDDF2'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#2A353F',
type: 'dashed'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12
}
},
series: [
{
type: 'custom',
name: '污水处理量',
renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1] + 5, // 上面减多5，这里需要加多5，下面同理
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: colorArr[params.dataIndex % 2][0]
}
},
{
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: colorArr[params.dataIndex % 2][1]
}
},
{
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: colorArr[params.dataIndex % 2][2]
}
}
]
}
},
data: optionData.barData
},
{
name: '',
barGap: '100%',
type: 'bar',
z: 0,
tooltip: {
show: false
},
data: optionData.barData.map(() => {
return Math.max(...optionData.barData)
}),
// barWidth: '70%',
itemStyle: {
color: 'rgba(255,255,255,0.05)' // 0% 处的颜色
}
}
]
}
}
