首页 > 其他分享 >echarts折线修改鼠标移动上去的内容

echarts折线修改鼠标移动上去的内容

时间:2023-06-03 14:45:00浏览次数:37  
标签:鼠标 tooltip 折线 htmlStr var formatter echarts

tooltip : {
            trigger: 'axis',
            backgroundColor :'#FFFFFF',
            // textStyle:{
            //     color:'#E5353B ',
            //     fontSize :'16px'
            // },
             formatter: function (params, ticket, callback) {
                var htmlStr = '';
                for(var i=0;i<params.length;i++){
                    var param = params[i];
                    var xName = param.name;//x轴的名称
                    var seriesName = param.seriesName;//图例名称
                    var value = param.value;//y轴值
                    var color = param.color;//图例颜色
                    if(i===0){
                        //  htmlStr += '笔数:' + value + '笔<br/>';
                          htmlStr += '<div style="font-size:16px;color:#E5353B; text-align: center;">笔数:' + value + '笔</div>';
                          htmlStr += '<div style="font-size:12px;color:#9F9F9F; text-align: center;">时间:' + xName + '</div>';
                        //  htmlStr +='时间:' + xName + '<br/>';//x轴的名称
                    }
                    htmlStr +='<div>';
                  
                    htmlStr += '</div>';
               
                     return htmlStr;
                }
          
                },
             
                },
tooltip 中的
formatter属性可以自行编辑,传入的函数返回值为鼠标移动上去的内容,具体更多用法参照官网

标签:鼠标,tooltip,折线,htmlStr,var,formatter,echarts
From: https://www.cnblogs.com/xiaobaizitaibai/p/17453964.html

相关文章

  • ECharts点击横坐标事件实现超链接跳转
    需求:微博排行榜,横坐标展示出了微博对应的id,现在需要通过点击横坐标来实现跳转到对应的微博页面。设置横坐标中的triggerEvent属性为true;xAxis:{...triggerEvent:true,...},添加on点击事件。thisChart.on("click",function(params){window.location.......
  • WPF鼠标形状的设置
    1、使用Cursor属性设置鼠标形状<ButtonCursor="Hand"/>鼠标形状的枚举数值如下所示:publicenumCursorType{None=0,No=1,Arrow=2,AppStarting=3,Cross=4,Help=5,IBeam=6,SizeAll=7,SizeNESW=8,SizeN......
  • qt——不写鼠标事件,获取鼠标点击窗口后的坐标位置
               ......
  • element ui 预览图片的时候滚动鼠标放大缩小, 重新打开的时候恢复原来大小
    <template><div><el-button@click="openPreview">预览图片</el-button><el-dialog:visible.sync="dialogVisible":close-on-click-modal="false":before-close="resetPreview"><im......
  • Echarts——如何默认选中图表并显示tooltip
    前言参考资料实现预览地址内容很简单借助于dispatchAction来触发事件;import*asechartsfrom'echarts';varchartDom=document.getElementById('main');varmyChart=echarts.init(chartDom);varoption;option={tooltip:{trigger:'axis'......
  • echarts更新数据后报错 There is a chart instance already initialized on the dom
    产生原因使用Echarts插件的时候,多次加载会出现Thereisachartinstancealreadyinitializedonthedom.的警告,表示DOM上已经初始化了一个图表实例。解决方案定义一个全局变量,在初始化之前先判断该实例是否存在,若存在,先销毁。varmyChart;//全局变量functiondrawChart(......
  • 当鼠标滑过文本框自动选中输入框内容JS代码
    代码:<html><head><title>响应鼠标自动选中文本框内容</title></head><body><inputid="a"type="text"value="请输入搜索词"οnmοuseοver="selectInputContent(this.id)"/><scripttype="text/......
  • echarts入门教程(超级详细带案例)
    ————————————————版权声明:本文为CSDN博主「争儿不脱发」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/m0_55734030/article/details/127559434一.echarts的介绍1、echarts是一款基于JavaScript的数据可......
  • win11鼠标能动但是无法点击怎么办 win11鼠标能动但是无法点击解决方案(WSG实测可以)
    win11用户在使用电脑的时候遇到了鼠标能动但是无法点击的情况,像这种情况要怎么办呢?你先按住ctrl+alt+delete这组快捷键,然后打开任务管理器,接着选择运行新任务,输入explorer.exe,之后系统就会自动刷新桌面缓存,这个时候应该问题就解决了。如果不行的话,应该是鼠标驱动出问题了,建议大家......
  • idea项目设置鼠标右键点击文件夹通过IDEA打开
    每次打开idea项目是每次都要打开idea再手动选择项目,直接设置成右键打开会很方便。效果图:首先win+R输入regedit打开注册表打开注册表后找到如下路径:计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Directory\shell右键->新建->项(k),命名为IDEA3. 在IDEA里,新建字符串值,起名......