EChart

参考大神解答，直接将boundaryGap的值调为true就行了 来源： oschina 链接： https://my.oschina.net/guozhouyuan/blog/4297851

查询近7天 近30天的数据，并且把每天的数据拿出来生成一个连续多日的折线图： 思路：要拿到每天的数据，循环查询数据库速度很慢，近7天就要查7次，近30天就要查30次，如果一次拿7天或者30天，再循环判断出每天的又需要大改原逻辑，所以想了下，除了今天的数据是实时的，其他时间数据已经不会变了，就把他们存到缓存中，近7天第一天的数据就缓存一天，第二天就缓存两天，因为明天再查近7天，这个第一天就不用了，但是结合还要查近30天，所以近7天的第一天就缓存24天，后面依次推。 代码： if ($time_type== 6 ){ // 组合数据 $date = []; $data = []; for ($i= 0 ; $i<= 6 ; $i++){ $date[$i] = date( "n.j" ,strtotime( '+' . $i- 6 . ' days' , time())); $time_search_string[ 'start_time' ] = strtotime(date( "Y-m-d" ,strtotime( '+' . $i- 6 . ' days' , time()))); $time_search_string[ 'end_time' ] = strtotime(date( "Y-m-d" ,strtotime( '+' . $i- 6 . ' days' , time

封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客。另外这里只展示关键部分代码，项目代码放在github上： mall-manage-system 1、 Vue + Element-ui实现后台管理系统(1) --- 总述 2、 Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现 3、 Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能 这篇主要讲解实现图表的功能： 整体效果 一、封装一个ECharts组件的一点思路 1、绘制一个简单的图表 ECharts上手非常简单，具体简单示例可以参考我之前写的一篇博客： 图表工具--- ECharts.js学习（一） 简单入门 。 2、封装思路 在实际项目开发中，我们会经常与图表打交道,比如 订单数量表 、 商品销量表 、 会员数量表 等等，它可能是以 折线图 、 柱状图 、 饼状图 等等的方式来展现。 如果我们没有封装组件的思想的话,那么我们每次需要画一个图表都要重复类似相同的工作，而且代码看去非常冗余。所以我们就需要考虑封装一个ECharts组件，这个组件通过接收 不同的数据来渲染成不同的图表,以后当需要生成一张图表的时候，只需要把相关的数据传入到这个组件中，就会渲染对应的图表。 而这里的核心就是

问题 ：edge浏览器下，固定列的边框消失 原因 ：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky !important; position: sticky !important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核，对css3的属性支持较好，也支持sticky属性，可以使用，可以固定表格列，但边框会消失。 解决方案 ： 目前可行的解决方案有如下几种： 不使用固定列，若产品没有明确要求使用固定列，可以放弃使用nzLeft及nzRight来固定表格。从而使各个浏览器下的展示效果一致。 针对Edge浏览器降级处理，与IE浏览器效果一致，无固定列，整体可横向滚动。 自定义实现固定列，不使用组件的固定列实现，通过使用 position: absolute; 这种方式来实现表格的固定列。 第二个方案的详细过程如下： 使用div包裹表格，当表格宽度超过div宽度时，开启滚动： .scroll-table { width: 100%; overflow-x: scroll; } 针对表格，我们可以指定宽度

《分布式》布置了一道小作业，让我花了7天时间学习了Hadoop。。。现在终于可以正式地做这个作业了，记录一下。 使用Hadoop分析气象数据 1 获取数据 1.1 下载数据 1.2 数据格式 1.3 合并数据 2 MapReduce处理数据 2.1 环境配置，启动集群 2.2 上传到HDFS 2.2 编写MapReduce代码 2.2.1 TemperatureMapper 2.2.2 TemperatureReducer 2.2.3 JobMain 2.3 执行 2.3.1 打包、上传 2.3.2 运行 3 导入数据到Hive 4 Hive数据分析 5 使用Sqoop导入数据到Mysql 5.1 Mysql创建数据库 5.2 开始导入 6 展示数据 6.1 前端代码 6.2 后端代码 1 获取数据 1.1 下载数据 注意：为了不出现横向拖拉，命令里我加了换行，所有命令都是如此。 获取命令： wget -D --accept-regex = REGEX -P data -r -c ftp://ftp.ncdc.noaa.gov/pub/data/noaa/isd-lite/2019/5* 注意：下载可能出现卡顿，直接 ctrl+c 中断，然后再次输入命令即可。 我就下载了下面这么多，共计78429条。 1.2 数据格式 截取部分数据，格式如下： 2019 01 01 00 -65

VUE中使用Echarts 1. 方式一 echarts 的引用 (需要自己初始化echart对象[init], 然后setOption({})设置属性，构建echart图表) echart的安装引入 安装命令：npm install echarts --save 页面引入：import Echarts from 'echarts' 页面使用：在created mounted methods 等区域使用 //初始化echart对象 let echarts = Echarts.init(document.getElementById('chartBox')); //设置参数 echarts.setOption(this.pieOption); //监听重置大小的处理事件 window.addEventListener('resize', this.handleResize); //绑定图表点击事件 echarts.on("click", clickEvent); //可以在 main.js 中全局引入 echarts import echarts from "echarts"; Vue.prototype.$echarts = echarts; // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document

今天记录一个Echart统计图中的几个小知识点以及方法（写的不好，仅供参考）：如有不恰当之处，劳烦留言交流 （手动抱拳） 原图入选所示第一张图，改造后的图是第二张：　　 　　　　　　　　　　　　　　　　　　　　　　　　 改造前 　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　 改造后 　　　　　　　　　　　　　　 　　首先看到这个图的颜色，颜色的选择按照自己的喜好和统计图所应用的场景去找合适的几个颜色组合，顺便说一句，统计图所应用场景不同，颜色的选也非常重要的，有些需要鲜艳一些，有些庄重一些，还有些需要有质感等等，所以统计图颜色在某些场景中非常重要，因为颜色能给人最直观视觉冲击、第一映像；此图中的颜色，是本人自己找了一个， var myColor =[ '#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6' ] 接下来看看这个颜色是如何应用到图中的文字、图形上的， 左边文字上 axisLabel 的颜色是在option中的对应的位置 这么设置的，关键地方写了注释 axisLabel: { textStyle: {　 //文字的风格 　　 　　 //这个地方颜色是支持回调函数的这种的，如果是一种颜色则可以写成： color :'#1089E7' color : function(value,

简单介绍 一般大家在学习python机器学习的时候，用的最多的可视化的包就是matplot和seaborn, 这2个可视化的优点在于门槛低，代码容易理解，并且容易上手。 唯一的可能的缺点就是画出来的图不能交互，简单来说就是matplot和seaborn给出的就是一个图片，当将鼠标放到图上的时候，不会显示出图中具体的数字是多少。 而使用plotly之后，可以将图片放大缩小，可以显示与不显示不同类别数据，等等。并且更加方便的是，这个图可以嵌入到html里面，可以直接放到网页上面。我们话不多说，用matplot和plotly来展示相同的数据。 当前使用的数据是股票数据，使用pandas_datareader中的yahoo的API下载一些股票数据，将下载阿里巴巴，苹果，微软，和IBM的每天最高价，并且做出一个图出来。 import pandas_datareader as pdr import numpy as np import pandas as pd Stock_list = ['BABA', 'AAPL', 'MSFT', 'IBM'] Data = [pdr.get_data_yahoo(i)['High'] for i in Stock_list] Data_month = [i.resample('1m').mean() for i in Data] result_df =

摘要： 在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下： https://echarts.baidu.com/index.html ，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。 本文流程： 1.安装插件→2.引入Echarts→3.创建图表→4.修改样式→5.接入数据 一.安装插件 方法一：npm安装Echarts npm install echarts -S 方法二：cnpm安装Echarts 1.首先我们需要安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2.然后 cnpm install echarts -S 二.引入Echarts 方法一：全局引入 打开 main.js 文件引入Echarts import echarts from 'echarts' 然后将echart添加到vue的原型上，这样就可以全局使用了 Vue.prototype.$echarts = echarts 方法二：局部引入 全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需要来局部引入，比如我们需要引入一个柱状图 // 引入基本模板 let

一、现象 1. 如下报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 1: node: :Abort() [ /usr/local /bin/node] 2: node: :OnFatalError(char const*, char const*) [ /usr/local /bin/node] 3: v8: :internal : :V8 : :FatalProcessOutOfMemory(char const*, bool) [ /usr/local /bin/node] 4: v8: :internal : :Factory : :NewFixedArray(int, v8: :internal : :PretenureFlag) [ /usr/local /bin/node] 5: v8: :internal : :OrderedHashTable<v8 : :internal : :OrderedHashMap, 2> : :Rehash( v8: :internal : :Handle<v8 : :internal : :OrderedHashMap>, int) [ /usr/local /bin/node] 6: v8: :internal