react中echarts让两个或多个图联动

前言：

最近在做一个react项目，涉及到统计模块，让两个折线图一起联动，拖动一个，另一个跟着动。

实现过程：

效果图：

就是拖动底下的滑块(echarts专业术语dataZoom)，上下两个图一起动。（不光dataZoom,tootltip等都可以联动。

实现思路就是使用init实例化两个图表，然后用connect链接实现。具体配置项可查看官方API。

上代码：

引入echarts：import echarts from 'echarts';

 render() {
    return (
      <div className={styles.dpmain}>
          <div id="leftTj"  style={{ width: '100%', height: 200 }}></div>//实例化统计图挂在在这上面
          <div id="rightTj"  style={{ width: '100%', height: 200 }}></div>
      
        {/* </div> */}
        </div>
      </div>
    )
  }

然后再componentDidMount()生命周期里写如下代码

 var myChart1 = echarts.init(document.getElementById('leftTj'));//init实例化统计图
 var myChart2 = echarts.init(document.getElementById('rightTj'));
var option1=	{textStyle: {
			color: '#545454',
			fontFamily: 'Source Han Sans',
			fontWeight: 'lighter'
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
				type: 'cross',
				crossStyle: {
						color: '#999'
				}
		}
},
	legend: {
		data: ['蓝', '红'],
		left: '80%',
		top:'2%',
		itemWidth: 10,
		itemHeight: 5
	},
	xAxis: {
		type: 'category',
		data:xAxisDatas,
		axisLabel:{
            margin:"-50",
		},
		name:"线路左",
        nameLocation:"start",
        axisTick:{
			alignWithLabel:true,
			inside:true
        },
},
	yAxis: {
		name: 'mm/y',
		type: 'value',
		splitLine:{
            show:false
        },
},
dataZoom: [
	{
		show: false,
		realtime: true,
		start: 0,
		end: 30
	},
	{
		type: 'inside',
		realtime: true,
		start: 0,
		end: 30
	}
],
series:series
	}
}
var option2={
	textStyle: {
			color: '#545454',
			fontFamily: 'Source Han Sans',
			fontWeight: 'lighter'
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
				type: 'cross',
				crossStyle: {
						color: '#999'
				}
		}
},
	legend: {
		data: ['蓝', '红'],
		left: '80%',
		top:'2%',
		itemWidth: 10,
		itemHeight: 5
	},
	xAxis: {
		type: 'category',
		data:xAxisDatas,
		axisLabel:{
            margin:"-50",
		},
		name:"线路左",
        nameLocation:"start",
        axisTick:{
			alignWithLabel:true,
			inside:true
        },
},
	yAxis: {
		name: 'mm/y',
		type: 'value',
		splitLine:{
            show:false
        },
},
dataZoom: [
	{
		show: true,
		realtime: true,
		start: 0,
		end: 30
	},
	{
		type: 'inside',
		realtime: true,
		start: 0,
		end: 30
	}
],
series:series
	}
}
myChart1.setOption(option1);
myChart2.setOption(option2);
echarts.connect([myChart2,myChart1]);//连接起来