Echarts鼠标单击跳转

zzzzzyyyyttt

于 2024-04-15 11:35:07 发布

阅读量232

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2303_77733754/article/details/137774595

版权

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
 </head>
 <body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 1000px; height: 600px"></div>
	<script type="text/javascript">
		// 基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		// 指定图表的配置项和数据
 
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        var option = {
            color:['LimeGreen','DarkGreen','red','blue','Purple'],
            backgroundColor:'rgba(128,128,128,0.1)',
            title:{text:'某学院2022年专业招生情况汇总表',left:20,top:9},
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
                }
            },
            legend: {
                data: ['2022年招生'],
            },
            toolbox: {
                feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            xAxis:{data:['大数据','云计算','人工智能','软件技术','移动应用','计算机网络']},
            yAxis:{},
            series:[{
                name:'招生人数',
                type:'bar',
                barWidth:55,
                data:[350,200,210,466,200,135]
            }]
 
        };
            // 使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
        myChart.on('click',function (params){
            var yt=alert("鼠标单击事件,您刚才单击了:"+params.name);
            window.alaert("将为您打开一个新窗口,搜索关键字:"+params.name);
            window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name));         
        });
        window.addEventListener("resize",function(){
            myChart.resize();
        })
	</script>
</body>
 
</html>