修改echarts鼠标放上去显示的数据

1、效果如下：x轴显示时分，鼠标放上去显示具体的日期和时分

2、从后台获取的数据如下：

3、需要给series里面的data做下处理。给chartDetailVOList加个数组datas,包含locTime和value字段名

var obj = JSON.parse(data); //转换成json对象
var ob={};obj.rows.forEach(item => {this.$set(item,'datas',[])item.chartDetailVOList.forEach(item2=>{ob={value:item2.temp,locTime:item2.locTime}item.datas.push(ob)})        })fillEcharts(obj.rows) //图表的方法

4、图表的设置

function fillEcharts(obj) {//其他设置//其他设置series: (function () {var series = [];for (var i = 0; i < obj.length; i++) {var item = {name: obj[i].tempTypeName,type: "line",symbol: 'circle',symbolSize: 6,lineStyle: {normal: {width: 2//折线粗细}},data:obj[i].datas  //设置新的datas数据包含日期和温度};series.push(item);}return series;})(),
}

5、设置鼠标放上去的效果

tooltip: {trigger: 'axis',show: true,// 自定义修改悬浮内容formatter: function (params) {var result = params[0].data.locTime;params.forEach(function (item) {result += '<br/>';result +='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +item.color +'"></span>';if (item.seriesIndex == 0) {result += '一区温度：' + '<b>' + item.value + '</b>'+'℃';}if(item.seriesIndex == 1){result += '二区温度：' + '<b>' + item.value + '</b>'+'℃';}});return result;}},

修改echarts鼠标放上去显示的数据相关推荐

ECharts 鼠标滑过显示的数据样式
// 自定义修改悬浮内容 tooltip: {formatter: function (params) {let result = params[0].name;params.forEach(func ...
echarts鼠标放上去不显示值
echarts鼠标放上去不显示值今天发现了一个bug,展示的是echarts圆环图,将鼠标放到图上不能显示值的问题. 方法很简单. 1,找到该echarts的代码. 2.插入以下代码. toolti ...
Jquery鼠标放上去显示全名
第一种方式使用mouseover.mouseout事件 // 鼠标滑过显示全名var origin_name;$('.task_name').mouseover(function() {origin ...
Echarts图表坐标轴文字太长，省略显示，鼠标放上显示全部（vue）
先上图,看效果(截图截不到鼠标小手
HTML 鼠标放上显示悬浮窗口
项目中用到的功能,在这里记录下, 方便日后复用. 鼠标悬停,出现一个悬浮框,悬浮框中可以自定义一些内容,使用 bootstrap 的 popover 插件实现.可以直接看参考资料中的文章,插件使用说明 ...
鼠标放上去显示的效果
效果: 鼠标放到元素上,然后显示,并且鼠标可以在果干上进行一个选择,鼠标离开过干后就消失. 如果我来做的话是会用js来做的,当鼠标移入的时候,会进行一个显示,鼠标移出的时候进行一个隐藏,肯定会比较麻烦 ...
div +css 添加鼠标放上去显示提示文字
有时候我们需要鼠标移到某个div,列表的某行某列或某个按钮上时显示出提示文字,此时我们只需设置title即可: 效果如图:
winform中鼠标放上去显示气泡提示信息
用ToolTip控件,为要显示提示信息的控件绑定到该控件即可. 操作方法: 先为窗体添加一个ToolTip控件,然后找到要绑定的控件属性,绑定该项 ToolTip toolTip1 = new Too ...
echart图表鼠标放上去显示百分比,保留一位小数
默认情况是这样的 tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)", ...

修改echarts鼠标放上去显示的数据

修改echarts鼠标放上去显示的数据相关推荐

最新文章

热门文章