在EChart上画圈

问题描述

我有以下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？

我要实现的是绘制一个具有x和y坐标的圆。

有人可以提示我如何实现可能的解决方案吗？ 我可以在由ECharts创建的画布上绘画吗？如何绘制位置？

解决方法

要绘制形状，可以使用两种方法：

1. custom series（在这种情况下过于昂贵和复杂）
2. 使用graphic component（更合适的选项）

通常，您需要添加组件，然后设置预定义的形状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,lineWidth: 2,}
      }]
    }]
   
  // series: [...]
}

奖金：如何更新圆坐标：

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

var option = {
  graphic: [{
    elements: [{
      id: 'small_circle',shape: {
        // "... draw a circle given with x and y coordinates." — it's here
        cx: 350,style: {
        fill: 'rgba(0,}
    }]
  }],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,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>