convertToPixel for radar chart

[RahulVishK]

What problem does this feature solve?

when convertToPixel function when passed along with series name , we could not get the pixel coordinates values in radar chart for example in radar chart

ex myChart.convertToPixel({seriesName: 'A'}, [4200,0]); //undefined in console

here is the sample code

option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'A',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
	myChart.on('finished', () => {
		
	});
}


	setTimeout(drawCircle, 1000);

	function drawCircle() {
	    const originPos = myChart.convertToPixel({seriesName: 'A'}, [0,0]);
console.log(originPos);
		const targetPos = myChart.convertToPixel({seriesName: 'A'}, [4200,0]);
	console.log(targetPos);
		const radius = Math.sqrt(Math.pow((targetPos[1] - originPos[1]), 2) + Math.pow((targetPos[0] - originPos[0]), 2));
 
		myChart.setOption({
		graphic: [{
		  elements: [{
			id: 'small_circle',
			type: 'circle',
			z: 100,
			left: 'center',
			top: 'center',
			// position: myChart.convertToPixel({seriesName: 'A'}, [num1,num2]),
			// position: [200,200],
			shape: {
			  // cx: 400,
			  // cy: 400,
			  r: radius,
			},
			style: {
			  // fill: 'rgba(0, 140, 250, 0.5)',
			  fill: 'transparent',
			  stroke: 'rgba(0, 50, 150, 0.5)',
			  stroke: 'red',
			  lineWidth: 2
			},
			enterFrom: {
				// Fade in
				style: { opacity: 0 },
				// Slide in from left
				x: 0
			}
		  },
		  {
			type: 'text',
			style: {
				text: 'Target',
				x: targetPos[0],
				y: targetPos[1],
				fill: 'red',
				font: 'italic bolder 16px cursive',
				textAlign: 'right',
				textStroke: 'blue',
				stroke: 'red',
				//textBorderType : 'dashed',
				//textBorderWidth: 2,
				//textBorderRadius: 50,
				textBorderColor: 'blue',
				//textBackgroundColor: 'green'

			},

		  }
		]
		}],
		});
	}

What does the proposed API look like?

myChart.convertToPixel({seriesName: 'A'}, [0,0]); should return the pixel coordinates for radar charts

[RahulVishK]

HII basically my requirement is to draw a circle in the radar chart , but i could not get the coordinates for it using convertToPixel , does echarts have any work around or ANY API to do this implementation

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!