javascriptchartsechartsngx-echartsapache-echarts

Draw Circle on EChart

I have the following Apache EChart:

var option = {
    series: [
        {
          name: 'RollPitch',
          type: 'gauge',
          data: [
            {
              value: 0,
              name: '',
              itemStyle: { color: '#CF4437' },
            },
          ],
          min: 0,
          max: 360,
          splitNumber: 4,
          splitLine: {
            show: false,
          },
          startAngle: 0,
          endAngle: 359.9999999,
          axisLine: {
            lineStyle: {
              color: [[100, '#D8D8D8']],
              width: 50,
            },
          },
          axisTick: {
            show: false,
          },
          pointer: {
            show: true,
            length: '110%',
            width: 8,
          },
          detail: {
            show: false,
          },
        },
      ],
};

https://echarts.apache.org/examples/en/editor.html?

What I want to achieve is to draw a circle given with x and y coordinates.

enter image description here

Can somebody give me a hint how a possible solution would be achieved? Shall I draw on the canvas that is created by ECharts? How to map the position?

Solution

  • To draw a shape you can with the two ways:

    1. The custom series (too expensive and complex for this case)
    2. With the graphic component (more suitable option)

    In general you need to add the component then setup predefined shape circle and you will have small circle.

    var option = {
  graphic: [{
      elements: [{
        id: 'small_circle',
        type: 'circle',
        z: 100,
        shape: {
          cx: 350,
          cy: 200,
          r: 20,
        },
        style: {
          fill: 'rgba(0, 140, 250, 0.5)',
          stroke: 'rgba(0, 50, 150, 0.5)',
          lineWidth: 2,
        }
      }]
    }]
   
  // series: [...]
}

    Bonus: how to update circle coordinates:

    var myChart = echarts.init(document.getElementById('main'));

var option = {
  graphic: [{
    elements: [{
      id: 'small_circle',
      type: 'circle',
      z: 100,
      shape: {
        // "... draw a circle given with x and y coordinates." — it's here
        cx: 350,
        cy: 200,
        r: 20,
      },
      style: {
        fill: 'rgba(0, 140, 250, 0.5)',
        stroke: 'rgba(0, 50, 150, 0.5)',
        lineWidth: 2,
      }
    }]
  }],
  series: [{
    name: 'RollPitch',
    type: 'gauge',
    data: [{
      value: 0,
      name: '',
      itemStyle: {
        color: '#CF4437'
      },
    }, ],
    min: 0,
    max: 360,
    splitNumber: 4,
    splitLine: {
      show: false,
    },
    startAngle: 0,
    endAngle: 359.9999999,
    axisLine: {
      lineStyle: {
        color: [
          [100, '#D8D8D8']
        ],
        width: 50,
      },
    },
    axisTick: {
      show: false,
    },
    pointer: {
      show: true,
      length: '110%',
      width: 8,
    },
    detail: {
      show: false,
    },
  }, ],
};

myChart.setOption(option);

/* Taken from https://stackoverflow.com/a/35455786/1597964 */
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
  return [
    centerX + (radius * Math.cos(angleInRadians)),
    centerY + (radius * Math.sin(angleInRadians))
  ]
}

var angle = 90;
setInterval(function() {
  var [cx, cy] = polarToCartesian(300, 200, 50, angle);
  myChart.setOption({
    graphic: [{
      id: 'small_circle',
      shape: {
        cx: cx,
        cy: cy,
      }
    }]
  });
  angle = angle + 1;
}, 20);
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>