目录
**【写在前面】**这下我又不得不说了，还是客户现场使用时想查询一周的数据，查询时候发现页面居然要等20多秒，这是个人都得崩溃吧，然后就开始排查这块业务代码模块，主要体现在两个方面：
A.接口请求时间过长(约8秒)，有优化的空间
B.前端一次性调用了四次接口，分别查询了四组数据（需要优化）
正因为有上述B的需求，所以特意针对点击echarts图例点击触发接口调用。
涉及知识点：legendselectchanged、Echarts的legend属性、Echarts图例、legend点击事件、echarts多线共存。
【版权声明】因个人创作经常被爬取到其他网站，特此声明，本人暂时只在CSDN平台创作，博主名为：《拄杖盲学轻声码》
先实现一个最简单的echarts，多条线一起的曲线图，如下图所示四条线同属一个维度。
具体实现代码如下：
var resultData1 = {
status: 200,
data: {
data_current: [{
"value": 143,
"record_time": "2022-03-04 12:00:00"
}, {
"value": 153,
"record_time": "2022-03-04 13:00:00"
}, {
"value": 133,
"record_time": "2022-03-04 18:00:00"
}],
data_pevone: [{
"value": 123,
"record_time": "2022-03-04 12:00:00"
}, {
"value": 103,
"record_time": "2022-03-04 13:00:00"
}, {
"value": 113,
"record_time": "2022-03-04 18:00:00"
}],
data_pevthree: [{
"value": 123,
"record_time": "2022-03-04 12:00:00"
}, {
"value": 123,
"record_time": "2022-03-04 13:00:00"
}, {
"value": 223,
"record_time": "2022-03-04 14:00:00"
}, {
"value": 113,
"record_time": "2022-03-04 15:00:00"
}, {
"value": 113,
"record_time": "2022-03-04 18:00:00"
}],
data_pevweek: [{
"value": 43,
"record_time": "2022-03-04 11:00:00"
}, {
"value": 63,
"record_time": "2022-03-04 13:00:00"
}, {
"value": 66,
"record_time": "2022-03-04 14:00:00"
}, {
"value": 59,
"record_time": "2022-03-04 15:00:00"
}, {
"value": 43,
"record_time": "2022-03-04 18:00:00"
}],
data_pevself: []
},
message: ""
};
var lineChartBaseInfo = {
data_current: {
modulename: '当前值',
color: '136, 0, 21',
rangDay: 0,
},
data_pevone: {
modulename: '上个工作日',
color: '233, 128, 45',
rangDay: 1,
},
data_pevthree: {
modulename: '前三个工作日',
color: '54, 93, 251',
rangDay: 3,
},
data_pevweek: {
modulename: '前一周',
color: '191, 24, 109',
rangDay: 7,
},
data_pevself: {
modulename: '自选时间',
color: '161, 24, 169',
rangDay: 0,
},
}
var lineCharts = echarts.init(document.getElementById('lineCharts'));
var _iconPath = "path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z";
// var _iconPath = "path://M512 139.81262864a286.42534744 286.42534744 0 1 0 286.42534744 286.42534744 286.42534744 286.42534744 0 0 0-286.42534744-286.42534744z m0 477.3755789a190.95023144 190.95023144 0 1 1 190.95023144-190.95023146 190.95023144 190.95023144 0 0 1-190.95023144 190.95023146z";
var _icon = 'roundRect';
var legendData = [], seriesData = []; //定义变量
var newDataList = {
data_current: resultData1.data.data_current,
data_pevone: resultData1.data.data_pevone,
data_pevthree: resultData1.data.data_pevthree,
data_pevweek: resultData1.data.data_pevweek,
data_pevself: resultData1.data.data_pevself,
};
//赋值操作
$.each(newDataList, function (indexInArray, valueOfElement) {
legendData.push({
name: lineChartBaseInfo[indexInArray]['modulename'],
icon: _iconPath
});
if (valueOfElement != null) {
var _data = $.map(valueOfElement, function (val, idx) {
return {
name: new Date(val.record_time).toString(),
value: [val.record_time, val.value]
}
});
seriesData.push({
name: lineChartBaseInfo[indexInArray]['modulename'],
data: _data,
type: "line",
smooth: true,
// smoothMonotone: "x",
cursor: "pointer",
// showSymbol: false,
itemStyle: { normal: { label: { show: true } } },
showSymbol: true,
lineStyle: {
shadowColor: "rgba(18,61,172,0.5)",
shadowBlur: 10
}
})
}
});
var option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
backgroundColor: '#fff',
title: {
text: '健康总分(100001)_指标历史曲线',
textStyle: {
color: '#666',
fontSize: 16,
},
top: '10px',
left: '10px',
},
legend: {
data: legendData,
top: '10px',
right: '20px',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: "#898989",
lineHeight: 15
},
selected: { //在这里设置默认展示就ok了
'当前值': true,
'上个工作日': false,
'前三个工作日': false,
'前一周': false,
'自选时间': false
},
type: "scroll",
},
dataZoom: [{
type: 'inside',
show: true,
xAxisIndex: [0],
}],
tooltip: {
backgroundColor: "#fff",
trigger: "axis",
axisPointer: {
type: "line"
},
textStyle: {
color: "#565656",
lineHeight: 28
},
confine: true,
padding: 12,
formatter: function (params) {
}
},
grid: {
left: 20,
right: 60,
top: 60,
bottom: 20,
containLabel: true
},
xAxis: {
name: "时间",
type: "time",
boundaryGap: true,
axisLabel: {
color: "#a0a9bc",
},
splitLine: {
lineStyle: {
type: "dashed"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
},
yAxis: {
name: "值",
nameTextStyle: {
color: "gray"
},
type: "value",
axisLabel: {
color: "#a0a9bc",
inside: true,
margin: 0,
verticalAlign: "bottom"
},
splitLine: {
lineStyle: {
type: "dashed"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: seriesData
};
lineCharts.clear();
lineCharts.setOption(option);
这个是在所有数据返回速度很快的情况下可以直接拿到的，但是如果数据量过于庞大，那么对页面来说直接拿4条数据的过程无疑是个漫长的等待。
设置legend的selected属性，将当天的设置为true，其他的设置为false即可，设置完后如下所示：
selected: {
//在这里设置默认展示就ok了
'当前值': true,
'上个工作日': false,
'前三个工作日': false,
'前一周': false,
'自选时间': false
},
首先说一下这边用到的图例点击事件为legendselectchanged，但是在触发前记得加上off，主要目的就是为了防止二次触发，和click事件一样。如下所示应用：
lineCharts.off(‘legendselectchanged’).on(‘legendselectchanged’, function (params) {
//触发后执行的内容
});
也就是在这个执行内容里面我们可以调用接口，从而实现echarts点击图例触发接口调用的目的。
具体实现效果如下：
具体实现代码如下：
lineCharts.off('legendselectchanged').on('legendselectchanged', function (params) {
//调用接口调整源数据
debugger;
var _pevType = 0;
if (params.selected[params.name]) {
//表示true
if (params.name.indexOf("上个工作") > -1) {
layer.msg("长得帅的黄大大点击了:" + params.name);
//此处可以调用接口查询数据
} else if (params.name.indexOf("当前") > -1) {
layer.msg("长得帅的黄大大点击了:" + params.name);
//此处可以调用接口查询数据
} else if (params.name.indexOf("周") > -1) {
layer.msg("长得帅的黄大大点击了:" + params.name);
//此处可以调用接口查询数据
} else if (params.name.indexOf("三") > -1) {
layer.msg("长得帅的黄大大点击了:" + params.name);
//此处可以调用接口查询数据
}
} else {
//表示false，隐藏
}
console.log('点击了', params.name);
// do something
});
百度网盘提取地址：
链接：https://pan.baidu.com/s/1bm50Dbq-AqZkuqgIgrUlgw
提取码：hdd6
123网盘提取地址（不限速）
链接：https://www.123pan.com/s/ZxkUVv-dFJ4.html
提取码：hdd6
喜欢博主的这篇文章的可以上皇榜支持一下博主哟！！！皇榜入口点击此处
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano
我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>
我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c
我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是
我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些