Блог

Я могу успешно соединить 3 разных графика с помощью API connect.

 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]
}
]
  

Он разрывает соединение при наведении курсора мыши на график.
Есть ли какой-либо способ поддерживать соединение для другой серии.data?

Вероятно, проблема существует только на вашем локальном компьютере, она не может воспроизводиться с минимальной конфигурацией. Вам нужно опубликовать полную конфигурацию здесь или тщательно искать проблемы на локальном компьютере. С предоставленными данными это работает как шарм, см. Ниже.

 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>