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

ZionHH

已于 2022-11-25 09:38:23 修改

阅读量1.3k

点赞数 1

分类专栏： ECharts 文章标签： echarts javascript 散点象限图

于 2022-11-24 15:43:31 首次发布

本文链接：https://blog.csdn.net/z291493823/article/details/128017552

版权

本文探讨了如何在Echarts中动态绘制散点象限图，特别是处理数据变化的情况。重点介绍了根据中心位置画出四个象限的方法，以及如何利用Echarts API在图表渲染后获取并使用最大、最小值。提供了两种实现方式，包括通过API获取实时数据和设置预估的最大、最小值避免超出部分绘制。

摘要由CSDN通过智能技术生成

之前发布过一篇文章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
}

在这里插入图片描述

在实际开放场景中，要如何获取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]

完整代码

<!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>Document</title>
  <style>
    .container {
     
      width: 1000px;
      margin: 0 auto;
      text-align: center;
    }
    #chart {
     
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="container">
    <button id="updateBtn">update</button>
    <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() *