时间戳

首页 > 解决方案 > 使用空系列线数据连接 3 个不同的 echart 图表

javascript - 使用空系列线数据连接 3 个不同的 echart 图表

问题描述

我能够使用连接 API 成功连接 3 个不同的图表。

let echart_instance_1 = type1.current.getEchartsInstance();
let echart_instance_2 = type2.current.getEchartsInstance();
let echart_instance_3 = type3.current.getEchartsInstance();

echarts.connect([echart_instance_1, echart_instance_2, echart_instance_3]);

所有 3 个图表都是连接的，所以每当我将鼠标悬停在 echart_instance_1 上时，其他 2 个图表都会跟随工具提示，但是当null数据位于 series.data 和多个 series.data 中时，问题就来了。

series: [
{
   type: "line"
   connectNulls: true,
   data: [1, 2, 3, 4, null, null, null, null]
},
{
   type: "line"
   connectNulls: true,
   data: [null, null, null, null, 5, 6, 7, null]
},
{
   type: "line"
   connectNulls: true,
   data: [null, null, null, null, null, null, null, 8]
}
]

当您将鼠标悬停在图表上时，它会断开连接。有什么方法可以维护其他 series.data 的连接？

标签： javascriptecharts

解决方案

问题可能只存在于您的本地，它无法以最少的配置重现。您需要在此处发布完整配置或仔细查找本地计算机上的问题。使用提供的数据，它就像一个魅力，见下文。

var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));

// Unsert your code below
var option = {
  tooltip: {},
  xAxis: {
    data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6", "Category7", "Category8"]
  },
  yAxis: {},
  series: [{
      type: "line",
      connectNulls: true,
      data: [1, 2, 3, 4, null, null, null, null]
    },
    {
      type: "line",
      connectNulls: true,
      data: [null, null, null, null, 5, 6, 7, null]
    },
    {
      type: "line",
      connectNulls: true,
      data: [null, null, null, null, null, null, null, 8]
    }
  ]
};

// Unsert your code above
myChart1.setOption(option);
myChart2.setOption(option);
myChart3.setOption(option);

echarts.connect([myChart1, myChart2, myChart3]);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<div id="main1" style="width: 600px;height:200px;"></div>
<div id="main2" style="width: 600px;height:200px;"></div>
<div id="main3" style="width: 600px;height:200px;"></div>

推荐阅读