3 漏刻有时

我要认证

数据可视化技术研究

等级
TA的排名 1w+

Echarts公用代码的变量统一封装调用

在Echarts中,有些属性是通用的属性,如果在组件中重复使用,不便于调整且容易造成代码冗余,建议使用变量,然后统一传入。使用示例如下:定义变量var labelRight = { normal: { position: 'right' }};统一调用data: [{ value: -0.07, label: labelRight }, { value: -0.09, label:

2020-10-22 21:36:49

Echarts实战案例代码(46):带渐变背景颜色的倾斜角度的图表的CSS样式表解决方案

项目需求UI设计师在大屏设计时,出现了倾斜角度的Echarts角度的图表。解决思路实际上,正常渲染图表,将图表所在的容器在CSS样式表进行rotateY(30deg)设置即可。HTML代码<div class="container"> <div class="weather-side"> <div class="weather-gradient" id="main"></div> </div></.

2020-10-22 12:42:57

高德地图web服务API接口开发:获取IP定位显示当前位置的天气预报解决方案

获取当前的IP定位 //获取当前的IP定位; var key = "4d9a765939a2b76588a3341c2***" var url = "https://restapi.amap.com/v3/ip?key=" + key; $.getJSON(url, function (res) { //console.log(res); var adcode = res.adcode; $("#ip").html("当前位置.

2020-10-22 11:46:33

Echarts实战案例代码(45):拼接屏字体自适应的解决方案

在非1920*1080,16:9模式下,字体设置成固定值,在实际显示的时候会有误差。此时,需要将字体设置成自适应。封装函数 function fontSize(res) { let docEl = document.documentElement, clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

2020-10-21 18:39:57

Echarts实战案例代码(44):同时渲染折线图实现和虚线渲染实现已发生和预测趋势的解决方案

解决思路实线和虚线,都是折线图lineStyle固有的属性;分成同样数据的两组series,一段为实线,一段为虚线;Echarts代码option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ .

2020-10-17 09:14:58

php使用webSocket实现Echarts长连接自动刷新的解决方案(3):获取读取数据库数据队列进行实时刷新

//刷队列,取数据 while (true) { $msg = code(trim(rand(2, 60))); var_dump(trim($msg)); sleep(5); socket_write($msgsock, $msg, strlen($msg)); }Done!

2020-10-15 17:14:45

php使用webSocket实现Echarts长连接自动刷新的解决方案(2):后端服务端代码返回json数据

websocket.php后端的设置:php.ini需要开启sockets扩展;websocket需要CLI(命令行工具)启动服务端文件服务:php websocket.phpwebsocket.php代码$address = "127.0.0.1";$port = 9090; //调试的时候,可以多换端口来测试程序!set_time_limit(0);$sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);socket_set_bl

2020-10-15 10:14:30

php使用webSocket实现Echarts长连接自动刷新的解决方案(1):前端获取后端JSON数据

项目需求Echarts图表自动获取服务器端推送的数据,实现图表的自动渲染更新;前端代码引入JS包 <script src="js/jquery-3.3.1.min.js"></script> <script src="js/echarts.min.js"></script>HTML代码<div id="main" style="width: 1000px;height: 600px;"></div>JS..

2020-10-15 10:02:24

javascript链接高亮显示的简洁代码

var theObj;function hilight(obj){if(theObj!=null){theObj.style.background = "#fff";}if(theObj = obj){obj.style.background = "red";}}<ul><li onclick="hilight(this)">点击高亮当前行</li><li onclick="hilight(this)">点击高亮当前行1</li>

2020-09-10 15:34:36

php解决ajax使用post请求时提交的数据过多而导致et::ERR_CONNECTION_RESET的解决方案

et::ERR_CONNECTION_RESET 200 (OK)php.ini; Maximum size of POST data that PHP will accept.; Its value may be 0 to disable the limit. It is ignored if POST data reading; is disabled through enable_post_data_reading.; http://php.net/post-max-sizepost_

2020-10-14 19:22:27

javascript整数千分位格式化函数

function formatNum(str) { var newStr = ""; var count = 0; if (str.indexOf(".") == -1) { for (var i = str.length - 1; i >= 0; i--) { if (count % 3 == 0 && count != 0) { n...

2020-10-14 18:32:18

javascript实现数据自动模拟系列(1):ProgressBarWars.js进度条动画轮播

官方名称jQuery仿造星球大战激光剑效果水平进度条插件JSProgressBarWars.js使用步骤引入外部JS包<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script><script src="js/ProgressBarWars.js"></script>html代码 <div id="vaderSize" style="width: 200p

2020-10-14 18:15:41

jquery通过setInterval实现按钮的轮播点击效果

在项目开发中,需要实现按钮的定时轮播,却发现要引入一个JS轮播插件,需要“大动干戈”。于是,写了个简单的按钮轮播。CSS样式表 body { margin: 0; padding: 0; } .panel { width: 300px; height: 300px; line-height: 300px; bac.

2020-10-14 16:17:06

swiper插件实现echarts轮播的解决方案

引入外部js<!-- 轮播swiper文件 --><link rel="stylesheet" type="text/css" href="css/swiper.min.css"><script src="js/swiper.min.js"></script>HTML代码<div class="swiper-container visual_swiper2 visual_chart"> <div class="swip.

2020-10-14 10:35:22

Echarts高级进阶教程(4):大数据量处理ajax异步加载折线图数据实现心电图动画效果的解决方案

图表渲染<script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var option = { tooltip: { trigger: 'axis', axisPointer: { type: "cross".

2020-10-12 20:55:57

PHP开发中$_GET请求转为$_POST获取参数的解决方案

在php中,可以用$params = $_REQUEST['params'];来替代GET和_GET和G​ET和_POST获取提交的数据,缺点:速度比较慢 。$_GET过滤函数/* 1. 变量传递值函数 2. @param $str 变量值 */function get_param($str){ $val = !empty($_GET[$str]) ? $_GET[$str] : null; return $val;}GET和_GET和G​ET和_POST数据交互函数fu

2020-10-12 20:13:27

Echarts高级进阶教程:图表渲染大数据量导致卡顿加载时间慢等问题的解决方案

项目需求定义何为大量数据在近期的Echarts数据可视化大屏的开发中,遇见了大量数据加载的情况。首先,定义何为大量数据?本文的大量数据是指10000+条数据或者10M+文件容积大小的数据。对于日常的Echarts渲染图表,无非是对接api接口→ajax获取数据→Echarts渲染图表,这样的流程。但是这么简单地过程中,遇见大量数据加载时,问题就变得复杂起来了。产生的现象首次加载时间过慢,友好性和体验性极差;筛选条件,如默认1个小时,筛选24小时以上的数据时,加载数据过慢;折线图拖动时,data

2020-10-12 15:48:03

2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发

先上效果图:了解本次学习,先回顾《2019-nCov疫情实时趋势数据可视化Echarts学习(2):获取API数据接口后数据的清洗、处理及JSON标准格式的输出》一,将JSON数据按照echarts的data要求进行格式化; var area = [], confirmed = [], confirmedRelative = [], crued = [], died ...

2020-02-16 13:46:44

Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的

模拟数据 //模拟数据; var dataList = [], dataName = []; var newData = 1000000; for (var i = 1; i < newData; i++) { dataName.push(i); //dataList.push({name: i, value: i + parseInt(Math.random() * 100)}); dataList.push([i, i

2020-10-12 15:25:43

2019-nCov疫情实时趋势数据可视化Echarts学习(1):柱图和折线图

option = { title: { text: '全国疫情防控数据', subtext: '2019-nCov虚拟数据' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, ...

2020-02-15 21:08:13

查看更多

勋章 我的勋章
  • 领英
    领英
    绑定领英第三方账户获取
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 脉脉勋章
    脉脉勋章
    绑定脉脉第三方账户获得
  • 签到王者
    签到王者
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 技术圈认证
    技术圈认证
    用户完成年度认证,即可获得
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 阅读者勋章Lv4
    阅读者勋章Lv4
    授予在CSDN APP累计阅读博文达到90天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。
  • 分享精英
    分享精英
    成功上传11个资源即可获取