Apache Echarts настраиваемое максимальное положение ⇐ Javascript

[Anonymous]

Я использую эту великую библиотеку, чтобы создать некоторые отчеты. Одна из моих проблем - с пользовательским датчиком, где мне нужно позиционировать этикетку двумя значениями.
На рисунке один можно увидеть, что я построил.

In Figure 2, this is the requirement of what I should design.
Is it possible to modify the labels' positioning and do it?
Thank you for being so supportive,



What I Сделано < /th>
Как ожидалось < /th>
< /tr>
< /thead>


< /td> < /td> < /td> < /td> < /td> < /td> < /td> < /td> < /td> < /td> < /td> < /td> < /td> alt = "Что ожидалось" src = "https://i.sstatic.net/4ar1ntyl.png"/>






// code to customise the labels
ing

import { Component } from '@angular/core';
import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { offset } from '@popperjs/core';

echarts.use([GaugeChart, GridComponent, CanvasRenderer]);

@Component({
selector: 'app-gauge',
standalone: true,
imports: [NgxEchartsModule],
templateUrl: './gauge.component.html',
styleUrls: ['./gauge.component.scss'],
providers: [
{ provide: NGX_ECHARTS_CONFIG, useValue: { echarts } }
]
})
export class GaugeComponent {
chartOptions = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
center: ['50%', '75%'],
radius: '90%',
min: 0,
max: 1,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 20,
color: [
[0.125, '#FC0202FF'],
[0.250, '#A15D39FF'],
[0.375, '#F8C187FF'],
[0.500, '#F5FF6EAF'],
[0.625, '#A8FF6EFF'],
[0.750, '#60FD72FF'],
[0.875, '#2FCE77FF'],
[1, '#16852EFF']
]
}
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '12%',
width: 25,
offsetCenter: [0, '-60%'],
itemStyle: {
color: 'auto'
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
width: 2
}
},
splitLine: {
lenth:20,
lineStyle: {
color: 'auto',
width: 5
}
},
axisLabel: {
color: '#464646',
fontSize: 15,
distance: -40,
offset: -20,
rotate: 'tangential',
formatter: function (value: number) {
if (value >= 0.875 && value = 0.00 && value < 0.125) {
return 'D';
}
return '';
}
},
title: {
offsetCenter: [0, '-10%'],
fontSize: 20
},
detail: {
fontSize: 30,
offsetCenter: [0, '-30%'],
valueAnimation: true,
formatter: function (value: number) {
return Math.round(value * 100) + '';
},
color: 'inherit'
},
data: [
{
value: 0.9,
name: 'Grade Rating'
}
]
}
]
};
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... ositioning