（本文档仅供参考，因宏代码具备一定场景限制，如和实际应用场景不符合，需要自行调整相关宏代码）
需求场景：
在部分特定场景下为了能制作出更加炫酷的大屏，会在图形中添加立体的展示效果，仪表盘中的立体图形需要自行去描绘，本文仅提供简单思路和示例
实现效果：
具体步骤：
/*
实现的逻辑为将轴线多次重画，画出立体效果
**/
function main(page: IPage, portlet: IEChartsPortlet) {
let option = portlet.getChartOptions();
let series = option.series[0];
let series1 = JSON.parse(JSON.stringify(series));
let series2 = JSON.parse(JSON.stringify(series));
series.barWidth = 10
series.itemStyle = {
//左面
normal: {
color: '#FFFFFF',
barBorderRadius: [6, 0, 0, 0]
}
}
series1.barWidth = 10;
series1.itemStyle = {
//右面
normal: {
color: '#FFFFFF',
borderColor: '#000',
borderWidth: 0.1,
barBorderRadius: [0, 6, 0, 0]
}
};
series1.barGap = 0
series2 = {
name: 'b',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
//顶部
normal: {
color: '#FFFFFF',
borderColor: '#000',
borderWidth: 4,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
//数值样式
color: '#EEE2E2',
fontSize: 14,
fontFamily: '微软雅黑'
},
offset: [0, -2]
}
}
},
symbol: 'diamond',
symbolSize: ['20.5', '13'],
symbolOffset: [0, '-38%'],
symbolPosition: 'end',
data: option.series[0].data,
z: 3
}
option.series.push(series1);
option.series.push(series2);
// 修改轴线最大值，当柱子超出轴线时使用
//option.yAxis.max = (value:any) => value.max
portlet.setChartOptions(option);
}
migrate.xml
