helgasoft
commented
1 year ago The gauge chart could be considered a scatter chart with just one value. The dot is replaced by a dial (arrow) pointing to the value on a semicircular axis. The dial is clickable and provides the value. The "colored partition" is just an axis and is not clickable, like any other axis in ECharts. One could also click anywhere on the chart and get canvas coordinates through zrender. Demo Code
What problem does this feature solve?
option = { tooltip: { formatter: '{a}
{b} : {c}%' }, series: [ { name: 'Pressure', type: 'gauge', // progress: { // show: true // }, axisLine: { lineStyle: { opacity: 0.5, onclick: function (event) { console.log(event); }, color: [ [0, '#00f'], [0.25, '#0ff'], [0.5, '#0f0'], [0.75, '#ff0'], [1, '#f00'] ] } }, detail: { valueAnimation: true, formatter: '{value}' }, data: [ { value: 50, name: 'SCORE' } ] } ] };
myChart.on('click', function(params) { document.getElementById("test").innerHTML = params; console.log('Params',params); });
The colored partition in the curved part are not clickable.
What does the proposed API look like?
I hope the config to be something like below:
var option = { series: [{ type: 'gauge', axisLine: { clickable:true, lineStyle: { color: '#000', opacity: 0.5, onclick: function (event) { console.log(event); } } }, data: [{value: 50}] }]