Vue ECharts 散点图上画一个圆形

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

<template><div id="main"></div>
</template><script>import * as echarts from "echarts";export default {name: "mutiYAxis",data() {return {};},methods: {initChart() {let data = this.datalet 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>