echarts 自定义鼠标划过的显示与自定义legend

option.tooltip.formatter 修改了鼠标划过显示效果
效果：

var legendData = ['concentrationAct','concentrationMet']
var series = [{name: legendData[0],type: 'line',symbol:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',color:'#000',},{name: legendData[1],color:'#000',type: 'line',smooth:false,   //关键点，为true是不支持虚线的，实线就用trueitemStyle:{normal:{lineStyle:{width:2,type:'dotted'  //'dotted'虚线 'solid'实线}}},}
]var option = {// color: ['#ccc','#ccc','#C296F9', '#75C88C','red','yellow'],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},backgroundColor: 'rgba(51, 51, 51, 0.6)',borderRadius: '6',formatter: function(data){var html = '';for (var i = 0; i < data.length; i++) {var markBg = data[i].marker,value = data[i].value ? data[i].value.toFixed(1) :'-',color = data[i].color;var dottedline = '<div style="display:inline-block;top: -2px;margin-right:5px;width:30px;height:2px;border:1px dashed '+color+';position:relative; "><div style="display:inline-block;position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-6px;">'+markBg+'</div></div>'var solidline = '<div style="display:inline-block;top: -2px;margin-right:5px;width:30px;height:2px;border:1px solid '+color+';position:relative; "><div style="display:inline-block;position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-6px;">'+markBg+'</div></div>'if(data[i].seriesId.charAt(data[i].seriesId.length-1)  == 0){var hoverStyle = solidlinevar nameDesc = $.i18n.prop('concentrationAct')}else if(data[i].seriesId.charAt(data[i].seriesId.length-1) == 1){var hoverStyle = dottedlinevar nameDesc = $.i18n.prop('concentrationMet')}html +=  '<div style="font-size: 12px;line-height: 14px;margin-bottom:10px">'+hoverStyle + '<span style="margin-left:5px">'+data[i].seriesName + nameDesc +'</span><span style="margin:0 10px;color:rgba(255,255,255,0.3)">|</span>  '+value+ '  ('+$.i18n.prop('unit1')+')</div>'}data.marker = '<div>'+'<div style="margin:20px;font-weight: bold;font-size: 14px;line-height: 20px;">'+data[0].axisValue+'</div>' +'<div style="margin:20px;">'+html+'</div>'+'</div>'console.log(data.marker);return data.marker;},},legend: legendData,grid: {top:'15%',left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: option.xAxis,},yAxis: {type: 'value'},series: series};

echarts 自定义鼠标划过的显示与自定义legend相关推荐

【前端图表】echarts散点图鼠标划过散点显示信息
在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...
去除ECharts圆环鼠标悬停时中间显示的文字
ECharts中鼠标悬浮到图形元素上时,一般会出现高亮的样式,主要是通过 emphasis 属性来自定义,series中有下述代码的时候,鼠标悬停到图形元素上时,会在图形的中间位置显示图形块对应的文字 ...
html自定义指针,如何自定义鼠标指针怎样在wpf中自定义鼠标指针
如何在ppt中自定义鼠标指针的形状? 魔兽世界怎么自定义鼠标指针在系统控制面板里面鼠标属性指针里面改就可以了下面有个浏览可以自定义换图案怎样在网页中设定一整套自定义的鼠标指针? 麻烦了 ...
html代码怎么image标签里加鼠标形状变成手掌样式,给html标签加上鼠标划过小手样式...
给html标签加上鼠标划过小手样式方法:给当前标签增加样式 style="cursor:pointer;" eg:增加返回箭头样式,给箭头增加小手 - 在style中添加curs ...
DuiLib 实现tooltip自定义鼠标提示窗口
问题: DuiLib 默认的控件鼠标提示只支持字符串,在实际工作需要中发现,只是字符串并不够用,在鼠标悬停的提示中想要有图片或者动图或者多文本的信息显示,所以需要增加ToolTip的自定义窗口处理. ...
web前端中——this指向以及this的应用，函数的调用——this代码举例说明——举例：当鼠标划到列表上时，出现div内容，当鼠标移开列表时，div隐藏
一: //this:这个 //想要知道this代表着什么可以直接在中输入alert(this); //由此可以看出window是JS中的"老大" eg:alert(1);其实就是w ...
echarts修改鼠标悬停在节点上时显示的内容，自定义鼠标悬停显示内容
首先看一下效果,如下图所示: 代码部分: 1.在option对象下的tooltip对象中添加formatter函数,代码如下: var option = {tooltip: {trigger: 'it ...
echarts formatter鼠标悬停显示信息
由于echarts中柱状图,鼠标放上去默认显示的是x轴名称以及y轴值. 而我现在需要再添加一些显示信息. 下面是操作: 在tooltip对象中补充trigger: "axis",属 ...
[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
Extjs 中鼠标划过悬浮效果的显示
鼠标划过gridpanel 单元格的时候自动将数据内容悬浮显示效果如图所示: 如果要做到这种效果只需要简单的两部操作即可 1.在初始化的时候调用此方法. Ext.QuickTips.init()// ...

echarts 自定义鼠标划过的显示与自定义legend

echarts 自定义鼠标划过的显示与自定义legend相关推荐

最新文章

热门文章

echarts 自定义鼠标划过的显示 与 自定义legend

echarts 自定义鼠标划过的显示 与 自定义legend相关推荐

最新文章

热门文章

echarts 自定义鼠标划过的显示与自定义legend

echarts 自定义鼠标划过的显示与自定义legend相关推荐