| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <script src="js/echarts.js"></script> <!-- 确保路径正确 --> |
| <title>添加鼠标单击事件的柱状图</title> |
| </head> |
| <body> |
| <div id="main" style="width: 800px; height: 600px"></div> |
| <script type="text/javascript"> |
| var myChart = echarts.init(document.getElementById("main")); //基于准备好的dom，初始化ECharts图表 |
| var option = { //指定图表的配置项和数据 |
| color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'], |
| backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1 |
| title: { |
| text: '某学院2024年专业招生情况汇总表', left: 70, top: 9 |
| }, |
| tooltip: { show: true }, |
| legend: { |
| data: ['2024年招生'], left: 422, top: 8 |
| }, |
| xAxis: { //配置x轴坐标系 |
| data: ["大数据", "云计算", "ERP", "人工智能", "软件开发", "移动开发", "网络技术"] |
| }, |
| yAxis: {}, //配置y轴坐标系 |
| series: [{ //配置数据系列 |
| name: '招生人数', |
| type: 'bar', |
| barWidth: 55, //设置柱状图中每个柱子的宽度 |
| data: [350, 200, 66, 210, 466, 200, 135] |
| }] |
| }; |
| myChart.setOption(option); //使用刚指定的配置项和数据显示图表 |
| |
| //回调函数处理鼠标点击事件并跳转到相应的百度搜索页面 |
| myChart.on('click', function (params) { |
| var yt = alert("鼠标单击事件,您刚才单击了:" + params.name); |
| window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name)); |
| }); |
| |
| //使图表自适应窗口的大小 |
| window.addEventListener("resize", function () { |
| myChart.resize(); |
| }); |
| </script> |
| </body> |
| </html> |
