echarts折线图 自定义提示框 及点击事件

本文介绍了如何使用Echarts库在Vue.js应用中创建折线图,并详细讲解了如何定制提示框显示内容以及设置点击事件处理函数,提供了完整的示例代码帮助开发者实现交互式图表功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script type="text/javascript">
    // 图表数据准备
    var xArr = [<?php foreach($times as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
    // console.log(xArr)
    var yArr = [<?php foreach($pm as $v){; ?>"<?php echo $v ?>",<?php }; ?>]
    // console.log(yArr)
    // 设置提示框显示内容
    var xx = ""
    xx = [<?php foreach($alls as $k => $v){ ; ?> "<?php echo  '考试时间:' .  $v['grade_time'] . '<br/>' . '考试分数:' . $v['grade'] . '<br/>' . '分数排名:' . $v['weici'] . '<br/>' . '当前院校:' . $v['schoo
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值