echarts4.2.1 connect 多图联动，dataview切换之后，每个图都被污染

[simian0826]

Version

4.2.1

Steps to reproduce

我创建了三个图表，纵轴都是同样的时间刻度，用了connect联动之后，视图不切换，没有问题，用了折柱切换之后，每个图都会出现其他图的数据，并且渲染在每个图当中。去掉connect就不会有这种情况发生

What is expected?

希望联动的时候，单独图表的折柱切换，不会影响其他图表的展现

What is actually happening?

联动后，图表展示被污染

这是切换前

这是切换后

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[deqingli]

Please give the example link in echarts gallery, or provide echarts option, and any other more detailed message for us to debug, Thank you.

[simian0826]

sorry I just received the email now. this is my options

---

setProductTrendOptions(data) { this.productTrendChart.setOption({ title: { text: '产量趋势', left: '0', top: '0' }, axisPointer: { label: { backgroundColor: '#D50000' } },

    grid: {
      left: 10,
      right: 10,
      top: 70,
      containLabel: true,
      height: '80%',
      width: '97%'
    },
    xAxis: {
      type: 'time',
      name: '时间',
      max: todayMax,
      min: todayMin
    },
    yAxis: {
      name: '产量'
    },
    legend: {
      data: ['产品A', '产品B', '产品A extra', '产品B extra']
    },
    toolbox: {
      show: true,
      orient: 'horizontal',
      left: 'right',
      top: '0',
      feature: {
        mark: { show: true },
        magicType: { show: true, type: ['line', 'bar'] }

      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },

    series: [{
      name: '产品A', itemStyle: {
        normal: {
          color: '#FF005A',
          lineStyle: {
            color: '#FF005A',
            width: 2
          }
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#FC6A9D'
          }, {
            offset: 1,
            color: '#fff'
          }])
        }
      },
      smooth: true,
      type: 'line',
      data: productionData,
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: '产品B',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3888fa',
          lineStyle: {
            color: '#3888fa',
            width: 2
          }
        }
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#9DC4FC'
          }, {
            offset: 1,
            color: '#fff'
          }])
        }
      },
      data: productionData2,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '产品A extra',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#0D47A1',
          lineStyle: {
            color: '#0D47A1',
            width: 2,
            type: 'dotted'
          }
        }
      },
      data: productionDataExtra,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    },
    {
      name: '产品B extra',
      smooth: true,
      type: 'line',
      itemStyle: {
        normal: {
          color: '#880E4F',
          lineStyle: {
            color: '#880E4F',
            width: 2,
            type: 'dotted'

          }
        }
      },
      data: productionData2Extra,
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }]
  })
},
setEquipmentOptions(data) {

  this.equipmentChart.setOption({
    title: {
      text: '设备状态',
      left: '0',
      top: '0'
    },
    axisPointer: {
      link: { xAxisIndex: 'all' },
      label: {
        backgroundColor: '#D50000'
      }
    },
    legend: {
      data: equipLegend,
      selectedMode: false
    },
    grid: {
      left: 10,
      right: 10,
      top: 70,
      containLabel: true,
      height: '80%',
      width: '97%'
    },
    xAxis: {
      type: 'time',
      name: '时间',
      max: todayMax,
      min: todayMin
    },
    yAxis: {
      name: '设备',
      type: 'category',
      data: equipCategory
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10],
      formatter: (e) => {
        return `${e.marker} ${e.name} —— ${echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', e.value[1])} ~ ${echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', e.value[2])}`
      }
    },
    series: [
      {
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
          normal: {
            opacity: 0.8
          }
        },
        encode: {
          x: [1, 2],
          y: 0
        },
        data: equip,
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      },
      {
        type: 'custom',
        renderItem: renderLineItem,
        itemStyle: {
          normal: {
            opacity: 0.8
          }
        },
        encode: {
          x: [1, 2],
          y: 0
        },
        data: line,
        animationDuration: 2800,
        animationEasing: 'quadraticOut'
      },
      ...equipSeries

    ]
  })
},
setStaffOptions(data) {
  this.staffChart.setOption({
    title: {
      text: '人员在岗',
      left: '0',
      top: '0'
    },
    axisPointer: {
      link: { xAxisIndex: 'all' },
      label: {
        backgroundColor: '#D50000'
      }
    },

    grid: {
      left: 10,
      right: 10,
      top: 70,
      containLabel: true,
      height: '80%',
      width: '97%'
    },
    xAxis: {
      type: 'time',
      name: '时间',
      max: todayMax,
      min: todayMin
    },
    yAxis: {
      name: '人员在岗'
    },
    toolbox: {
      show: true,
      orient: 'horizontal',
      left: 'right',
      top: '0',
      feature: {
        mark: { show: true },
        magicType: { show: true, type: ['line', 'bar'] }

      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },

    series: [
      {
        name: '人员在岗',
        type: 'line',
        itemStyle: {
          normal: {
            color: 'DarkTurquoise',
            lineStyle: {
              color: 'DarkTurquoise',
              width: 1
            }
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'PaleTurquoise'
            }, {
              offset: 1,
              color: '#fff'
            }])
          }
        },
        data: staffOnJob,
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
      }
    ]
  })
}

}