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

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

目录

效果

一、介绍

 1、官方文档：Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

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

3、数据处理（关键点）

四、完整示例

tips

 欢迎扫描下方二维码关注VX公众号

---

效果

一、介绍

 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、指定容器并设置容器宽高

<template>
  <div id="main"></div>
</template>

<script>
  import * as echarts from "echarts";
  export default {
    name: "mutiYAxis",
    data() {
      return {
     
      };
    },
    methods: {
      initChart() {
        let data = this.data
        let chartDom = document.getElementById("main");
        let myChart = echarts.init(chartDom);
        let option;

        ...详见完整示例   
      },
    },
  };
</script>

<style scoped>
  #main {
    width: 1000px;
    height: 500px;
  }
</style>

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;
}

四、完整示例

<template>
  <div class="circularScatter">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "circularScatter",
  data() {
    return {
      result: {
        scatterData: [
          [10.0, 9.14],
          [8.0, -8.14],
          [-13.0, -8.74],
          [9.0, 8.77],
          [11.0, -9.26],
          [14.0, 8.1],
          [-6.0, -6.13],
          [4.0, -3.1],
          [-12.0, 9.13],
          [7.0, 7.26],
          [5.0, 4.74]
        ],
        circleData: this.circle(12, 360, 0, 0)
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.result);
    });
  },
  methods: {
    initChart(data) {
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;

      const { scatterData, circleData } = data;
      if (scatterData === null || scatterData.length === 0 || circleData === null || circleData.length === 0) return;

      option = {
          title: {
            text: "圆形散点图"
          },
          tooltip: {
            trigger: "item",
            formatter: function (params) {
              if (params.seriesType === 'scatter') {
                return "x: " + params.data[0] + ", y: " + params.data[1];
              }
            }
          },
          // xAxis 和 yAxis即使是空对象也务必要有，否则会有报错 Error in nextTick: "Error: xAxis "0" not found"
          xAxis: {
            min: -15,
            max: 15
          },
          yAxis: {
            min: -15,
            max: 15
          },
          series: [
            // 圆
            {
              type: "line",
              data: circleData,
              // 设置图形的形状和大小
              symbol: "circle",
              symbolSize: 2,
              // 设置图形的样式
              itemStyle: {
                // 红色
                color: "#FC5430",
                opacity: 0.8,
                borderColor: "#FC5430",
                borderWidth: 2
              }
            },
            // 散点
            {
              type: "scatter",
              data: scatterData,
              // 设置图形的形状和大小
              symbol: "circle",
              symbolSize: 6,
              // 设置图形的样式
              itemStyle: {
                // 蓝色
                color: "#1487F4",
                opacity: 0.8,
                borderColor: "#1487F4",
                borderWidth: 1
              }
            }
          ]
        }

      option && myChart.setOption(option);
    },
    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;
    }
  },
}
</script>

<style lang="less" scoped>
#main {
  width: 1000px;
  height: 500px;
}
</style>

tips

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

参考

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

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

 欢迎扫描下方二维码关注VX公众号