Vue ECharts 散点图上画一个圆形 - 附完整示例

ECharts：一个基于 JavaScript 的开源可视化图表库。

效果

一、介绍

 1、官方文档：Apache ECharts

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注：上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档：在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

3、数据处理（关键点）

circle(radius, steps, centerX, centerY) {
  var points = [];
  for (var i = 0; i < steps; i++) {
    // 根据圆的参数方程，计算每个点的x和y坐标
    var x = centerX + radius * Math.cos(2 * Math.PI * i / steps);
    var y = centerY + radius * Math.sin(2 * Math.PI * i / steps);
    // 将每个点的坐标添加到数组中
    if (x === 12 || x === -12) {
      y = 0
    }
    if (y === 12 || y === -12) {
       x = 0
    }
    points.push([x, y]);
  }
  return points;
}

四、完整示例

tips

1、xAxis 和 yAxis即使是空对象也务必要有，否则会有报错 Error in nextTick: "Error: xAxis "0" not found"

参考

Echarts 用散点图绘制一个圆_echarts画圆-CSDN博客

可完善：红色的圆的symbol: "circle"设置成symbol： "none"会无法闭合，还请各位大神赐教