在EChart上画圈 [英] Draw Circle on EChart

问题描述

我有以下Apache EChart:

  var选项= {系列: [{名称:"RollPitch"，类型:量规"，数据: [{值:0，名称: ''，itemStyle:{color:'#CF4437'}，}，]，最小值:0，最多:360，splitNumber:4splitLine:{显示:假，}，startAngle:0，endAngle:359.9999999，axisLine:{lineStyle:{颜色:[[100，'#D8D8D8']]，宽度:50，}，}，axisTick:{显示:假，}，指针:{显示:是的，长度:"110％"，宽度:8}，细节: {显示:假，}，}，]，}; 

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

解决方案

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

1. 自定义系列 (对于这种情况来说太昂贵和复杂了)
2. 使用 图形组件 (更多合适的选项)

通常，您需要添加组件，然后设置预定义的形状 circle ，您将拥有一个小圆圈.

  var选项= {形象的: [{元素:[{id:"small_circle"，类型:"circle"，z:100，形状: {cx:350，cy:200，r:20，}，风格: {填充:'rgba(0，140，250，0.5)'，笔画:'rgba(0，50，150，0.5)'，lineWidth:2}}]}]//系列: [...]} 

奖金:如何更新圆坐标:

  var myChart = echarts.init(document.getElementById('main'));var option = {形象的: [{元素:[{id:"small_circle"，类型:"circle"，z:100，形状: {//"...绘制一个具有x和y坐标的圆."- 它在这里cx:350，cy:200，r:20，}，风格: {填充:'rgba(0，140，250，0.5)'，笔画:'rgba(0，50，150，0.5)'，lineWidth:2}}]}]，系列: [{名称:"RollPitch"，类型:量规"，数据: [{值:0，名称: ''，itemStyle:{颜色:#CF4437"}，}，]，最小值:0，最多:360，splitNumber:4splitLine:{显示:假，}，startAngle:0，endAngle:359.9999999，axisLine:{lineStyle:{颜色: [[100，'#D8D8D8']]，宽度:50，}，}，axisTick:{显示:假，}，指针:{显示:是的，长度:"110％"，宽度:8}，细节: {显示:假，}，}，]，};myChart.setOption(option);/*取自https://stackoverflow.com/a/35455786/1597964 */函数polarToCartesian(centerX，centerY，radius，angleInDegrees){var angleInRadians =(angleInDegrees-90)* Math.PI/180.0;返回 [centerX +(半径* Math.cos(angleInRadians))，centerY +(半径* Math.sin(angleInRadians))]}var angle = 90;setInterval(function(){var [cx，cy] = polarToCartesian(300，200，50，angle);myChart.setOption({形象的: [{id:"small_circle"，形状: {cx:cx，cy:cy，}}]});角度=角度+ 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>  

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.

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?

解决方案

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>

这篇关于在EChart上画圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！