krmao commented on issue #16514:
URL: https://github.com/apache/echarts/issues/16514#issuecomment-1728939250
> should not warning , need use this, or label config will not work if
custom render item
```
series: [
{
name: '用电量',
yAxisIndex: 0,
type: 'custom',
renderItem: (params: any, api: any) => {
const typeValue = api.value(3);
const yValue = api.value(2);
const start = api.coord([api.value(0), yValue]);
const size = api.size([api.value(1) - api.value(0), yValue]);
// let style: any = {}; // api.style() //
https://github.com/apache/echarts/issues/16514#issuecomment-1041032731
console.log("api.visual('color')", api.visual('color'));
console.log("api.visual('textFill')", api.visual('style'));
console.log("api.visual('text')", api.visual('fontFamily'));
let style: any = {
fill: api.visual('color'),
// fontFamily: 'sans-serif',
// fontStyle: 'normal',
// legacy: true,
// text: yValue,
// textBackgroundColor: 'transparent',
// textDistance: 5,
// textFill: 'rgba(51, 51, 51, 0.7)',
// textLineHeight: 14,
// textPosition: 'top',
};
style.fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 206, 118, 0.3)' },
{ offset: 1, color: 'rgba(59, 206, 118, 0)' },
]);
if (typeValue === 'SHUTDOWN') {
style.fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 194, 37, 0.3)' },
{ offset: 1, color: 'rgba(255, 194, 37, 0)' },
]);
}
switch (typeValue) {
case 'CHARGING':
style.fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 206, 118, 0.3)' },
{ offset: 1, color: 'rgba(59, 206, 118, 0)' },
]);
break;
case 'SHUTDOWN':
style.fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 194, 37, 0.3)' },
{ offset: 1, color: 'rgba(255, 194, 37, 0)' },
]);
break;
case 'STANDBY':
style.fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(229, 1, 19, 0.3)' },
{ offset: 1, color: 'rgba(229, 1, 19, 0)' },
]);
break;
case 'DISCHARGING':
style.fill = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(47, 108, 224, 0.3)' },
{ offset: 1, color: 'rgba(47, 108, 224, 0)' },
]);
break;
}
style = {
...style,
lineWidth: 0,
stroke: 'transparent',
};
return {
type: 'rect',
shape: {
x: start[0],
y: start[1],
width: size[0],
height: size[1],
},
style: style,
};
},
data: data,
label: {
show: true,
position: 'top',
backgroundColor: 'transparent',
fontSize: 10,
fontWeight: 500,
lineHeight: 14,
color: 'rgba(51, 51, 51, 0.7)',
formatter: (param: any) => {
console.log('---- param=', param);
const value = param.data[2];
return value === 0 ? '' : value;
},
},
showBackground: false,
// encode: {
// x: ['TIME_START', 'TIME_END'],
// y: 'VALUE',
// itemId: 'STATUS',
// tooltip: ['VALUE', 'STATUS'],
// itemName: 'STATUS',
// },
},
]
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
