echart3 多图联动获取点击的数据，并把每个图上的数据取出后放入各自的div中...

2019独角兽企业重金招聘Python工程师标准>>>

function chartClick(param){
       document.getElementById('console1').innerHTML=" T:"+ option1.series[0].data[param.dataIndex]+" ℃"
       document.getElementById('console2').innerHTML=" P:"+ option2.series[0].data[param.dataIndex]+" bar(abs)"
       document.getElementById('console3').innerHTML=" Qb:"+ option3.series[0].data[param.dataIndex]+" Sm3/h"
       document.getElementById('console4').innerHTML=" Q:"+option3.series[1].data[param.dataIndex]+" Sm3/h"
     }
     myChart1.on('click',chartClick);
     myChart2.on('click',chartClick);
     myChart3.on('click',chartClick);

完整代码

<div id="" class="row" style="">
    <div class="col-lg-12">
        <h3 class="box-title general-title margin_t0">温度 <span id="console1"></span></h3>
        <div id="main1" style="height:150px;"></div>
    </div>
    <div class="col-lg-12">
        <h3 class="box-title general-title">压力<span id="console2"></span></h3>
        <div id="main2" style="height:150px;"></div>
    </div>
    <div class="col-lg-12">
        <h3 class="box-title general-title">瞬时标况流量 <span id="console3" class="margin_r20"></span>瞬时工况流量<span id="console4"></span></h3>
        <div id="main3" style="height:200px;"></div>
    </div>
    <div class="col-lg-12">
        <h3 class="box-title general-title"><span id="h-xslj">累计供气量</span> <span id="console5" class="margin_r20"></span>计量点时间段<span id="console6"></span></h3>
        <div id="barchart1" style="height:300px;"></div>
    </div>
</div>

<script>
var axisData = [
    "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"
];


option1 = {
    tooltip: {
        trigger: 'axis',
        //showDelay: 0             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
        //axisPointer : {  
        //type : 'cross',  
        //crossStyle : {  
        //color : '#50d9f6',  
        //width : 1,  
        //type : 'solid'  
        //
        //}  
        //},
        formatter: "{b} <br/>{a}: {c}"
    },
    grid: {
        top: 5,
    },


    xAxis: [{
        type: 'category',
        //position:'top',
        boundaryGap: true,
        axisLabel: { show: true },
        axisTick: { onGap: false },
        splitLine: { show: true },
        data: axisData
    }],
    yAxis: {}, // y轴不能删除
    series: [{
        name: '计量点压力',
        type: 'line',
        smooth: true,
        //symbol: 'none',
        data: [
            70, 50, 80, 70, 20, 20, 90, 60, 30, 80, 50, 20, 20, 50, 30, 20, 50, 90, 30, 20, 40, 90, 20, 40
        ],
    }]
};
myChart1 = echarts.init(document.getElementById('main1'), theme);
myChart1.setOption(option1);

ObjectResize(myChart1.resize)

function ObjectResize(fn) {
    if (window.addEventListener) {
        window.addEventListener("resize", fn, false);
    } else {
        window.attachEvent("onresize", fn)
    }
}
option2 = {
    tooltip: {
        trigger: 'axis',
        // showDelay: 0             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    },
    grid: {
        top: 5,
    },

    xAxis: [{
        type: 'category',
        position: 'bottom',
        boundaryGap: true,
        axisTick: { onGap: false },
        splitLine: { show: true },
        data: axisData
    }],
    yAxis: {},
    series: [{
        name: '瞬时工况流量',
        type: 'line',
        //symbol: 'none',
        smooth: true,
        data: [
            80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80, 80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80
        ],
        lineStyle: {
            normal: {
                color: '#0cc894'
            }
        },
        itemStyle: {
            normal: {
                color: '#0cc894'
            }
        },

    }]
};
myChart2 = echarts.init(document.getElementById('main2'), theme);
myChart2.setOption(option2);

ObjectResize(myChart2.resize)

var option3 = {

    legend: {
        data: ['标况流量', '工况流量'],
    },
    grid: {},

    tooltip: {
        trigger: 'axis', //没有此触发，则下面的样式无效
    },


    xAxis: {
        type: 'category',
        data: axisData,
    },
    yAxis: {},
    series: [{
            name: '标况流量',
            type: 'line',
            smooth: true,
            data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56, 65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56],
        },
        {
            name: '工况流量',
            type: 'line',
            smooth: true,
            data: [80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80, 80, 70, 60, 90, 80, 70, 60, 80, 70, 60, 90, 80],
        },

    ]

};
var myChart3 = echarts.init(document.getElementById('main3'), theme);
myChart3.setOption(option3);

ObjectResize(myChart3.resize)

var option4 = {
    legend: {
        data: ['供气量'],
    },
    tooltip: {
        trigger: 'axis', //没有此触发，则下面的样式无效
    },

    xAxis: {
        data: ["8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "1", "2", "3", "4", "5", "6", "7"],
    },
    yAxis: {},
    series: [{
        name: '供气量',
        type: 'bar',
        data: [11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22, 25, 29, 32, 11, 13, 15, 17, 19, 22],
    }]
};
var myChart4 = echarts.init(document.getElementById('barchart1'), theme);
myChart4.setOption(option4);
echarts.connect([myChart1, myChart2, myChart3, myChart4]);
ObjectResize(myChart4.resize);

function chartClick(param) {
    document.getElementById('console1').innerHTML = option3.xAxis.data[param.dataIndex]
    document.getElementById('console2').innerHTML = " P:" + option2.series[0].data[param.dataIndex] + " bar(abs)"
    document.getElementById('console3').innerHTML = " Qb:" + option3.series[0].data[param.dataIndex] + " Sm3/h"
    document.getElementById('console4').innerHTML = " Q:" + option3.series[1].data[param.dataIndex] + " Sm3/h"
    document.getElementById('console5').innerHTML = " Qb:" + option4.series[0].data[param.dataIndex] + " Sm3/h"
    document.getElementById('console6').innerHTML = option4.xAxis.data[param.dataIndex]
    document.getElementById('h-xslj').innerHTML = "小时累计供气量"

}
myChart1.on('click', chartClick);
myChart2.on('click', chartClick);
myChart3.on('click', chartClick);
myChart4.on('click', chartClick);
</script>

 

转载于:https://my.oschina.net/u/2612473/blog/633716