Echarts 中的交互事件

小智张

于 2024-04-22 11:35:57 发布

阅读量213

点赞数 3

文章标签： echarts 交互前端

本文链接：https://blog.csdn.net/2301_77751917/article/details/138068645

版权

调用dataZoom（数据区域缩放组件）事件的代码：

 dataZoom:[{ //数据区域缩放组件
                type:'inside',   //两种取值 inslide,slide
                show:true,
                start:20,    //数据显示的开始位置
                end:70,      //数据显示的终止位置
            }],

 myChart1.on('datazoom',function(params){
        console.log(startValue,endValue,startPercent,endPercent);
        option2.dataZoom[0].start=startPercent;
        option2.dataZoom[0].end=endPercent;
        myChart2.setOption(option2);
    });

鼠标单击跳转网页：

myChart1.on('click',function(params){
        var yt=alert("鼠标单击事件，您刚才单击了："+params.name);
        window.alert("将为您打开一个新窗口，搜索关键词："+params.name);
        window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
    });
    window.addEventListener("resize",function(){
        myChart1.resize();
    });

    myChart2.on('click',function(params){
        var yt=alert("鼠标单击事件，您刚才单击了："+params.name);
        window.alert("将为您打开一个新窗口，搜索关键词："+params.name);
        window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
    });
    window.addEventListener("resize",function(){
        myChart2.resize();
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main1" style="width: 1500px; height: 400px;background-color: antiquewhite;"></div>
    <div id="main2" style="width: 900px; height: 400px;background-color: antiquewhite;"></div>
    <script type="text/javascript">
        var myChart1=echarts.init(document.getElementById("main1"));
        var option1={
            // color:['#FF69B4','#00BFFF','blue'],
            grid:{
                x:35,
            },
            title: {
                text: '湖北专升本计算机专业报考人数',
                subtext: '来源：百度',
            },
            tooltip: {
                trigger: 'axis',
            },
            dataZoom:[{
                type:'inside',
                show:true,
                start:20,
                end:70,
            }],
            legend:{
                data:['2022','2023','2024'],
                left:422,
                color:'red',
                top:8
            },
            xAxis: {
               type: 'category',
               data: ['江汉大学','湖北工程学院','汉口学院',
               '湖北经济学院','湖北科技学院','湖北警官学院','湖北理工学院'],
               axisTick:{
                show:true,
                length:1,
                lineStyle:{

                }
               }
            },
            yAxis: {
               type: 'value'
            },
            series: [
                {
                name: '2022',
                type: 'bar',
                data:[162,46,138,35,28,81,98]
                },
                {
                name: '2023',
                type: 'bar',
                data:[179,57,148,28,38,76,108]
                },
                {
                name: '2024',
                type: 'bar',
                data:[129,76,133,15,41,90,78]
                }
        ]
        };
    var myChart2=echarts.init(document.getElementById("main2"))
    var option2={
            color:['DarkGreen','red','LimeGreen','blue','Purple','GreenYellow'],
            title: {
                text: '湖北专升本计算机专业报考率',
            },
            // backgroundColor: 'rgba(204,204,204,0.7)',
            tooltip: {
                trigger: 'item',
                formatter:"{a}<br/>{b}:{c}({d}%)"
            },
            legend:{
                // left:20,
                top:30,
                data: ['江汉大学',
                '湖北工程学院',
                '汉口学院',
                '湖北经济学院',
                '湖北科技学院',
                '湖北警官学院',
                '湖北理工学院']
            },
            series: [{
                name: '报考率',
                type: 'pie',
                selectedMode:'single',
                radius:['10%','30%'],
                label: { 
                    position: 'inner' // 显示位置
                        },
                labelLine:{
                    show:false
                },
                data:[
                    {value:225,name:'高级语言程序设计'},
                    {value:201,name:'高等数学'},
                    {value:179,name:'c语言程序设计'}
                ] 
        },
        {
            name:'专业名称',
            type:'pie',
            selectedMode:'single',
            radius:['40%','55%'],
            data:[
                    {value:179,name:'江汉大学'},
                    {value:46,name:'湖北工程学院'},
                    {value:138,name:'汉口学院'},
                    {value:35,name:'湖北经济学院'},
                    {value:28,name:'湖北科技学院'},
                    {value:81,name:'湖北警官学院'},
                    {value:98,name:'湖北理工学院'}
            ]
        }]
    };
    myChart1.setOption(option1);// 为myChart1对象加载数据
    myChart2.setOption(option2);// 为myChart2对象加载数据
	echarts.connect([myChart1,myChart2]);

    myChart1.on('datazoom',function(params){
        console.log(startValue,endValue,startPercent,endPercent);
        option2.dataZoom[0].start=startPercent;
        option2.dataZoom[0].end=endPercent;
        myChart2.setOption(option2);
    });


    myChart1.on('click',function(params){
        var yt=alert("鼠标单击事件，您刚才单击了："+params.name);
        window.alert("将为您打开一个新窗口，搜索关键词："+params.name);
        window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
    });
    window.addEventListener("resize",function(){
        myChart1.resize();
    });

    myChart2.on('click',function(params){
        var yt=alert("鼠标单击事件，您刚才单击了："+params.name);
        window.alert("将为您打开一个新窗口，搜索关键词："+params.name);
        window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name))
    });
    window.addEventListener("resize",function(){
        myChart2.resize();
    });

    </script>
</body>
</html>