ECharts图表实现交易所的深度图效果_klinecharts 深度图实现

作者：很楠不爱3 | 2024-02-21 13:11:36

踩

klinecharts 深度图实现

看过的深度图是直接用canvas画三个控件，图表，坐标，Tooltip信息框。ECharts是用2个canvas画布，生成2个图表，实现需要逆转逻辑，不能按正常思维做，比如都以为是一个canvas画布生成1个k线，然后数据中间置空，然后生成两个Tooltip信息框控件联动一个k线的canvas。实际上我们可以通过样式控制图表排版再使用图表api反转x轴就可以实现深度图效果了。

ECharts图表教程：联动控制Tooltip的移动

本教程将向您展示如何使用ECharts库控制Tooltip信息框的移动。我们将使用两个图表作为示例，并分别控制它们的Tooltip信息框在鼠标指针附近移动显示。

步骤 1：准备HTML结构

首先，我们需要准备一个HTML文件，其中包含两个容器用于放置图表。我们使用 container 和 container2 作为两个容器的ID。以下是示例的HTML结构：
这里需要注意一个问题就是要两个表格高度相等，采用的解决方案是图表合并，联动控制Tooltip的移动。

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height:800px; margin: 0;    background: #151514;">
  <div class="mian" style="position: relative; height: 100%; width: 100%;display: flex;justify-content: center; align-items: center;">
    <div id="container"style=" height: 100%; width: 50%;"></div>
    <div id="container2" style="height: 100%; width: 50%;">
     
    </div>
    <div style="position: absolute; top: 50%; left: 50%;pointer-events: none; transform: translate(0%, -50%); width: 80%; height: 85%; border-left: 1px solid red;"></div>
   
  </div>

  <!-- ECharts库的引入 -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script type="text/javascript">
    // 在这里编写JavaScript代码
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

步骤 2：初始化图表

接下来，我们需要使用ECharts库来初始化两个图表实例，并将其分别放置在 container 和 container2 容器中。我们将使用 echarts.init 方法来初始化图表，并为每个图表设置相应的配置项。以下是示例代码：

<script type="text/javascript">
  var dom = document.1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/123995