折线图如何能获取两个数据点之间的数据?

图片说明

这张折线图是Echarts绘制出来的 Echarts只能获取到传入点的数据

比如:图片说明

现在想要获取两个点之间的数据 请问Echarts图表能做到吗 其他的图表也行

2个回答

用啥插件做的echarts吗?还是自己写的

weixin_44058725
谷雨521 你现在给x轴加上了,只需要给y轴也加上
5 个月之前 回复
weixin_44058725
谷雨521 api里应该有吧给xy轴加上基准线
5 个月之前 回复
weixin_43828898
我记得你来过 Echarts做的 可能需要推算出函数 因为现在x轴的值能获取到 y轴不能 不知道其他绘图工具有没有这样的功能
5 个月之前 回复

tooltip,鼠标放上去,formatter里面的参数,有x轴,y的轴值

weixin_43828898
我记得你来过 吼吼 已经解决了 感谢回答
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用xlsxwriter模块绘折线图可以在图表中插入一条线(这条线的数据来自其他列表)
获取主机内存已使用(列表mem_used)和总内存(列表mem_total)数据后,通过xlsxwriter模块创建了一个excel文件,然后使用xlsxwriter绘制内存占用折线图,折线图需要两根线,一根是mem_used的变化折线,还有一根是mem_total每个元素一半的变化折线。mem_total每个元素的一半我生成了一个列表mem_total_half,现在怎么把mem_total_half这个列表的数据插入到折线图中(mem_total_half的数据不能才excel中体现)? ``` #插入mem_used chart_col.add_series({ 'name': '=sheet1!$C$1', 'values': '=sheet1!$C$2:$C$101', 'line': {'color': 'blue'}, }) #插入mem_total/2 chart_col.add_series({ 'name': '=sheet1!$B$1', 'values': '=sheet1!' + mem_total_half[0] + ':' + mem_total_half[99], #想在这里插入一条线,数据来自mem_total_half这个列表,但是我这里的写法是错误的,代码运行不能通过 'line': {'color': 'yellow'}, }) chart_col.set_title({'name': 'mem资源占用'}) worksheet.insert_chart('G16', chart_col, {'x_scale': 1, 'y_scale': 1}) ```
安卓中 surfaceview中显示三个折线图,可左右拖动查看未显示的图形
我在做安卓surfaceview的时候,要加载显示3条折线,但只有一条折线的时候,正常拖动都没问题,一旦显示3条折线,拖动就不能显示预期的折线,拖动后显示的是一片空白,除了最右边一点折线 自定义类 ``` public class MultiLineChartSurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable { /** surface持有者 */ private SurfaceHolder mHolder; /** 当前画布 */ private Canvas mCanvas; /** 是否开始绘画 */ private boolean mIsDrawing; /** 坐标轴举例view边框的距离 */ private static final int DEFAULT_PADDING = 20; /** 默认宽度设置为400dp */ private static final int DEFAULT_WIDTH = 450; /** 默认高度设置为400dp */ private static final int DEFAULT_HEIGHT = 300; /** 默认折线的颜色 */ private static final int DEFAULT_LINE_COLOR = Color.GREEN; /** 默认x轴的颜色 */ private static final int DEFAULT_X_LINE_COLOR = 0xffEBEBEB; /** 默认Y轴的颜色 */ private static final int DEFAULT_Y_LINE_COLOR = 0xffEBEBEB; /** 默认折线的宽度 */ private static final int DEFAULT_LINE_WIDTH = 1; /** 默认x轴的量程 */ private static final int DEFAULT_X_RANGE = 1000; /** 默认y轴的量程 */ private static final int DEFAULT_Y_RANGE = 1000; /** 默认x轴每个刻度代表的单位 */ private static final int DEFAULT_X_UNIT = 50; /** 默认y轴每个刻度代表的单位 */ private static final int DEFAULT_Y_UNIT = 50; /** 每个刻度的高度 */ private static final int DEFAULT_SCALE_HEIGHT = 4; /** 默认x轴尽头箭头的长度 */ private static final int DEFAULT_X_BLANK = 20; /** 默认y轴尽头箭头的长度 */ private static final int DEFAULT_Y_BLANK = 20; /** x轴的单位 */ private int mXUnit; /** 每个y轴的单位的高度 */ private int mYUnit; /** 折线的颜色 */ private int mLineColor; /** x轴的颜色 */ private int mXLineColor; /** y轴的颜色 */ private int mYLineColor; /** 折线的宽度 */ private int mLineWidth; /** x轴的量程 */ private int mXRange; /** y轴的量程 */ private int mYRange; /** 绘制折线的画笔 */ private Paint mLinePaint; /** 绘制坐标的画笔 */ private Paint mCoordinatePaint; /** view的宽度 */ private int mWidth; /** View的高度 */ private int mHeight; /** 坐标轴距离view边距的间距 */ private int mPaddint; /** 刻度的高度 */ private int mScaleHeight; /** y轴的实际高度 */ private int mAxisHeight; /** x轴的实际高度 */ private int mAxisWidth; /** X轴最后一个竖线与箭头的空格 */ private int mXBlank; /** Y轴最后一个竖线与箭头的空格 */ private int mYBlank; /** 每个x轴刻度的宽度 */ private int mXScaleWidth; /** 每个y轴刻度的宽度 */ private int mYScaleWidth; /** 外部的list,用来存放折线上的值 */ private List<List<Integer>> mLines; /** 最后一次点击的x坐标 */ private int lastX; /** 偏移量,用来实现平滑移动 */ private int mOffset = 0; /** 移动速度,用来实现速度递减 */ private int mSpeed = 0; /** 是否触摸屏幕 */ private boolean mIsTouch = false; /** 时间计数器,用来快速滚动时候减速 */ private int time = 0; /** 移动时候X方向上的速度 */ private double xVelocity = 0; /** 是否可以滚动,当不在范围时候不可以滚动 */ private boolean isScroll = true; /** x轴上的格子数量 */ private int mXScaleNum; /** y轴上的格子数量 */ private int mYScaleNum; public MultiLineChartSurfaceView(Context context) { this(context, null); } public MultiLineChartSurfaceView(Context context, AttributeSet attrs) { this(context, attrs, -1); } public MultiLineChartSurfaceView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } /** 设置一些变量的尺寸 */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); if (widthMode == MeasureSpec.AT_MOST) { mWidth = dp2px(getContext(), DEFAULT_WIDTH); } else { mWidth = Math.max(widthSize, dp2px(getContext(), DEFAULT_WIDTH)); } if (heightMode == MeasureSpec.AT_MOST) { mHeight = dp2px(getContext(), DEFAULT_HEIGHT); } else { mHeight = Math.max(heightSize, dp2px(getContext(), DEFAULT_HEIGHT)); } setMeasuredDimension(mWidth, mHeight); } /** 初始化surfaceView操作 */ private void init() { mHolder = getHolder(); mHolder.addCallback(this); // 设置可以获取焦点 setFocusable(true); // 进入触摸输入模式后,该控件是否还有获得焦点的能力 setFocusableInTouchMode(true); // 是否保持屏幕常亮 this.setKeepScreenOn(true); // 为部分成员变量赋初值,可以写成自定义属性 mLineColor = DEFAULT_LINE_COLOR; mLineWidth = dp2px(getContext(), DEFAULT_LINE_WIDTH); mXLineColor = DEFAULT_X_LINE_COLOR; mYLineColor = DEFAULT_Y_LINE_COLOR; mXRange = DEFAULT_X_RANGE; mYRange = DEFAULT_Y_RANGE; mXUnit = DEFAULT_X_UNIT; mYUnit = DEFAULT_Y_UNIT; mPaddint = dp2px(getContext(), DEFAULT_PADDING); mScaleHeight = dp2px(getContext(), DEFAULT_SCALE_HEIGHT); mLinePaint = new Paint(); mCoordinatePaint = new Paint(); } /** 子线程,循环绘制折线 */ @Override public void run() { // 如果处于绘画状态,那么就开始绘制 while (mIsDrawing) { // 判断是否处于边缘状态 setSpeedCut(); // 绘制方法 draw(); } } /** 具体的绘制方法 */ private void draw() { try { long start = System.currentTimeMillis(); // 获取并锁定画布 mCanvas = mHolder.lockCanvas(); // 设置画布背景为白色 mCanvas.drawColor(0xff000000); // 绘制坐标轴 drawAxis(); // 绘制曲线 drawLine(); long end = System.currentTimeMillis(); if (end - start < 50) { Thread.sleep(50 - (end - start)); } } catch (Exception e) { e.printStackTrace(); } finally { if (mCanvas != null) { // 保证每次都将绘制的内容提交到服务器 mHolder.unlockCanvasAndPost(mCanvas); } } } /** 绘制坐标系 */ private void drawAxis() { mCanvas.save(); // 移动坐标原点到左下角 mCanvas.translate(mPaddint, mHeight - mPaddint); // 画线 drawXYLine(); // 绘制坐标轴上的刻度 // 绘制xy轴末端的箭头 drawXYScale(); mCanvas.restore(); } /** 绘制折线 */ private void drawLine() { mCanvas.save(); mCanvas.translate(mPaddint, mHeight - mPaddint); // 设置画笔属性 mLinePaint.setAntiAlias(true); mLinePaint.setStrokeWidth(3); mLinePaint.setColor(mLineColor); mLinePaint.setStyle(Style.STROKE); //x轴每次的步进 int xInterval=(int)mXScaleWidth/5; // 如果折线集合不为空 if (mLines != null && mLines.size() > 0) { for(int k=0;k<mLines.size();k++) { // 循环绘制所有线条 for (int i = 1; i < mLines.get(k).size(); i++) { // 上一个点的xy坐标 int previousY = (int) (mLines.get(k).get(i - 1) * 1.0 / mYRange * (mAxisHeight - mYBlank)); int previousX = (i - 1) * mXScaleWidth + mOffset; // 当前点的xy坐标 int thisY = (int) (mLines.get(k).get(i) * 1.0 / mYRange * (mAxisHeight - mYBlank)); int thisX = i * xInterval + mOffset; // 保证只绘制坐标轴范围内的部分 if (previousX > 0 && previousX < mAxisWidth - mXBlank && thisX > 0 && thisX < mAxisWidth - mXBlank) // 两个坐标连线 mCanvas.drawLine(previousX, -previousY, thisX, -thisY, mLinePaint); } } } mCanvas.restore(); } /** * 设置快速滚动时,末尾的减速 */ private void setSpeedCut() { if (!mIsTouch && isScroll) { // 通过当前速度计算所对应的偏移量 mOffset = mOffset + mSpeed; setOffsetRange(); } // 每次偏移量的计算 if (mSpeed != 0) { time++; mSpeed = (int) (xVelocity + time * time * (xVelocity / 1600.0) - (xVelocity / 20.0) * time); } else { time = 0; mSpeed = 0; } } /** * 绘制x、y轴 */ private void drawXYLine() { mAxisWidth = mWidth - mPaddint; mAxisHeight = mHeight - 2 * mPaddint; mCoordinatePaint.setStrokeWidth(mLineWidth); mCoordinatePaint.setAntiAlias(true); // 绘制x轴 mCoordinatePaint.setColor(mXLineColor); mCanvas.drawLine(0, 0, mAxisWidth, 0, mCoordinatePaint); // 绘制y轴 mCoordinatePaint.setColor(mYLineColor); mCanvas.drawLine(0, 0, 0, -mAxisHeight, mCoordinatePaint); } /** 绘制刻度线和箭头 */ private void drawXYScale() { // 画y轴的刻度 mYScaleNum = mYRange / mYUnit; mYScaleWidth = (int) (mAxisHeight * 1.0 / mYScaleNum); mCoordinatePaint.setTextSize(30); for (int i = 0; i < mYScaleNum; i++) { mCanvas.drawLine(0, -mYScaleWidth * (i + 1), mAxisWidth, -mYScaleWidth * (i + 1), mCoordinatePaint); String yText = ""; if (i== 3||i==9||i==15) { yText = "0"; mCanvas.drawText(yText,-30,-mYScaleWidth * (i + 1),mCoordinatePaint); } else if (i == 1||i==7||i==13) { yText = "-1"; mCanvas.drawText(yText,-30,-mYScaleWidth * (i + 1),mCoordinatePaint); } else if(i == 5||i==11||i==17){ yText = "1"; mCanvas.drawText(yText,-30,-mYScaleWidth * (i + 1),mCoordinatePaint); } } // 画x轴的刻度 // x轴的分割线数量 mXScaleNum=mAxisWidth/mYScaleWidth; // 每个刻度的宽度 mXScaleWidth =mYScaleWidth;// (int) ((mAxisWidth - mXBlank) * 1.0 / mXScaleNum); for (int i = 0; i < mXScaleNum; i++) { mCanvas.drawLine(mXScaleWidth * (i + 1), 0, mXScaleWidth * (i + 1), -mAxisHeight, mCoordinatePaint); if(i!=0&&(i+1)%5==0) { mCanvas.drawText(String.valueOf((i+1) / 5), mXScaleWidth * (i + 1), 30, mCoordinatePaint); } } } /** 对偏移量进行边界值判定 */ private void setOffsetRange() { int offsetMax = -mXScaleWidth * (mLines.size()) + (mXScaleWidth * mXScaleNum + 2); int offsetMin = 2 * mXScaleWidth; if (mOffset > offsetMin) { isScroll = false; mOffset = offsetMin; } else if (mOffset < offsetMax) {// 如果划出最大值范围 isScroll = false; mOffset = offsetMax; } else { isScroll = true; } } @Override public boolean onTouchEvent(MotionEvent event) { int rawX = (int) (event.getRawX()); // 计算当前速度 VelocityTracker velocityTracker = VelocityTracker.obtain(); velocityTracker.addMovement(event); // 计算速度的单位时间 velocityTracker.computeCurrentVelocity(50); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 记录触摸点坐标 lastX = rawX; mIsTouch = true; break; case MotionEvent.ACTION_MOVE: // 计算便宜量 int offsetX = rawX - lastX; // 在当前偏移量的基础上增加偏移量 mOffset = mOffset + offsetX; setOffsetRange(); // 偏移量修改后下次重绘会有变化 lastX = rawX; // 获取X方向上的速度 xVelocity = velocityTracker.getXVelocity(); mSpeed = (int) xVelocity; break; case MotionEvent.ACTION_UP: mIsTouch = false; break; } // 计算完成后回收内存 velocityTracker.clear(); velocityTracker.recycle(); return true; } /** * 画布创建时候执行的方法 * * @param holder */ @Override public void surfaceCreated(SurfaceHolder holder) { // 开始绘画 mIsDrawing = true; // 启动绘画线程 new Thread(this).start(); } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) { } /** * 画布销毁时候执行的方法 */ @Override public void surfaceDestroyed(SurfaceHolder holder) { // 停止绘画 mIsDrawing = false; } /** * 外部用来设置折线数据的方法 */ public void setSingleLine(List<Integer> lines) { if(this.mLines==null) mLines=new ArrayList<List<Integer>>() ; this.mLines.add(lines); invalidate(); } /** * 外部用来设置折线数据的方法 */ public void setMultiLines(List<List<Integer>> lines) { if(this.mLines==null) mLines=new ArrayList<List<Integer>>() ; this.mLines=lines; invalidate(); } /** dp转化为px工具 */ private int dp2px(Context context, int dp) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics()); } } ``` activity中 ``` public class MainActivity extends Activity { private MultiLineChartSurfaceView mllcv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); List<List<Integer>> mLinesList = getData(); mllcv = (MultiLineChartSurfaceView) findViewById(R.id.mllcv); mllcv.setMultiLines(mLinesList); } private List<List<Integer>> getData() { List<List<Integer>> mLineList = new ArrayList<List<Integer>>(); List<Integer> line1 = new ArrayList<Integer>(); List<Integer> line2 = new ArrayList<Integer>(); for (int i = 0; i < 600; i++) { line1.add(550 + (int) (Math.random() * 200)); line2.add(550 - (int) (Math.random() * 200)); } mLineList.add(line1); mLineList.add(line2); return mLineList; } } ``` Layout ``` <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.bisa.linetest.MainActivity" > <com.bisa.linetest.MultiLineChartSurfaceView android:id="@+id/mllcv" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> ```
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) ``` 第一次发表这种提问,语言组织能力有限,如果有大神看懂了,麻烦指导一下,谢谢
关于在tab中使用echarts大小为0的问题
小弟最近写一个程序时需要实现一个在tab栏中切换不同的echarts图标的显示问题:在tab栏切换后再切换回来其父盒子div有大小,但是echarts大小为0x0; 同时自己再测了一下,当我跳转到没有echarts的页面再跳转回有echarts的后echarts能正常显示,但是从一个有echarts页面A跳到另一个有echarts的页面B第一次可以成功,但再从B跳会A时,A中其它元素可以正常显示,但是echarts就是显示不出来,已经卡了好几天了,网上的方法也试了一下不知道是不是自己试的方法对不对,拜托各位大神帮忙看看谢谢! ![图片说明](https://img-ask.csdn.net/upload/202003/09/1583726384_608296.png) ![图片说明](https://img-ask.csdn.net/upload/202003/09/1583726395_852700.png) 实现过程是用把echarts放在不同的div中,通过tab按下时捕获的值给current从而让相应的div中的图表显示出来: ``` <div v-if="current === 'month'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> ``` 当按下了相应的tab后,会调用相应的获取数据函数: ``` // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } ``` 在获取数据函数中最后调用了图表的初始化函数init: ``` async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来,在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来,在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, ``` 图表初始函数如下,其中写明了一些图表基础设置并进行setoption: ``` initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, ``` 最后再于图表的html部分中绑定了下面函数进行渲染: ``` handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, ``` 最后附上该页面完整代码,请大家帮忙看看谢谢~ ``` <template> <div class="historyContainer"> <div v-if="current === 'seven'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近七日过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近七日超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'month'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一月过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一月超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一季过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一季超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'halfyear'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近半年过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近半年超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'year'"> 这是一年 </div> <i-tab-bar fixed="true" :current="current" @change="handleChangeTabbar"> <i-tab-bar-item key="seven" icon="computer" current-icon="computer_fill" title="近一周"></i-tab-bar-item> <i-tab-bar-item key="month" icon="dynamic" current-icon="dynamic_fill" title="近一月"></i-tab-bar-item> <i-tab-bar-item key="quarter" icon="addressbook" current-icon="addressbook_fill" title="近一季"></i-tab-bar-item> <i-tab-bar-item key="halfyear" icon="setup" current-icon="setup_fill" title="近半年"></i-tab-bar-item> <i-tab-bar-item key="year" icon="mine" current-icon="mine_fill" title="近一年"></i-tab-bar-item> </i-tab-bar> </div> </template> <script> import echarts from 'echarts' import mpvueEcharts from 'mpvue-echarts'; import { post } from '@/api/request.js'; let barChart, accessBarChart, lineChart; export default { onLoad(options) { const { stationId, accessToken } = options; this.stationId = stationId; this.accessToken = accessToken; }, data() { return { current:'seven', stationId: '', accessToken: '', echarts, totalNum: 0, accessNum: 0, axleTotalNum: 0, axleAccessNum: 0, // type:7,//暂时默认七天 barOption: null, accessBarOption: null, lineOption: null } }, components: { mpvueEcharts }, mounted() { this.getChartData(7); }, methods: { initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, initAccessBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.accessBarOption = { title: { text: "近七日超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.accessBarOption = { title: { text: "近一月超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.accessBarOption = { title: { text: "近一季超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.accessBarOption = { title: { text: "近半年超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.accessBarCharts.init() }, handleAccessBarInit (canvas, width, height) { console.log("打印表1宽高"); console.log(this.wdith); console.log(this.height); accessBarChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(accessBarChart) accessBarChart.setOption(this.accessBarOption,true) return accessBarChart }, initLineChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.lineOption = { title: { text: "近7日车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==30){ this.lineOption = { title: { text: "近一月车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==90){ this.lineOption = { title: { text: "近一季车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==180){ this.lineOption = { title: { text: "近半年车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } this.$refs.lineCharts.init() }, handleLineInit (canvas, width, height) { console.log("打印表3宽高"); console.log(this.wdith); console.log(this.height); lineChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(lineChart) lineChart.setOption(this.lineOption,true) return lineChart }, async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来,在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来,在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } } } </script> <style> .historyContainer{ width: 100%; height: 100%; } .headerCard{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 30px; border: 1px solid #ccc; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .wrap{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; } .wrap1{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; margin-bottom: 50px } </style> ```
关于报错闪退的问题?有没有大神来看一眼。。。。
这是我做柱状图的代码 ``` package com.chenxi.bimquanziguankong.fragment; import android.content.Context; import android.graphics.Color; import android.net.Uri; import android.os.Bundle; import android.support.v4.app.Fragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.RelativeLayout; import com.alibaba.fastjson.JSON; import com.blankj.utilcode.util.ToastUtils; import com.chenxi.bimquanziguankong.R; import com.chenxi.bimquanziguankong.appConst.AppConst; import com.chenxi.bimquanziguankong.application.MyApplication; import com.chenxi.bimquanziguankong.common.StringAxisValueFormatter; import com.chenxi.bimquanziguankong.entity.InvestmentControlClass; import com.chenxi.bimquanziguankong.view.LineChart02View; import com.chenxi.bimquanziguankong.view.MyMarkerView; import com.github.mikephil.charting.charts.CombinedChart; import com.github.mikephil.charting.components.AxisBase; import com.github.mikephil.charting.components.XAxis; import com.github.mikephil.charting.components.YAxis; import com.github.mikephil.charting.data.BarData; import com.github.mikephil.charting.data.BarDataSet; import com.github.mikephil.charting.data.BarEntry; import com.github.mikephil.charting.data.CombinedData; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.data.LineData; import com.github.mikephil.charting.data.LineDataSet; import com.github.mikephil.charting.formatter.IAxisValueFormatter; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import java.io.IOException; import java.util.ArrayList; import java.util.List; import java.util.Random; import okhttp3.Call; import okhttp3.Callback; import okhttp3.Request; import okhttp3.Response; public class InvestmentAmountControlFragment extends BaseFragment { private View mView; RelativeLayout rl_document_list_is_null; private CombinedChart combineChart; List<InvestmentControlClass> investmentControlClasses = new ArrayList<>(); private List<String> xAxisValues = new ArrayList<>(); XAxis xAxis; YAxis axisLeft; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mView = inflater.inflate(R.layout.fragment_new_investment_amount_control, container, false); initView(mView); getxAxisValuesData(); getyAxisValuesData(); MyMarkerView myMarkerView = new MyMarkerView(getActivity(), R.layout.custom_marker_view); myMarkerView.setChartView(combineChart); combineChart.setMarker(myMarkerView); return mView; } private void initView(View mView) { rl_document_list_is_null = mView.findViewById(R.id.rl_document_list_is_null); combineChart = mView.findViewById(R.id.combineChart); combineChart.setDrawBorders(true); // 显示边界 combineChart.getDescription().setEnabled(false); // 不显示备注信息 combineChart.setPinchZoom(true); // 比例缩放 } private void getxAxisValuesData() { String url = AppConst.innerIp + "/api/" + AppConst.getProjectID() + "/InvestmentControlClass"; Request request = new Request.Builder() .url(url) .build(); MyApplication.getOkHttpClient().newCall(request).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { ToastUtils.showShort("数据请求失败"); } @Override public void onResponse(Call call, Response response) throws IOException { if (response.code() == 200) { try { String responseData = response.body().string(); investmentControlClasses = JSON.parseArray(responseData, InvestmentControlClass.class); if (investmentControlClasses.size()!=0){ for (int i = 0; i < investmentControlClasses.size(); i++) { xAxisValues.add(investmentControlClasses.get(i).getName()); } } xAxis = combineChart.getXAxis(); xAxis.setDrawGridLines(false); /*解决左右两端柱形图只显示一半的情况 只有使用CombinedChart时会出现,如果单独使用BarChart不会有这个问题*/ xAxis.setAxisMinimum(-0.5f); xAxis.setAxisMaximum(xAxisValues.size() - 0.5f); xAxis.setGranularity(1f); xAxis.setLabelCount(xAxisValues.size()); // 设置X轴标签数量 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // 设置X轴标签位置,BOTTOM在底部显示,TOP在顶部显示 xAxis.setValueFormatter(new StringAxisValueFormatter(xAxisValues)); axisLeft = combineChart.getAxisLeft(); // 获取左边Y轴操作类 axisLeft.setAxisMinimum(0); // 设置最小值 axisLeft.setGranularity(10); // 设置Label间隔 axisLeft.setLabelCount(10); }catch (IOException e){ e.printStackTrace(); } } else { ToastUtils.showShort("数据请求出错!500"); } } }); } private void getyAxisValuesData() { String url = AppConst.innerIp + "/api/" + AppConst.getProjectID() + "/Report/InvestmentControl"; //请求数据 Request fileRrequest = new Request.Builder() .url(url) .build(); Log.e("TAG", "柱状图地址 "+fileRrequest ); MyApplication.getOkHttpClient().newCall(fileRrequest).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { ToastUtils.showShort("数据请求失败"); } @Override public void onResponse(Call call, Response response) throws IOException { if (response.code() == 200) { String responseData = response.body().string(); getActivity().runOnUiThread(new Runnable() { @Override public void run() { JSONArray jsonArray = null; try { jsonArray = new JSONArray(responseData); //获取柱状图数组 List<BarEntry> barEntries = new ArrayList<>(); List<Entry> lineEntry = new ArrayList<>(); if (xAxisValues.size()!=0){ for (int i = 0; i < xAxisValues.size(); i++) { List<String> list = new ArrayList<>(); for (int j = 0; j < jsonArray.length(); j++) { JSONObject jo = new JSONObject(jsonArray.get(j).toString()); if (i > 0) { list.add(jo.getString(xAxisValues.get(i))); } } String[] ary = list.toArray(new String[list.size()]); float a[] = new float[ary.length]; for (int x = 0; x < ary.length; x++) { a[x] = Float.parseFloat(ary[x]); } barEntries.add(new BarEntry(i, a)); float sum = 0; for (int z = 0; z < a.length; z++) { sum = sum + a[z]; } lineEntry.add(new Entry(i, sum)); } } //柱状图数据 BarDataSet barDataSet = new BarDataSet(barEntries, ""); barDataSet.setColors(Color.parseColor("#ae312e"), Color.parseColor("#2a3f4e"), Color.parseColor("#579199") , Color.parseColor("#be765d"), Color.parseColor("#82b49e")); BarData barData = new BarData(); barData.addDataSet(barDataSet); //折线图数据 LineDataSet lineDataSet = new LineDataSet(lineEntry, "总和"); lineDataSet.setColor(Color.parseColor("#b71c1c")); lineDataSet.setCircleColor(Color.parseColor("#b71c1c")); lineDataSet.setValueTextColor(Color.parseColor("#f44336")); lineDataSet.setLineWidth(3f); lineDataSet.setHighlightEnabled(false); LineData lineData = new LineData(); lineData.addDataSet(lineDataSet); //组和图数据 CombinedData combinedData = new CombinedData(); // 创建组合图的数据源 combinedData.setData(barData); // 添加柱形图数据源 combinedData.setData(lineData); // 添加折线图数据源 combineChart.setData(combinedData); // 为组合图设置数据源 combineChart.invalidate(); } catch (JSONException e1) { e1.printStackTrace(); } } }); } else { ToastUtils.showShort(response.message()); } } }); } } ``` 然后偶然会出现闪退的现象报错信息如下有大神帮忙看下吗感激不尽 loge报错信息 ``` 07-17 16:03:30.221 13514-13514/com.chenxi.bimquanziguankong E/CrashHandler: In thread: Thread[main,5,main] UncaughtException detected: java.lang.IndexOutOfBoundsException: Invalid index 0, size is 0 at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255) at java.util.ArrayList.get(ArrayList.java:308) at com.github.mikephil.charting.data.DataSet.getEntryForIndex(DataSet.java:286) at com.github.mikephil.charting.utils.Transformer.generateTransformedValuesLine(Transformer.java:184) at com.github.mikephil.charting.renderer.LineChartRenderer.drawValues(LineChartRenderer.java:547) at com.github.mikephil.charting.renderer.CombinedChartRenderer.drawValues(CombinedChartRenderer.java:96) at com.github.mikephil.charting.charts.BarLineChartBase.onDraw(BarLineChartBase.java:264) at android.view.View.draw(View.java:15231) at android.view.View.updateDisplayListIfDirty(View.java:14167) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.updateDisplayListIfDirty(View.java:14162) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.draw(View.java:15234) at android.widget.FrameLayout.draw(FrameLayout.java:598) at android.view.View.updateDisplayListIfDirty(View.java:14167) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.updateDisplayListIfDirty(View.java:14162) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.draw(View.java:15234) at android.view.View.updateDisplayListIfDirty(View.java:14167) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:273) at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:279) at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:318) at android.view.ViewRootImpl.draw(ViewRootImpl.java:2554) at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2376) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2006) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1085) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5909) at android.view.C 07-17 16:03:30.247 13514-13514/com.chenxi.bimquanziguankong E/AndroidRuntime: FATAL EXCEPTION: main Process: com.chenxi.bimquanziguankong, PID: 13514 java.lang.IndexOutOfBoundsException: Invalid index 0, size is 0 at java.util.ArrayList.throwIndexOutOfBoundsException(ArrayList.java:255) at java.util.ArrayList.get(ArrayList.java:308) at com.github.mikephil.charting.data.DataSet.getEntryForIndex(DataSet.java:286) at com.github.mikephil.charting.utils.Transformer.generateTransformedValuesLine(Transformer.java:184) at com.github.mikephil.charting.renderer.LineChartRenderer.drawValues(LineChartRenderer.java:547) at com.github.mikephil.charting.renderer.CombinedChartRenderer.drawValues(CombinedChartRenderer.java:96) at com.github.mikephil.charting.charts.BarLineChartBase.onDraw(BarLineChartBase.java:264) at android.view.View.draw(View.java:15231) at android.view.View.updateDisplayListIfDirty(View.java:14167) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.updateDisplayListIfDirty(View.java:14162) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.draw(View.java:15234) at android.widget.FrameLayout.draw(FrameLayout.java:598) at android.view.View.updateDisplayListIfDirty(View.java:14167) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.updateDisplayListIfDirty(View.java:14162) at android.view.View.getDisplayList(View.java:14189) at android.view.View.draw(View.java:14959) at android.view.ViewGroup.drawChild(ViewGroup.java:3405) at android.view.ViewGroup.dispatchDraw(ViewGroup.java:3198) at android.view.View.draw(View.java:15234) at android.view.View.updateDisplayListIfDirty(View.java:14167) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3389) at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3368) at android.view.View.updateDisplayListIfDirty(View.java:14127) at android.view.View.getDisplayList(View.java:14189) at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:273) at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:279) at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:318) at android.view.ViewRootImpl.draw(ViewRootImpl.java:2554) at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2376) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2006) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1085) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5909) ```
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
《MySQL 性能优化》之理解 MySQL 体系结构
本文介绍 MySQL 的体系结构,包括物理结构、逻辑结构以及插件式存储引擎。
程序员请照顾好自己,周末病魔差点一套带走我。
程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。
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。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
C语言荣获2019年度最佳编程语言
关注、星标公众号,不错过精彩内容作者:黄工公众号:strongerHuang近日,TIOBE官方发布了2020年1月编程语言排行榜单。我在前面给过一篇文章《2019年11月C语言接近Ja...
大学四年因为知道了这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岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
一份王者荣耀的英雄数据报告
咪哥杂谈本篇阅读时间约为 6 分钟。1前言前一阵写了关于王者的一些系列文章,从数据的获取到数据清洗,数据落地,都是为了本篇的铺垫。今天来实现一下,看看不同维度得到的结论。2环境准备本次实...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
那些年,我们信了课本里的那些鬼话
教材永远都是有错误的,从小学到大学,我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里,有很多是错误文章,或者说是假课文。像《斑羚飞渡》: 随着镰刀头羊的那声吼叫,整个斑羚群迅速分成两拨,老年斑羚为一拨,年轻斑羚为一拨。 就在这时,我看见,从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声,一只半大的斑羚应声走了出来。一老一少走到伤心崖,后退了几步,突...
一个程序在计算机中是如何运行的?超级干货!!!
强烈声明:本文很干,请自备茶水!???? 开门见山,咱不说废话! 你有没有想过,你写的程序,是如何在计算机中运行的吗?比如我们搞Java的,肯定写过这段代码 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } ...
【蘑菇街技术部年会】程序员与女神共舞,鼻血再次没止住。(文末内推)
蘑菇街技术部的年会,别开生面,一样全是美女。
那个在阿里养猪的工程师,5年了……
简介: 在阿里,走过1825天,没有趴下,依旧斗志满满,被称为“五年陈”。他们会被授予一枚戒指,过程就叫做“授戒仪式”。今天,咱们听听阿里的那些“五年陈”们的故事。 下一个五年,猪圈见! 我就是那个在养猪场里敲代码的工程师,一年多前我和20位工程师去了四川的猪场,出发前总架构师慷慨激昂的说:同学们,中国的养猪产业将因为我们而改变。但到了猪场,发现根本不是那么回事:要个WIFI,没有;...
为什么程序猿都不愿意去外包?
分享外包的组织架构,盈利模式,亲身经历,以及根据一些外包朋友的反馈,写了这篇文章 ,希望对正在找工作的老铁有所帮助
Java校招入职华为,半年后我跑路了
何来 我,一个双非本科弟弟,有幸在 19 届的秋招中得到前东家华为(以下简称 hw)的赏识,当时秋招签订就业协议,说是入了某 java bg,之后一系列组织架构调整原因等等让人无法理解的神操作,最终毕业前夕,被通知调往其他 bg 做嵌入式开发(纯 C 语言)。 由于已至于校招末尾,之前拿到的其他 offer 又无法再收回,一时感到无力回天,只得默默接受。 毕业后,直接入职开始了嵌入式苦旅,由于从未...
世界上有哪些代码量很少,但很牛逼很经典的算法或项目案例?
点击上方蓝字设为星标下面开始今天的学习~今天分享四个代码量很少,但很牛逼很经典的算法或项目案例。1、no code 项目地址:https://github.com/kelseyhight...
​两年前不知如何编写代码的我,现在是一名人工智能工程师
全文共3526字,预计学习时长11分钟 图源:Unsplash 经常有小伙伴私信给小芯,我没有编程基础,不会写代码,如何进入AI行业呢?还能赶上AI浪潮吗? 任何时候努力都不算晚。 下面,小芯就给大家讲一个朋友的真实故事,希望能给那些处于迷茫与徘徊中的小伙伴们一丝启发。(下文以第一人称叙述) 图源:Unsplash 正如Elsa所说,职业转换是...
强烈推荐10本程序员必读的书
很遗憾,这个春节注定是刻骨铭心的,新型冠状病毒让每个人的神经都是紧绷的。那些处在武汉的白衣天使们,尤其值得我们的尊敬。而我们这些窝在家里的程序员,能不外出就不外出,就是对社会做出的最大的贡献。 有些读者私下问我,窝了几天,有点颓丧,能否推荐几本书在家里看看。我花了一天的时间,挑选了 10 本我最喜欢的书,你可以挑选感兴趣的来读一读。读书不仅可以平复恐惧的压力,还可以对未来充满希望,毕竟苦难终将会...
作为一个程序员,内存的这些硬核知识你必须懂!
我们之前讲过CPU,也说了CPU和内存的那点事儿,今天咱就再来说说有关内存,作为一个程序员,你必须要懂的哪那些硬核知识! 大白话聊一聊,很重要! 先来大白话的跟大家聊一聊,我们这里说的内存啊,其实就是说的我们电脑里面的内存条,所以嘞,内存就是内存条,数据要放在这上面才能被cpu读取从而做运算,还有硬盘,就是电脑中的C盘啥的,一个程序需要运行的话需要向内存申请一块独立的内存空间,这个程序本身是存放在...
非典逼出了淘宝和京东,新冠病毒能够逼出什么?
loonggg读完需要5分钟速读仅需 2 分钟大家好,我是你们的校长。我知道大家在家里都憋坏了,大家可能相对于封闭在家里“坐月子”,更希望能够早日上班。今天我带着大家换个思路来聊一个问题...
牛逼!一行代码居然能解决这么多曾经困扰我半天的算法题
春节假期这么长,干啥最好?当然是折腾一些算法题了,下面给大家讲几道一行代码就能解决的算法题,当然,我相信这些算法题你都做过,不过就算做过,也是可以看一看滴,毕竟,你当初大概率不是一行代码解决的。 学会了一行代码解决,以后遇到面试官问起的话,就可以装逼了。 一、2 的幂次方 问题描述:判断一个整数 n 是否为 2 的幂次方 对于这道题,常规操作是不断这把这个数除以 2,然后判断是否有余数,直到 ...
用前端5分钟写一个在线m3u8在线播放器
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;meta http-equiv="X...
Spring框架|JdbcTemplate介绍
文章目录一、JdbcTemplate 概述二、创建对象的源码分析三、JdbcTemplate操作数据库 一、JdbcTemplate 概述 在之前的web学习中,学习了手动封装JDBCtemplate,其好处是通过(sql语句+参数)模板化了编程。而真正的JDBCtemplete类,是Spring框架为我们写好的。 它是 Spring 框架中提供的一个对象,是对原始 Jdbc API 对象的简单...
为什么说程序员做外包没前途?
之前做过不到3个月的外包,2020的第一天就被释放了,2019年还剩1天,我从外包公司离职了。我就谈谈我个人的看法吧。首先我们定义一下什么是有前途 稳定的工作环境 不错的收入 能够在项目中不断提升自己的技能(ps:非技术上的认知也算) 找下家的时候能找到一份工资更高的工作 如果你目前还年轻,但高不成低不就,只有外包offer,那请往下看。 外包公司你应该...
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合...
终于!疫情之下,第一批企业没能熬住面临倒闭,员工被遣散,没能等来春暖花开!
先来看一个图: 这个春节,我同所有人一样,不仅密切关注这次新型肺炎,还同时关注行业趋势和企业。在家憋了半个月,我选择给自己看书充电。因为在疫情之后,行业竞争会更加加剧,必须做好未雨绸缪,时刻保持充电。 看了今年的情况,突然想到大佬往年经典语录: 马云:未来无业可就,无工可打,无商可务 李彦宏:人工智能时代,有些专业将被淘汰,还没毕业就失业 马化腾:未来3年将大洗牌,迎21世界以来最大失业潮 王...
昂,我24岁了
24岁的程序员,还在未来迷茫,不知道能不能买得起房子
作为程序员的我,大学四年一直自学,全靠这些实用工具和学习网站!
我本人因为高中沉迷于爱情,导致学业荒废,后来高考,毫无疑问进入了一所普普通通的大学,实在惭愧???? 我又是那么好强,现在学历不行,没办法改变的事情了,所以,进入大学开始,我就下定决心,一定要让自己掌握更多的技能,尤其选择了计算机这个行业,一定要多学习技术。 在进入大学学习不久后,我就认清了一个现实:我这个大学的整体教学质量和学习风气,真的一言难尽,懂的人自然知道怎么回事? 怎么办?我该如何更好的提升自...
新来个技术总监,禁止我们使用Lombok!
我有个学弟,在一家小型互联网公司做Java后端开发,最近他们公司新来了一个技术总监,这位技术总监对技术细节很看重,一来公司之后就推出了很多"政策",比如定义了很多开发规范、日志规范、甚至是要求大家统一使用某一款IDE。 但是这些都不是我这个学弟和我吐槽的点,他真正和我吐槽的是,他很不能理解,这位新来的技术总监竟然禁止公司内部所有开发使用Lombok。但是又没给出十分明确的,可以让人信服的理由。 于...
立即提问