绘制一个多表联动图主题是专升本目标院校报率比-CSDN博客

本文链接：https://blog.csdn.net/2401_83182791/article/details/138067593
!DOCTYPE html>

<html>



<head>

    <script src="js/echarts.min.js" charset="utf-8"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main1" style="width: 600px;height:500px;"></div>

    <div id="main2" style="width: 600px;height:500px;"></div>

    <script type="text/javascript">

        var myChart1 = echarts.init(document.getElementById('main1'));

        var app = {};

        option1 = {

            title:{

                text:'专升本学院选择情况',

                left:'center'

            },

            tooltip:{

                trigger:'item',

                formatter:'{a}<br/>{b}:{c}{d}%'

            },

            legend:{

                orient:'vertical', //图例列表的布局朝向。'horizontal''vertical'

                left:'left',

                data:['武汉工程学院','湖北商贸学院','武汉晴川学院','武汉商学院','武汉东湖学院']

            },

            series:[

                {

                    name:'专升本学院选择情况',

                    type:'pie',

                    radius:'55%',

                    center:['50%','60%'],

                    data:[

                        {value:750,name:'武汉工程学院'},

                        {value:310,name:'湖北商贸学院'},

                        {value:234,name:'武汉晴川学院'},

                        {value:135,name:'武汉商学院'},

                        {value:300,name:'武汉东湖学院'},

                    ],

                    emphasis:{

                        itemStyle:{

                            shadowBlur:10,

                            shadowOffsetX:0,

                            shadowColor:'rgba(0,0,0,0.5)'

                        }

                    }

                }

            ]

        };

        var myChart2 = echarts.init(document.getElementById('main2'));

       

       

        var option2 ={

            title:{  //标题组件

                text:'专升本各学院数据',



            },

            legend:{

                top:30,

                data:['2020专升本数据','2021专升本数据','2022专升本数据','2023专升本数据']},

       

            xAxis: {

                type: 'category',

                data: ['武汉工程学院','湖北商贸学院','武汉晴川学院','武汉商学院','武汉东湖学院']

            },

            yAxis: {

                type: 'value'

            },

            series: [

                {

                    name :'2020专升本数据',

                    data:[5,6,7,8,0],

                    type:'bar'

                },

                {

                    name :'2021专升本数据',

                    data:[3,3,6,2,9],

                    type:'bar'

                },

                {

                    name :'2022专升本数据',

                    data:[4,4,4,5,8],

                    type:'bar'

                },

                {

                    name :'2023专升本数据',

                    data:[5,5,4,6,9],

                    type:'bar'

                },

            ]

        }

       

        app.currentIndex = -1;



        setInterval(() => {

            var dataLen = option1.series[0].data.length;

            //取消之前高亮的图形

            myChart1.dispatchAction({

                type:'downplay',

                seriesIndex:0,

                dataIndex:app.currentIndex

            });

            app.currentIndex = (app.currentIndex + 1) % dataLen;

            //高亮当前图形

            myChart1.dispatchAction({

                type:'highlight',

                seriesIndex:0,

                dataIndex:app.currentIndex

            });

            //显示tooltip

            myChart1.dispatchAction({

                type:'showTip',

                seriesIndex:0,

                dataIndex:app.currentIndex

            })

        }, 1000);



        option1 && myChart1.setOption(option1);

        myChart1.setOption(option1);

        myChart2.setOption(option2);

        myChart.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(){

            myChart.resize();

        });

   

    </script>

</body>

</html>