在 EChart 上画圆答案

【问题标题】：Draw Circle on EChart在 EChart 上画圆
【发布时间】：2020-09-17 16:05:00
【问题描述】：

我有以下 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 创建的画布上画画吗？如何映射位置？

【问题讨论】：

标签： javascript charts echarts ngx-echarts apache-echarts

【解决方案1】：

要绘制形状，您可以使用以下两种方式：

custom series（对于这种情况来说过于昂贵和复杂）
使用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, 0.5)',
          lineWidth: 2,
        }
      }]
    }]
   
  // series: [...]
}

奖励：如何更新圆坐标：

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>

【讨论】：