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

任小栗

已于 2023-11-07 02:01:52 修改

阅读量346

点赞数

文章标签： echarts 前端 javascript

于 2023-09-09 00:44:03 首次发布

本文链接：https://blog.csdn.net/qq_42263570/article/details/132769647

版权

看过的深度图是直接用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>

步骤 2：初始化图表

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

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

最低0.47元/天解锁文章

任小栗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts图表实现交易所的深度图效果

本教程将向您展示如何使用ECharts库控制Tooltip信息框的移动。我们将使用两个图表作为示例，并分别控制它们的Tooltip信息框在鼠标指针附近移动显示。首先，我们需要准备一个HTML文件，其中包含两个容器用于放置图表。我们使用和作为两个容器的ID。以下是示例的HTML结构：这里需要注意一个问题就是要两个表格高度相等，采用的解决方案是图表合并，联动控制Tooltip的移动。步骤 2：初始化图表接下来，我们需要使用ECharts库来初始化两个图表实例，并将其分别放置在和容器中。我们
复制链接

扫一扫