当具有多个系列的图表与具有单个系列的图表链接时,echarts.connect断开

时间:2019-08-30 13:18:11

标签: javascript echarts

问题

  1. 创建具有多个系列的单个图并在其上启用图例
  2. 用一个系列创建多个图
  3. echarts.connect链接
  4. 浏览代码,并尝试从具有多个系列的图形中隐藏第一个元素

结果-图形断开连接。

工作示例

http://twitterwatcher.com- 尝试隐藏负面推文,并观察其余图表的行为。

用于复制的简化代码

在echarts 4.2.1上测试

/**
 * example showing the issue with connect and legend 
 */

let initGraphs = () => {
  let x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  let y1 = [],
    y2 = [],
    y3 = [],
    y4 = [],
    y5 = [],
    y6 = [];
  let max = 2;
  let min = -2;
  for (i = 0; i <= 10; i++) {
    y1.push(Math.random() * (+max - +min) + +min)
    y2.push(Math.random() * (+max - +min) + +min)
    y3.push(Math.random() * (+max - +min) + +min)
    y4.push(Math.random() * (+max - +min) + +min)
    y5.push(Math.random() * (+max - +min) + +min)
    y6.push(Math.random() * (+max - +min) + +min)
  }

  let options = {
    legend: {
      data: ["A", "B", "C"],
      top: '17%',
    },
    xAxis: {
      type: 'value',
      data: x
    },
    yAxis: {
      type: 'value'
    },
    series: [{
        name: "A",
        data: y1,
        type: 'line',
        smooth: true
      },
      {
        name: "B",
        data: y2,
        type: 'line',
        smooth: true
      }, {
        name: "C",
        data: y3,
        type: 'line',
        smooth: true
      },
    ],
    tooltip: {
      trigger: "axis",
      showDelay: 0,
    }
  }
  let options2 = {

    xAxis: {
      type: 'value',
      data: x
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: "C",
      data: y3,
      type: 'line',
      smooth: true
    }],
    tooltip: {
      trigger: "axis",
      showDelay: 0,
    }
  }
  let options3 = {
    legend: {
      data: ["E", "F"],
      top: '17%',
    },
    xAxis: {
      type: 'value',
      data: x
    },
    yAxis: {
      type: 'value'
    },
    series: [{
        name: "E",
        data: y5,
        type: 'line',
        smooth: true
      },
      {
        name: "F",
        data: y6,
        type: 'line',
        smooth: true
      }
    ],
    tooltip: {
      trigger: "axis",
      showDelay: 0,
    }
  }
  let chart1 = echarts.init(document.getElementById("graph1"));
  chart1.setOption(options);
  let chart2 = echarts.init(document.getElementById("graph2"));
  chart2.setOption(options2);
  let chart3 = echarts.init(document.getElementById("graph3"));
  chart3.setOption(options3);

  echarts.connect([chart1, chart2, chart3])
}
initGraphs();
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<div>
  <div class="graph graph1" id="graph1" style="width: 500px; height: 300px;"></div>
  <div class="graph graph2" id="graph2" style="width: 500px; height: 300px;"></div>
  <div class="graph graph3" id="graph3" style="width: 500px; height: 300px;"></div>
</div>

0 个答案:

没有答案