<!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>
Echarts鼠标单击跳转
最新推荐文章于 2024-08-29 18:02:56 发布