Echarts 散点象限图（二）动态绘制

之前发布过一篇文章Echarts散点象限图，基于固定数据来绘制的，但实际开放场景中，需要请求数据，而且可能会动态更改数据，这时候需要如何处理，有什么要注意的地方，这篇文章详细说明一下。
在这里插入图片描述

主要需要处理的地方就是四个象限的markArea，需要根据中心的位置来画，你可以想象成四个定位的盒子。

在这里插入图片描述

以上图第一象限为例，中心的位置为（52，52）x、y轴最大都为100，根据Echarts官方文档的描述来看，一块markArea由两个对象组成，第一个决定左上角位置，第二个决定右下角的位置

{
   
	// 左上角
	name: '第一象限',
	xAxis: 52,
	yAxis: 100,
	itemStyle: {
   
		color: 'rgba(56, 180, 139, .1)'
	},
	label: {
   
		position: 'inside',
		color: 'rgba(0, 0, 0, .1)',
		fontSize: 22
	}
}, {
   
	// 右下角
	// xAxis: 100, // 这里的xAxis不写也可以
	yAxis: 52
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

在实际开放场景中，要如何获取markArea所需的，y轴最大和最小值？

Echarts渲染第一次后，通过Echarts API可以获取到图表渲染后的最大、最小值，获取到后再次渲染图表

const yMin = chart.getModel().getComponent('yAxis').axis.scale._extent[0]
const yMax = chart.getModel().getComponent('yAxis').axis.scale._extent[1]
1
2

完整代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .container {
     
      width: 1000px;
      margin: 0 auto;
      text-align: center;
    }
    #chart {
     
      height: 500px;
    }
  style>
head>

<body>
  <div class="container">
    <button id="updateBtn">updatebutton>
    <div id="chart">div>
  div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js">script>
  <script>
    function randomNum(min, max) {
     
      return Math.floor(Math.random() * (ma
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

相关阅读:
Springboot之事件管家SpringApplicationRunListeners事件管理机制源码分析
研究生学术道德考试部分题目 Word可搜索版
开源微信小程序商城源码PHP带后台管理——构建高效电商平台的基石
Python教程：PyQt5需要学习，哪些知识点？？
【docker】iptables实现NAT
Hive之DDL库操作
Transformer——台大李宏毅详讲Transformer
关于二进制
LeetCode知识点总结 - 89
VScode常用插件_AE必备插件

原文地址：https://blog.csdn.net/z291493823/article/details/128017552