带有自定义自定义指标的顶点图表半甜甜圈

Question

Hello I have the following design That I have to implement. I am using apexcharts as a chart library in my application.

I could not find any gauge/indicator related information of apexchart while googling and now quite not sure weather it is possible to implement the chart as required design.

2 important elements on my design

1. custom indicator
2. rounded edges of the arc

Do you have any idea that could help me here?

Thank You.

 var options = { series: [44, 55, 41, 17, 15], chart: { type: "donut" }, plotOptions: { pie: { startAngle: -90, endAngle: 90, offsetY: 10 } }, grid: { padding: { bottom: -80 } }, responsive: [ { breakpoint: 480, options: { chart: { width: 200 }, legend: { position: "bottom" } } } ] }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();

 <div id="chart"></div> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Answer 1

there is one in Echarts i use it before

https://echarts.apache.org/examples/en/editor.html?c=gauge-progress