echarts dataZoom事件

怎样在echarts dataZoom事件中获取到数据的dataIndex?

1个回答

sandianshui1802
sandianshui1802 谢谢!
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts数据区域缩放(datazoom)缩放条能否显示散点图?
![图片说明](https://img-ask.csdn.net/upload/201711/05/1509816781_933518.jpg)
echart datazoom在pc端正常,移动端无效,不能手势缩放数据
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value' }, dataZoom: { type: 'inside' }, series: [ { name:'邮件营销', type:'line', stack: '总量', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack: '总量', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'line', stack: '总量', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接访问', type:'line', stack: '总量', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜索引擎', type:'line', stack: '总量', data:[820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ```
echarts.js怎么设置时间的显示格式?
![图片说明](https://img-ask.csdn.net/upload/201912/22/1576982445_957470.png)<br> 如图,提示想让提示框里显示的时间的格式和下面一样只显示时分秒该怎么弄呢?<br> 下面是代码: ``` let myChart = echarts.init(document.getElementById('timeShaft')); var data = [['2009/6/12 16:09:00', '2009/6/12 16:09:40', 1, 'A','字幕'], ['2009/6/12 16:10:00', '2009/6/12 16:10:10', 1, 'B','字幕'], ['2009/6/12 16:12:00', '2009/6/12 16:12:40', 1, 'C','字幕'], ['2009/6/12 16:18:00', '2009/6/12 16:18:10', 1, 'D','字幕']]; var colorList = ['#4f81bd', '#9bbb59', '#604a7b']; // , '#e46c0b' '#3a3d44', data = echarts.util.map(data, function (item, index) { return { value: item, itemStyle: { normal: { color: colorList[index % 3] } } }; }); function renderItem(params, api) { var yValue = api.value(2); var start = api.coord([api.value(0), yValue]); var size = api.size([api.value(1) - api.value(0), yValue]); var style = api.style(); return { type: 'rect', shape: { x: start[0], y: start[1], width: size[0], height: size[1] }, style: style }; } let option = { title: { // text: 'Profit', left: 'center' }, tooltip: { }, xAxis: { scale: true, type:'time' // splitLine:{show:false}, // 网格线 }, yAxis: { splitLine:{show:false}, // 网格线 axisLabel:[1,2] }, dataZoom: [ { type: 'slider', start: 0, end: 100 }, { type: 'inside', start: 0, end: 100 } ], series: [{ type: 'custom', renderItem: renderItem, label: { normal: { show: true, position: 'top' } }, dimensions: ['from', 'to'], encode: { x: [0, 1], y: 2, tooltip: [0, 1], itemName: 4 }, data: data }], grid: { left: '20px', right: '20px', top: '4px', bottom: '20px' } }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ```
echarts横坐标日期自动递增,显示数据。
![图片说明](https://img-ask.csdn.net/upload/201810/12/1539326130_588326.png) ![图片说明](https://img-ask.csdn.net/upload/201810/12/1539326189_760939.png) 第二张图片是放大后的效果,现在需求是,把2018/08/27 20:30 到2018/08/28 0:30 之间缺失的时间也显示出来,数据间隔30分钟,数据库里面没有中间这段缺失数据,但是前端页面要做显示,该怎么做呢?求大神赐教! 前端部分代码: $.post(url, {bianhao:bianhao,datatype:datatype,kstime:kstime,endtime:endtime}, function(data){ //alert(data['data'][0]['nDate']); for(var i=0;i<data['data'].length;i++){ //alert(data['data'][i]['ndate']); riqi.push(timestampToTime(data['data'][i]['nDate'])); shujv.push(data['data'][i]['data']); } maxvalue=shujv.max(); minvalue=shujv.min(); sumvalue=shujv.sum(); pjss=(sumvalue/shujv.length).toFixed(2); $('.pjss').text(pjss); $('.zgss').text(maxvalue); $('.zdss').text(minvalue); //图表 myChart = echarts.init(document.getElementById('tubiao')); myChart.showLoading({ text :"图表数据正在努力加载..." }); var option = { toolbox: { left: 'center', feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, tooltip: { trigger: 'axis' }, dataZoom: [{ type: 'inside' }], xAxis: { type: 'category', data: riqi }, yAxis : [ { scale: true, precision:1, power:1, type : 'value' } ], series: [{ data: shujv, type: 'line', markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] } }] }; myChart.hideLoading(); myChart.setOption(option); })
百度echarts官方实例动态数据怎么跑起来?一直粘贴官方代码,就是跑不起来。
这是基础代码,option是空的 ``` <div id="main" style="height:400px"></div> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require ( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载 ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { }; myChart.setOption(option); } ); </script> ``` 这是官方代码(进入百度echarts官网,实例,其他,动态数据即是): ``` option = { title : { text: '动态数据', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['最新成交价', '预购队列'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, dataZoom : { show : false, start : 0, end : 100 }, xAxis : [ { type : 'category', boundaryGap : true, data : (function (){ var now = new Date(); var res = []; var len = 10; while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/,'')); now = new Date(now - 2000); } return res; })() }, { type : 'category', boundaryGap : true, data : (function (){ var res = []; var len = 10; while (len--) { res.push(len + 1); } return res; })() } ], yAxis : [ { type : 'value', scale: true, name : '价格', boundaryGap: [0.2, 0.2] }, { type : 'value', scale: true, name : '预购量', boundaryGap: [0.2, 0.2] } ], series : [ { name:'预购队列', type:'bar', xAxisIndex: 1, yAxisIndex: 1, data:(function (){ var res = []; var len = 10; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; })() }, { name:'最新成交价', type:'line', data:(function (){ var res = []; var len = 10; while (len--) { res.push((Math.random()*10 + 5).toFixed(1) - 0); } return res; })() } ] }; var lastData = 11; var axisData; clearInterval(timeTicket); timeTicket = setInterval(function (){ lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1); lastData = lastData.toFixed(1) - 0; axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,''); // 动态数据接口 addData myChart.addData([ [ 0, // 系列索引 Math.round(Math.random() * 1000), // 新增数据 true, // 新增数据是否从队列头部插入 false // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头 ], [ 1, // 系列索引 lastData, // 新增数据 false, // 新增数据是否从队列头部插入 false, // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头 axisData // 坐标轴标签 ] ]); }, 2100); ``` 这段官方代码要怎么放?或者直接给我一份完整的html最好不过了
ECharts两组数据,数据量不同,当鼠标移动只有一组数据的地方的时候会报错
如题,我需要用Echarts做个折线图,里面有两组数据,但是其中一组数据的数据量较少,到了后面会只有一剩一组数据,当鼠标一上去的时候就会报错 以下是代码 js ``` $(function(){ $("#try").click(getData); }) function getData(){ var name = $("#try").val(); set_dates(name); set_prices1(name); set_prices2("诚德"); show_line(); } function set_dates(name){ $.ajax({ "url":path+"/stock/dates.do", "type":"post", "dataType":"json", "data":{"name":name}, "success":function(result){ if(result.state==0){ var dates = result.data; addCookie("dates",dates,2); } }, "error":function(){ console.log("获取失败"); } }) } function set_prices1(name){ $.ajax({ "url":path+"/stock/prices.do", "type":"post", "dataType":"json", "data":{"name":name}, "success":function(result){ if(result.state==0){ var prices = result.data; console.log(prices); addCookie("prices1",prices,2); } }, "error":function(){ console.log("获取失败"); } }) } function set_prices2(name){ $.ajax({ "url":path+"/stock/prices.do", "type":"post", "dataType":"json", "data":{"name":name}, "success":function(result){ if(result.state==0){ var prices = result.data; console.log(prices); addCookie("prices2",prices,2); } }, "error":function(){ console.log("获取失败"); } }) } ``` jsp ``` <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <script type="text/javascript" src="echarts/jquery.min.js"></script> <script type="text/javascript" src="echarts/echarts.js"></script> <script type="text/javascript" src="scripts/for.js"></script> <script type="text/javascript" src="scripts/cookie_util.js"></script> <script type="text/javascript" src="scripts/path.js"></script> </head> <body style="font-size: 30px;"> <!-- 为ECharts准备一个具备大小(宽高)的DOM --> <div id="main" style="width: 600px; height: 400px"></div> <input id="try" type="button" value="宏旺"> <script type="text/javascript"> //基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); //指定图表的配置项和数据 function show_line(){ var dates = getCookie("dates").split(","); var data2 = getCookie("prices1").split(","); var data1 = getCookie("prices2").split(",") console.log("日期集合为:"+dates); console.log("数字集合3为:"+data2); console.log("数字集合2为:"+data1); option = { title : { text : '折线对比图示例', left : 'center' }, tooltip : { trigger : 'axis', formatter:function(params)//数据格式 { var relVal = params[0].name+"<br/>"; relVal += params[0].seriesName+ ' : ' + params[0].value+"<br/>"; relVal +=params[1].seriesName+ ' : ' +params[1].value+"<br/>"; return relVal; } }, legend : { left : 'left', textStyle : { color : '#fff' }, data : [ '第2个数据', '第1个数据' ] }, grid : { left : '10%', right : '10%', bottom : '15%' }, xAxis : { type : 'category', name : 'x', axisLine : { onZero : false }, splitLine : { show : false }, splitLine : { show : false }, data : dates }, grid : { left : '3%', right : '4%', bottom : '3%', containLabel : true }, yAxis : { type : 'log', name : 'y', min:7000, max:15000, scale : true, splitArea : { show : true } }, dataZoom : [ { textStyle : { color : '#8392A5' }, handleIcon : 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize : '80%', dataBackground : { areaStyle : { color : '#8392A5' }, lineStyle : { opacity : 0.8, color : '#8392A5' } }, handleStyle : { color : '#fff', shadowBlur : 3, shadowColor : 'rgba(0, 0, 0, 0.6)', shadowOffsetX : 2, shadowOffsetY : 2 } }, { type : 'inside' } ], series : [ { name : '第2个数据', type : 'line', data : data2, }, { name : '第1个数据', type : 'line', data : data1, }, ] }; //使用刚制定的配置项和数据显示图表 myChart.setOption(option); } </script> </body> </html> ``` 报错内容 ``` echartsDemo.jsp:42 Uncaught TypeError: Cannot read property 'seriesName' of undefined at formatter (echartsDemo.jsp:42) at ExtendedClass._showTooltipContent (echarts.js:58535) at ExtendedClass.<anonymous> (echarts.js:58415) at echarts.js:3357 at ExtendedClass._showOrMove (echarts.js:58329) at ExtendedClass._showAxisTooltip (echarts.js:58404) at ExtendedClass._tryShow (echarts.js:58301) at ExtendedClass.manuallyShowTip (echarts.js:58187) at callView (echarts.js:952) at ECharts.<anonymous> (echarts.js:946) ``` 第一次发表这种提问,语言组织能力有限,如果有大神看懂了,麻烦指导一下,谢谢
echarts 拖拽曲线图问题
![图片说明](https://img-ask.csdn.net/upload/201904/23/1556010072_889488.png) ``` <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> ``` ``` <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> </body> </html> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var symbolSize = 20; var data = [ [15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40] ]; option = { title: { text: 'Try Dragging these Points' }, tooltip: { triggerOn: 'none', formatter: function (params) { return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2); } }, grid: { }, xAxis: { min: -100, max: 80, type: 'value', axisLine: {onZero: false}, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { min: -30, max: 60, type: 'value', axisLine: {onZero: false}, }, dataZoom: [ { type: 'slider', xAxisIndex: 0, filterMode: 'empty' }, { type: 'slider', yAxisIndex: 0, filterMode: 'empty' }, { type: 'inside', xAxisIndex: 0, filterMode: 'empty' }, { type: 'inside', yAxisIndex: 0, filterMode: 'empty' } ], series: [ { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data } ] }; if (!app.inNode) { setTimeout(function () { // Add shadow circles (which is not visible) to enable drag. myChart.setOption({ graphic: echarts.util.map(data, function (item, dataIndex) { return { type: 'circle', position: myChart.convertToPixel('grid', item), shape: { cx: 0, cy: 0, r: symbolSize / 2 }, invisible: true, draggable: true, ondrag: echarts.util.curry(onPointDragging, dataIndex), onmousemove: echarts.util.curry(showTooltip, dataIndex), onmouseout: echarts.util.curry(hideTooltip, dataIndex), z: 100 }; }) }); }, 0); window.addEventListener('resize', updatePosition); } myChart.on('dataZoom', updatePosition); function updatePosition() { myChart.setOption({ graphic: echarts.util.map(data, function (item, dataIndex) { return { position: myChart.convertToPixel('grid', item) }; }) }); } function showTooltip(dataIndex) { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: dataIndex }); } function hideTooltip(dataIndex) { myChart.dispatchAction({ type: 'hideTip' }); } function onPointDragging(dataIndex, dx, dy) { data[dataIndex] = myChart.convertFromPixel('grid', this.position); // Update data myChart.setOption({ series: [{ id: 'a', data: data }] }); } ; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> ``` 想做个拖拽的动态图表 ajxa传输json方式做出了正常的曲线 图 拖拽的 没想明白 希望大神能详细点讲下
echarts获取mysql中的数据可视化,legend怎么才能跟柱状图的颜色对应起来?
``` <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'echart.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths : { echarts : 'http://echarts.baidu.com/build/dist' } }); // 使用 require([ 'echarts', 'echarts/chart/bar' ,'echarts/chart/line'// 使用柱状图就加载bar模块,按需加载 ], drewEcharts ); function drewEcharts(ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { color: ['#008b00', '#ffff00', '#ff7f00', '#cd0000','#0000cd'],//绿色,黄色,橙色,红色,蓝色 title:{ text: 'DECG', subtext: '物理量待定' }, //提示样式 tooltip : { show : true, trigger: 'axis', axisPointer: { //坐标轴指示器 crossStyle: { color: '#999' } } }, legend : { data: [{name: 'Good',textStyle:{color: '#008b00'}}, {name:'Watch',textStyle:{color: '#ffff00'}}, {name: 'Warning',textStyle:{color:'#ff7f00'}}, {name:'Abnormal value',textStyle:{color:'#cd0000'}}, {name:'Baseline',textStyle:{color:'#0000cd'}} ], orient: 'horizontal', x: 'center', y: 'bottom', padding: 0, itemWidth: 10, textStyle: { fontWeight: 'bold', fontSize:14 } }, grid: { left: '3%', right: '2%', top: '8%', bottom: '2%', containLable: true }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', //设置轴线属性 axisLine:{ lineStyle:{ color: '#4d4d4d' } }, axisLabel: { //x轴字体样式 interval:0, rotate:70, margin:2, textstyle: { color:"#222", fontSize: '16' }}, data :(function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", //web.xl中注册的Servlet的url-pattern data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].name); arr.push(result[i].name); } } }, error : function(errorMsg) { alert("图表请求数据失败!"); myChart.hideLoading(); } }) return arr; })() }], yAxis : [ { type : 'value', name: 'F/N', nameTextStyle:{//坐标轴标签设置 fontWeight: 'bold', fontiSize: '28' }, interval: 10, fontSize: '20', axisLine: { lineStyle:{ color: '#4d4d4d' } }, axisLabel: {//y轴字体样式 formatter: '{value}', textStyle: { color:"#222", fontSize: '16' } } }], series : [{ name : 'Good', type : 'bar', barGap: '1%', barCategoryGap: '10%', itemStyle:{ normal:{ color: function(params){ var index_num = params.data; //alert(param.value); if (index_num < 30){ return '#008b00'; //绿色 }else if (index_num>=30 && index_num<50){ return '#ffff00'; //黄色 }else if (index_num>=50 && index_num<60){ return '#ff7f00'; //橙色 }else{ return '#cd0000'; //红色 } } }, }, //barWidth: 10, data :(function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].num); arr.push(result[i].num); } } }, error : function(errorMsg) { alert("不好意思,大爷,图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() } , { name : 'Watch', type : 'bar', barGap: '1%', barCategoryGap: '10%', itemStyle:{ normal:{ color: function(params){ var index_num = params.data; //alert(param.value); if (index_num>=30 && index_num<50){ return '#ffff00'; //绿色 }else if (index_num < 30){ return '#008b00'; //黄色 }else if (index_num>=50 && index_num<60){ return '#ff7f00'; //橙色 }else{ return '#cd0000'; //红色 } } }, }, //barWidth: 10, data :(function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].num); arr.push(result[i].num); } } }, error : function(errorMsg) { alert("不好意思,大爷,图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() }, { name : 'Warning', type : 'bar', barGap: '1%', barCategoryGap: '10%', itemStyle:{ normal:{ color: function(params){ var index_num = params.data; //alert(param.value); if (index_num < 30){ return '#008b00'; //绿色 }else if (index_num>=30 && index_num<50){ return '#ffff00'; //黄色 }else if (index_num>=50 && index_num<60){ return '#ff7f00'; //橙色 }else{ return '#cd0000'; //红色 } } }, }, //barWidth: 10, data :(function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].num); arr.push(result[i].num); } } }, error : function(errorMsg) { alert("不好意思,大爷,图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() }, { name : 'Abnormal value', type : 'bar', barGap: '1%', barCategoryGap: '10%', itemStyle:{ normal:{ color: function(params){ var index_num = params.data; //alert(param.value); if (index_num < 30){ return '#008b00'; //绿色 }else if (index_num>=30 && index_num<50){ return '#ffff00'; //黄色 }else if (index_num>=50 && index_num<60){ return '#ff7f00'; //橙色 }else{ return '#cd0000'; //红色 } } }, }, //barWidth: 10, data :(function(){ var arr=[]; $.ajax({ type : "post", async : false, //同步执行 url : "bar.do", data : {}, dataType : "json", //返回数据形式为json success : function(result) { if (result) { for(var i=0;i<result.length;i++){ console.log(result[i].num); arr.push(result[i].num); } } }, error : function(errorMsg) { alert("不好意思,大爷,图表请求数据失败啦!"); myChart.hideLoading(); } }) return arr; })() }, { name: 'Baseline', type: 'line', smooth:true, yAxisIndex: 0, symbolSize:0, //拐点圆的大小 itemStyle:{ normal:{ color: '#0000cd', } }, data: [53,30,29,40,18,30,9,17,64,30,48,12,30,38,20,31,38,53,38,51,9,17] } ], //控制每次只显示固定柱子数目 dataZoom:[{ type:'inside',//inside,slider此处只列举inside start:0, end:9,//dataZoom-inside.start 和 dataZoom-inside.end 共同用 百分比 的形式定义了数据窗口范围。 xAxisIndex:0,//不指定时,当 dataZoom-inside.orient 为 'horizontal'时,默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值,建议显式指定。 filterMode:'none',//dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同,效果也不同。('filter','weakfilter','empty','none')http://echarts.baidu.com/option.html#dataZoom-inside zoomLock:true,//只能拖动不可缩放,若无需禁止缩放设置为false或者去除即可 }] }; myChart.setOption(option); // 为echarts对象加载数据 myChart.setOption(option); } sideBarChart.resize();//修改echarts容器大小 </script> </head> <body> <div id="main" style="height: 550px; width: 1100px"></div> </body> </html> ``` 在mysql中取出数据后,按照数值范围对数据进行分类,不同类别的数据显示不同颜色的柱子。 实现结果: ![图片说明](https://img-ask.csdn.net/upload/201907/16/1563266320_869864.png) 求教大神 怎么修改代码,让legend显示与柱子对应的颜色?
ECharts中示例无法动态更新
我在VS上copy了ECharts中的一个示例(如下),这个示例本应是动态更新的,但是我的就执行不了,原因是myChart.setOption(option);不能像示例中一样放在最后面, 要放在clearInterval(app.timeTicket);这句话前面才能显示出来图表,但是这样显示出来的图表就不会自动更新了,这是怎么回事?求高手解答 ``` var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '动态数据', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data:['最新成交价', '预购队列'] }, toolbox: { show: true, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, dataZoom: { show: false, start: 0, end: 100 }, xAxis: [ { type: 'category', boundaryGap: true, data: (function (){ var now = new Date(); var res = []; var len = 10; while (len--) { res.unshift(now.toLocaleTimeString().replace(/^\D*/,'')); now = new Date(now - 2000); } return res; })() }, { type: 'category', boundaryGap: true, data: (function (){ var res = []; var len = 10; while (len--) { res.push(len + 1); } return res; })() } ], yAxis: [ { type: 'value', scale: true, name: '价格', max: 30, min: 0, boundaryGap: [0.2, 0.2] }, { type: 'value', scale: true, name: '预购量', max: 1200, min: 0, boundaryGap: [0.2, 0.2] } ], series: [ { name:'预购队列', type:'bar', xAxisIndex: 1, yAxisIndex: 1, data:(function (){ var res = []; var len = 10; while (len--) { res.push(Math.round(Math.random() * 1000)); } return res; })() }, { name:'最新成交价', type:'line', data:(function (){ var res = []; var len = 0; while (len < 10) { res.push((Math.random()*10 + 5).toFixed(1) - 0); len++; } return res; })() } ] }; clearInterval(app.timeTicket); app.count = 11; app.timeTicket = setInterval(function (){ axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,''); var data0 = option.series[0].data; var data1 = option.series[1].data; data0.shift(); data0.push(Math.round(Math.random() * 1000)); data1.shift(); data1.push((Math.random() * 10 + 5).toFixed(1) - 0); option.xAxis[0].data.shift(); option.xAxis[0].data.push(axisData); option.xAxis[1].data.shift(); option.xAxis[1].data.push(app.count++); myChart.setOption(option); }, 2100); ```
为什么我的pyecharts柱形图表部署在flask后,横坐标由原来的文字标签变成数字了?
求助各位大佬!我是一个pyecharts小白,下面是我用flask部署pyecharts的代码。 ``` import pandas as pd from flask import Flask, render_template from pyecharts import options as opts from pyecharts.charts import Bar from pyecharts.charts import Timeline from pyecharts.charts import Pie app = Flask(__name__, static_folder="templates") data总=pd.read_csv('datazong.csv',encoding='utf-8') zuojia = pd.read_csv('zuojia.csv',encoding='gbk') X轴=[str(x) for x in zuojia.loc[:,'网络作家']] Y轴=[str(x) for x in zuojia.loc[:,'版税收入(万元)']] def bar_datazoom_inside() -> Timeline: tl = Timeline() for i in range(2014, 2020): c = ( Bar() .add_xaxis(list(zip(list(data总.index)))) .add_yaxis("显示",list(data总["{}".format(i)])) .set_global_opts( title_opts=opts.TitleOpts(title="纵横小说月票榜"), datazoom_opts=opts.DataZoomOpts(type_="inside"), visualmap_opts=opts.VisualMapOpts(type_="color", max_=250000, min_=200,pos_right='20',pos_top='middle'), toolbox_opts=opts.ToolboxOpts(), ) .set_series_opts( label_opts=opts.LabelOpts(is_show=False), markpoint_opts=opts.MarkPointOpts( data=[ opts.MarkPointItem(type_="max", name="最大值"), opts.MarkPointItem(type_="min", name="最小值"), ] ), ) ) tl.add(c, "{}年".format(i)) return tl def pie_rosetype() -> Pie: c = ( Pie() .add( "", [list(z) for z in zip(X轴, Y轴)], radius=["30%", "60%"], center=["50%", "60%"], rosetype="area", ) .set_global_opts(title_opts=opts.TitleOpts(title="2018作家版税收入榜单",pos_top = 'middle')) .set_series_opts( label_opts=opts.TextStyleOpts(font_style='oblique') ) ) return c @app.route("/") def index(): return render_template("index.html") @app.route("/barChart") def get_bar_chart(): tl = bar_datazoom_inside() return tl.dump_options_with_quotes() @app.route("/2") def index2(): return render_template("index2.html") @app.route("/barChart2") def get_bar_chart2(): c = pie_rosetype() return c.dump_options_with_quotes() if __name__ == "__main__": app.run() ``` 代码没问题,也能够将网站部署出来,如下图: ![flask](https://img-ask.csdn.net/upload/201912/29/1577606001_509738.png) 但是!我的横坐标变成数字了,原来在jupyter简单的render后产生的可视化横坐标是正常的如: ![图片说明](https://img-ask.csdn.net/upload/201912/29/1577606183_550451.png) 请各位大佬帮帮忙,我实在搞不明白哪里出错了。 下面是我的index.html代码。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Awesome-pyecharts</title> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script> </head> <body> <div id="bar" style="width:1000px; height:600px;"></div> <script> $( function () { var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'}); $.ajax({ type: "GET", url: "http://127.0.0.1:5000/barChart", dataType: 'json', success: function (result) { chart.setOption(result); } }); } ) </script> </body> </html> ```
ECharts markLine裡面,如何畫出平移的平均線?
ECharts markLine裡面,可以利用type:'average',快速地畫出平均線,但我希望可以依照平均值的正負0.5的門檻值,也畫出水平線。我測試過,type:'average' 這個方法在有dataZoom的情況下,會根據畫面顯示得的資料來計算平均值,所以如果可以取得type:'average' 裡的平均值進行處理,會非常的方便,但是利用formatter回調函數的方法,我一直沒有辦法把平均值取出來,用在別的地方。 ``` markLine:{ silent: true, data:[{ name:'平均值', type:'average', label:{formatter: function(params){ avg=params.data.value; console.log(avg) return avg }}}, { name:'平均值平移', yAxis:avg+3, }, ] } ``` 這種方法行不通,有沒有高人可以指點,謝謝!
chart柱状图显示乱序customData的每组柱字顺序和我给的数据不一致
var yearCount = result.legend.length; var categoryCount = result.category.length; var xAxisData = result.category; var customData = []; var legendData = []; var dataList = []; legendData.push('trend'); var encodeY = []; for (var i = 0; i < yearCount; i++) { legendData.push(result.legend[i]); dataList.push([]); // customData.push(result.series[i].listData); encodeY.push(1 + i); } for (var i = 0; i < categoryCount; i++) { // xAxisData.push('category' + i); var customVal = [i]; customData.push(customVal); // var data = dataList[0]; for (var j = 0; j < dataList.length; j++) { dataList[j].push(result.series[i].listData[j]); customVal.push(result.series[i].listData[j]); } } function renderItem(params, api) { var xValue = api.value(0); var currentSeriesIndices = api.currentSeriesIndices(); var barLayout = api.barLayout({ barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1 }); var points = []; for (var i = 0; i < currentSeriesIndices.length; i++) { var seriesIndex = currentSeriesIndices[i]; if (seriesIndex !== params.seriesIndex) { var point = api.coord([xValue, api.value(seriesIndex)]); point[0] += barLayout[i - 1].offsetCenter; point[1] -= 20; points.push(point); } } var style = api.style({ stroke: api.visual('color'), fill: null }); return { type: 'polyline', shape: { points: points }, style: style }; } option = { tooltip: { trigger: 'axis' }, legend: { data: legendData }, // dataZoom: [{ // type: 'slider', // start: 50, // end: 70 // }, { // type: 'inside', // start: 50, // end: 70 // }], xAxis: { data: xAxisData }, yAxis: {}, series: [{ type: 'custom', name: 'trend', renderItem: renderItem, itemStyle: { normal: { borderWidth: 2 } }, encode: { x: 0, y: encodeY }, data: customData, z: 100 }].concat(echarts.util.map(dataList, function (data, index) { console.log(data); console.log("legendData[index + 1] "+legendData[index + 1]); return { type: 'bar', animation: false, name: legendData[index + 1], itemStyle: { normal: { opacity: 0.5 } }, data: data }; })) }; console.log打印出来 数据顺序对着 ,谁知道为什么乱了 ![图片说明](https://img-ask.csdn.net/upload/201807/27/1532661125_387304.png)
Servlet 调用加载过慢
![图片说明](https://img-ask.csdn.net/upload/201710/04/1507063703_226920.png) 下边是源码 我觉得自己写的很繁琐 请大家看看怎么优化! <script type="text/javascript"> $(function(){ //option2(); Action1(); Action3(); Action4(); Action21(); Action23(); Action24(); Action31(); Action33(); Action34(); }); /////////////////**************option4 电流折线图************//////////// function Action1() { $.ajax({ url : "FindEServlet?machine=1", success : function(result) { //alert(result); var jsonObj = JSON.parse(result); var time=[]; var I=[]; for (var i = 0; i < jsonObj.length; i++) { time.push(jsonObj[i].time); I.push(jsonObj[i].I) } var charts1 = echarts.init(document.getElementById('bar1'),'macarons'); option1 = { title : { text : 'Machine1电流统计图', }, tooltip : { trigger : 'axis' }, legend : { data : [ '电流I' ] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'bar','line'] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, dataZoom : { show : true, realtime : true, start : 0, end : 100 }, xAxis : [ { type : 'category', data : time } ], yAxis : [ { type : 'value' } ], series : [ { name : '电流', type : 'line', data : I, markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, markLine : { data : [ { type : 'average', name : '平均值' } ] } } ] }; charts1.setOption(option1); window.addEventListener("resize",function(){ charts1.resize(); }); }, error : function() { alert("连接服务器失败"); } }); } //////////////////**********电压***********/////////////////////// function Action4() { $.ajax({ url : "FindEServlet?machine=1", success : function(result) { //alert(result); var jsonObj = JSON.parse(result); var time=[]; var U=[]; for (var i = 0; i < jsonObj.length; i++) { time.push(jsonObj[i].time); U.push(jsonObj[i].U) } var charts4 = echarts.init(document.getElementById('bar4'),'westeros'); option4 = { title : { text : 'Machine1电压统计图', }, tooltip : { trigger : 'axis' }, legend : { data : [ '电压U' ] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'bar','line'] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, dataZoom : { show : true, realtime : true, start : 0, end : 100 }, xAxis : [ { type : 'category', data : time } ], yAxis : [ { type : 'value' } ], series : [ { name : '电压', type : 'line', data : U, markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, markLine : { data : [ { type : 'average', name : '平均值' } ] } } ] }; charts4.setOption(option4); window.addEventListener("resize",function(){ charts4.resize(); }); }, error : function() { alert("连接服务器失败"); } }); } //////////////******************option3 电量柱状图****************////////////// function Action3() { //alert("222"); $.ajax({ url : "FindEServlet?machine=1", success : function(result) { //alert(result); var jsonObj = JSON.parse(result); var time=[]; var E=[]; for (var i = 0; i < jsonObj.length; i++) { time.push(jsonObj[i].time); E.push(jsonObj[i].E) } var charts3 = echarts.init(document.getElementById('bar3'),'vintage'); option3 = { title : { text : 'Machine1电量统计图', }, tooltip : { trigger : 'axis' }, legend : { data : [ '电量E' ] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'line', 'bar' ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, dataZoom : { show : true, realtime : true, start : 0, end : 100 }, xAxis : [ { type : 'category', data : time //data :['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value' } ], series : [ { name : '电量', type : 'bar', data : E, markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, markLine : { data : [ { type : 'average', name : '平均值' } ] } } ] }; charts3.setOption(option3); window.addEventListener("resize",function(){ charts3.resize(); }); }, error : function() { alert("连接服务器失败"); } }); }
(前端js问题)在函数中修改全局变量
是echarts中: 我想在注释(2)处通过函数**onclick:function()**修改注释(1)处的全局变量,达到修改注释(3)处的end变量。 问题:**请问function那里的代码应该如何修改?** **或者整个应该如何修改我的代码才可以实现上述效果。** 感谢。 var dataAxis =[]; var end = 10 //******这里(1)******* option = { title: { text: '' }, tooltip : { trigger: 'axis', formatter:"第{c4}点信息:<br/>{a0}:{c0}m<br/>{a1}:{c1}m<br/>{a2}:{c2}m<br/>{a3}:{c3}%", axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' }, }, }, toolbox: { itemGap:20, itemSize:20, right:30, feature: { restore: {show: true,}, myTool1: { show: true, title: '自定义', icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick: function (){ end=20; //*****这里(2)******* } }, }, }, dataZoom: [ { type: 'inside', filterMode:'none', start:0, end: end,//******这里(3)****** zoomOnMouseWheel:false, moveOnMouseMove:false, }, { zoomLock:true, textStyle:false, handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 5, shadowColor: 'rgba(0, 0, 0, 0.8)', shadowOffsetX: 2, shadowOffsetY: 2, } }, ], ......(后面省略)
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
【JSON解析】浅谈JSONObject的使用
简介 在程序开发过程中,在参数传递,函数返回值等方面,越来越多的使用JSON。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,同时也易于机器解析和生成、易于理解、阅读和撰写,而且Json采用完全独立于语言的文本格式,这使得Json成为理想的数据交换语言。 JSON建构于两种结构: “名称/值”对的集合(A Collection of name/va...
《MySQL 性能优化》之理解 MySQL 体系结构
本文介绍 MySQL 的体系结构,包括物理结构、逻辑结构以及插件式存储引擎。
程序员请照顾好自己,周末病魔差点一套带走我。
程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。
一名大专同学的四个问题
【前言】   收到一封来信,赶上各种事情拖了几日,利用今天要放下工作的时机,做个回复。   2020年到了,就以这一封信,作为开年标志吧。 【正文】   您好,我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。   先说一下我的基本情况,高考失利,不想复读,来到广州一所大专读计算机应用技术专业。学校是偏艺术类的,计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
Java 14 都快来了,为什么还有这么多人固守Java 8?
从Java 9开始,Java版本的发布就让人眼花缭乱了。每隔6个月,都会冒出一个新版本出来,Java 10 , Java 11, Java 12, Java 13, 到2020年3月份,...
达摩院十大科技趋势发布:2020 非同小可!
【CSDN编者按】1月2日,阿里巴巴发布《达摩院2020十大科技趋势》,十大科技趋势分别是:人工智能从感知智能向认知智能演进;计算存储一体化突破AI算力瓶颈;工业互联网的超融合;机器间大规模协作成为可能;模块化降低芯片设计门槛;规模化生产级区块链应用将走入大众;量子计算进入攻坚期;新材料推动半导体器件革新;保护数据隐私的AI技术将加速落地;云成为IT技术创新的中心 。 新的画卷,正在徐徐展开。...
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
讲真,这两个IDE插件,可以让你写出质量杠杠的代码
周末躺在床上看《拯救大兵瑞恩》 周末在闲逛的时候,发现了两个优秀的 IDE 插件,据说可以提高代码的质量,我就安装了一下,试了试以后发现,确实很不错,就推荐给大家。 01、Alibaba Java 代码规范插件 《阿里巴巴 Java 开发手册》,相信大家都不会感到陌生,其 IDEA 插件的下载次数据说达到了 80 万次,我今天又贡献了一次。嘿嘿。 该项目的插件地址: https://github....
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
害怕面试被问HashMap?这一篇就搞定了!
声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java集合中的精髓了,如果你觉得自己对它掌握的还不够好,我想今天这篇文章会非常适合你,至少,看了今天这篇文章,以后不怕面试被问HashMap了 其实在我学习HashMap的过程中,我个人觉得HashMap还是挺复杂的,如果真的想把它搞得明明白...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
python爬取百部电影数据,我分析出了一个残酷的真相
2019年就这么匆匆过去了,就在前几天国家电影局发布了2019年中国电影市场数据,数据显示去年总票房为642.66亿元,同比增长5.4%;国产电影总票房411.75亿元,同比增长8.65%,市场占比 64.07%;城市院线观影人次17.27亿,同比增长0.64%。 看上去似乎是一片大好对不对?不过作为一名严谨求实的数据分析师,我从官方数据中看出了一点端倪:国产票房增幅都已经高达8.65%了,为什...
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试,面试官没想到一个ArrayList,我都能跟他扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
良心推荐,我珍藏的一些Chrome插件
上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家,随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件,由于支持 Markdown 直接转电子邮...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
那些年,我们信了课本里的那些鬼话
教材永远都是有错误的,从小学到大学,我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里,有很多是错误文章,或者说是假课文。像《斑羚飞渡》: 随着镰刀头羊的那声吼叫,整个斑羚群迅速分成两拨,老年斑羚为一拨,年轻斑羚为一拨。 就在这时,我看见,从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声,一只半大的斑羚应声走了出来。一老一少走到伤心崖,后退了几步,突...
一个程序在计算机中是如何运行的?超级干货!!!
强烈声明:本文很干,请自备茶水!???? 开门见山,咱不说废话! 你有没有想过,你写的程序,是如何在计算机中运行的吗?比如我们搞Java的,肯定写过这段代码 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } ...
【蘑菇街技术部年会】程序员与女神共舞,鼻血再次没止住。(文末内推)
蘑菇街技术部的年会,别开生面,一样全是美女。
那个在阿里养猪的工程师,5年了……
简介: 在阿里,走过1825天,没有趴下,依旧斗志满满,被称为“五年陈”。他们会被授予一枚戒指,过程就叫做“授戒仪式”。今天,咱们听听阿里的那些“五年陈”们的故事。 下一个五年,猪圈见! 我就是那个在养猪场里敲代码的工程师,一年多前我和20位工程师去了四川的猪场,出发前总架构师慷慨激昂的说:同学们,中国的养猪产业将因为我们而改变。但到了猪场,发现根本不是那么回事:要个WIFI,没有;...
为什么程序猿都不愿意去外包?
分享外包的组织架构,盈利模式,亲身经历,以及根据一些外包朋友的反馈,写了这篇文章 ,希望对正在找工作的老铁有所帮助
立即提问