echarts鼠标移上去显示数据
折线图为例,核心代码
<script src="/assets/webmaster/js/jquery.min.js"></script> <script src="/assets/webmaster/js/echarts.min.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('latest_pv')); // 指定图表的配置项和数据 var option = { xAxis: { type: 'category', data: ['{$d1}', '{$d2}', '{$d3}', '{$d4}', '{$d5}', '{$d6}', '{$d7}'] }, yAxis: { type: 'value' }, series: [{ data: [{$uv1}, {$uv2}, {$uv3}, {$uv4}, {$uv5}, {$uv6}, {$uv7}], type: 'line' }], tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } } }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
效果
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架