- 基于VUE2-dataV和echarts实现的可视化大屏,百分比适配PC端
风流野趣fly
echarts信息可视化前端vue.jsjavascriptvscode大数据
可视化平台中,数据分别通过仪表盘、环状图、柱形图、曲线图、滚动表格等多种形式展示数据变化。可视化平台大致分为左、中、右三部分,左侧由能耗总览、耗能占比、库存预警构成,中间由数据总览、销售计划完成率构成,右侧由销售统计、销售排名(TOP8)、生产统计构成。平台右上角动态显示当前系统日期、星期、时间,格式。在管理端进行添加数据后,数据可视化图表进行相应变化。1.能耗总览仪表盘,统计分析耗电量、耗水量、
- DataV的安装与使用(Vue3版本)
炒毛豆
vue.js前端
1、DataV(vue3)地址:DataVVue3+TS+Vite版|DataV-Vue32、使用npminstall@kjgl77/datav-vue3安装3、全局引入。4、此时就可以按需使用了~
- 中国地图省市县区数据抓取
广东数字化转型
java省市县地图抓取
抓取地址:DataV.GeoAtlas地理小工具系列https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.75386074913891&zoom=4.5抓取代码:抓取后,可以用BeyondCompare4工具查看比较数据抓取是否正确。packagecom.lc.iot.c
- Echarts画区域飞线地图
罗兰Yolanda
vueechartsjavascript前端
最近项目要求榆林市飞线图,地图上特定散点图加飞线效果,看效果:1、echarts注册地图,如榆林市地图数据yls.json(https://geo.datav.aliyun.com/areas_v3/bound/610800_full.json)importechartsfrom"echarts/lib/echarts";importyls_jsonfrom"./yls.json";letdata
- 【可视化大屏系列】DataV的使用
元气满满的大咸鱼
可视化大屏系列可视化大屏数据看板DataV
以下内容为近期个人学习总结,若有错误之处,欢迎指出!可视化大屏开发系列——DataV的使用一、介绍二、注意事项1、技术支持2、兼容性3、状态更新三、实现效果四、使用(在vue2项目中)1.npm安装2.main.js中引入3.开启愉快地玩耍(1)全屏容器(2)边框(3)装饰(4)图表(5)其它图表推荐A.水位图B.轮播表C.胶囊柱图D.排名轮播表E.锥形柱图一、介绍DataV是一款用来做大屏数据展
- 使用Vue 3 + DataV搭建大数据可视化大屏技术框架实战指南
不知名靓仔
vue.js信息可视化前端大屏端datav大数据
在大数据时代,数据可视化成为了企业和组织理解复杂数据的关键手段。Vue3,作为新一代的前端框架,以其更高效的性能和更灵活的CompositionAPI吸引了众多开发者。而DataV,阿里巴巴开源的数据可视化组件库,专为大屏幕展示设计,提供了丰富的图表和组件,是搭建大数据可视化大屏的理想选择。本文将详细介绍如何使用Vue3结合DataV快速搭建一个数据大屏项目,从环境搭建到功能实现,一步步带你走进数
- echart离线地图下载地址
前端小咸鱼一条
echarts
链接:离线地图地址https://datav.aliyun.com/portal/school/atlas/area_selector
- 【geopandas】python 绘制中国地图并利用经纬度标注散点
GUlGA
python开发语言
获取地图的json或shp文件可从http://datav.aliyun.com/tools/atlas/index.html获取参考:https://blog.csdn.net/hq19940416/article/details/119808424读取数据绘制地图importgeopandasasgpdimportmatplotlib.pyplotaspltimportpandasaspdfr
- 前端可视化数据大屏(1)
香蕉麻花皮
前端vue.jsjavascript
效果图技术架构:datav,vue2,echarts我们一步一步的来实现一个简单的可视化数据大屏,开始吧!!1,vue脚手架搭建项目太简单了,百度上可以搜索,我这里就不多说了,把router装好就行2,datav的安装与配置2.1在控制台上输入命令下载datavnpminstall@jiaminghi/data-view2.2将datav的组件注册为全局组件在min.js文件里,注册datav为全
- hbuiler中使用npm安装datav
fanxingxue
npm前端node.js
注:datav边框样式目前使用时:适用于网页,不适用于app1、先安装node安装、配置Node路径2、为Node配置环境变量3、在hbuilder的设置中填写node的路径配置4、打开cmd输入npminstall@jiaminghi/data-view安装dataV,(直接在C盘中执行该命令即可,不许切换路径),在hbuilder的终端安装应该也可以。5、若遇到如下报错,请查看node文件的权
- 数据大屏项目Vue3+TypeScript+tailwindcss+Vite+DataV+Echart+pinia
蹦哒
vue.js前端javascript
疫情数据大屏(ts+vue3)本着学习vue3+ts技术栈的目前,敲了这个项目。主要的技术栈为Vue3、Vite、DataV、Echart、TypeScript、pinia、vue-router、tailwindcss等数据的接口使用的是163的接口,此项目使用到的数据可能存在误差,正确的数据请到相关网站查阅,此项目主要的侧重于前端技术站栈的练习,不在于数据本身。注意:本地dev已经配置好vite
- 获取地理地图坐标的网址
fivestar2009
javascript
DataV.GeoAtlas地理小工具系列http://datav.aliyun.com/portal/school/atlas/area_selector获取地理坐标网址,记录下
- Threejs 地图3D可视化
傲娇的koala
3d
大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群可以直接去githubgithub.com/1023byte/3Dmap前言threejs小练习,从头实现如何加载地理数据,并将其映射到三维场景中的对象上。获取数据在开始绘制图形前,需要一份包含地理信息数据,我们可以从阿里云提供的小工具获取datav.aliyun.com/portal/school/atl
- Threejs 开发3D可视化地图
zz_jesse
3d
可以直接去githubgithub.com/1023byte/3Dmap前言threejs小练习,从头实现如何加载地理数据,并将其映射到三维场景中的对象上。获取数据在开始绘制图形前,需要一份包含地理信息数据,我们可以从阿里云提供的小工具获取datav.aliyun.com/portal/school/atlas/area_selector在范围选择器中,可以选择整个或者各个省份的地理信息数据。生成
- 前端实现自适应屏幕数据可视化大屏(vue + v-scale-screen组件 + dataV组件)
夜轩紫语
日常总结数据可视化vuereact
前言目前市面上有很多付费的数据可视化平台,作为一个代码编程人员,为啥不自己搞一套呢,不仅自己可以增加自己的技能,也可以减少开发成本,何乐而不为呢?写这篇文章,一方面工作有需求要实现数据可视化大屏,另一方面当然现在也有很多场景都用到数据可视化大屏,如报告总结、数据跟踪等等,在此总结分享给大家,写的不好的地方欢迎指出批评,谢谢。什么是数据可视化的大屏众所周知,未来的数据可视化趋势已成为了必然性,越来越
- Vue3中按需导入使用dataV的vue3版本
Lee_Yu_Fan
vuevue.js前端
前言:仅供参考,目前本人在项目使用是没问题的1、安装data-vue3npminstall@dataview/datav-vue32、按需导入Contentimport{BorderBox1}from'@dataview/datav-vue3';结果报错如下:通过这个博主文章中的解决方法二(Vue3安装dataV报错以及解决方案_vue3引入datav报错_呆呆的机器人儿~的博客-CSDN博客)-
- Vite,Vue3项目引入dataV报错的解决方法
新时代的弩力
DataVvue.js
背景:开发一个大屏项目中,需要是要DataV的那边边框,装饰等,只是DataV是基于vue2的,vue3版的作者还在开发中,于是翻了DataV的源码,发现使用esm方式时是直接引入源码而不经过打包,其源码中使用的vue语法vue3也支持,所以可以直接在vue3中引入使用.vite,vue3项目直接引入DataV安装npminstall@jiaminghi/data-view使用importdata
- VUE引入DataV报错记录
zyk_520
Vuevue.js前端javascript
DataV官网(不支持Vue3):Welcome|DataV一、按照官网引入后报错【1】Failedtoresolveentryforpackage"@dataview/datav-vue3".Thepackagemayhaveincorrectmain/module/exportsspecifiedinitspackage.json.将@dataview\datav-vue3/package.j
- vue3+echarts绘制某省区县地图
栀椩
web开发地图接口访问开发echarts前端javascript
vue3+echarts绘制某省区县地图工作中经常需要画各种各样的图,echarts是使用最多的工具,接近春节,想把之前画的echarts图做一个整合,方便同事和自己随时使用,因此用vue3专门写了个web项目,考虑之后不断完善其中有这么个需求,需要展示某省各区县的数据,写在vue3项目中,最终展示结果如下:大体的思路如下:在阿里云dataV数据可视化平台获取数据整合某省各区县的数据成为一个单独的
- vue echarts地图
每一天,每一步
VueEChartsvue.jsechartsjavascript
下载地图文件:DataV.GeoAtlas地理小工具系列范围选择器右侧行政区划范围中输入需要选择的省份或地市,选择自己想要的数据格式,这里选择了geojson格式,点右侧的蓝色按钮复制到浏览器地址栏中,打开的geojson文件内容右键另存为json文件即可。实现代码:init(){//画布初始化if(myChart){myChart.dispose();//销毁实例}letmapDom=docum
- 关于GIS的一些见解,GIS数据(一)
秋名山大前端
三维可视化arcgis前端javascript
GIS数据(一)文章目录GIS数据(一)矢量数据与栅格数据矢量、栅格数据文件矢量数据文件栅格数据文件网上关于gis基础的知识很多了,小编在这里就不做复制粘贴了,可以先学习《前后端都要懂一点的GIS》文章中的内容https://www.yuque.com/datav/datav-cool/swteb8GIS(地理信息系统)数据在空间分析和地图制图中起着关键的作用。GIS数据通常分为矢量数据和栅格数据
- 入门级的 DataV 教程,适用于 Vue 2
ascarl2010
前端VueDataVvue.js前端javascript
入门级的DataV教程,适用于Vue2。这个教程将指导您创建一个名为datav-project的Vue项目,并展示如何在其中使用DataV。我们将从安装VueCLI开始,然后创建项目,接着添加DataV,并最后显示一个简单的数据可视化组件。1.安装VueCLI确保您已经安装了Node.js和npm。然后在命令行中运行以下命令以安装VueCLI(如果尚未安装):npminstall-g@vue/cl
- echarts map - 市/县级显示方法
Coldhands
1.获取地图json工具(仅中国):http://datav.aliyun.com/tools/atlas/#&lat=42.35854391749705&lng=106.10595703125&zoom=52.整理地图json数据工具:http://geojson.io/#map=2/20.0/0.0导出类型必须为geojson,将.geojson后缀改成.json就可以使用。vue中使用imp
- Python-用中国地图验证四色定理
西唯兵欧泡
Pythonpython开发语言算法
1.安装依赖项(1)首先需要安装对应的库。如果代码报错,很可能是因为没有安装相关的库,根据报错提示,安装对应的库即可。(2)中国地图链接网址http://datav.aliyun.com/tools/atlas/index.html2.方法思路本题抽象出来其实就是着色问题:已知一个图,要求给图上每个点上色,并保证该点的颜色与它的邻接点的颜色都不相同。假设地图邻接关系如右所示,那么它的状态解空间树如
- Leaflet + Vue使用案例
hometing218
Leafletvue.js前端leaflet
区域边界及级联1.获取区域边界JSON数据,下载后放到项目里https://datav.aliyun.com/portal/school/atlas/area_selectordata(){return{areaFeaturesData:null,//南通市json数据areaLayer:null,//区域边界图层isCheckClick:false,currentArea:null,//当前js
- echarts实现各个省份地图之广东省(海南岛显示过小问题解决)
萬wan事顺意
各省份json:http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=22.65267050733856&lng=114.18983459472656&zoom=10html部分js部分initMap();varhainan="广东"//地图functioninitMap(){//地图上显示的数据vardataJson=[{n
- vue中echarts3d 使用(3d地图上有柱状图数据,吉林省)
一个没有灵魂的女程序媛
echartsvue.js3d
1.下载echarts和echarts-glecharts-gl是3d插件2.去阿里云上下载吉林省的地图信息(看实际需求下载各省地图数据)·https://datav.aliyun.com/portal/school/atlas/area_selector3.组件代码如下importjilinProvincefrom'@/assets/get/jilinProvince.json'import'e
- 利用python快速获取全国各省市shp文件
傲寒。
pythonPython数据处理python信息可视化开发语言
一个方便快捷的获取全国各省市矢量边界shp文件的方法。一、获取目标城市和行政编码如果有高德地图APIKEY即可实现全自动如果没有的话只能手动获取目标城市的邮政编码或城市代码手动获取:1.打开阿里云的数据可视化平台http://datav.aliyun.com/tools/atlas/2.选择目标城市及其行政编码自动获取defget_district_code(city,api_key):url=d
- shp文件与数据库(创建表)
疏狂难除
数据库
前言第三方库准备shp文件是什么?笔者就不多做解释。后面将使用python的一些第三方库1、sqlalchemy2、pyshp3、geoalchemy24、geopandas这四个是主要的库,具体怎么使用可以参考相关教程,当然还有其他库,后面在介绍。数据库准备shp文件一般包含空间数据,所以选用的数据库是PostgreSQL。具体操作不多说。shp文件准备打开阿里云数据可视化平台,DataV.Ge
- 解决请求https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=630100_full 返回403的问题
不完美女孩-
javascript前端
解决请求https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=630100_full返回403的问题
- java短路运算符和逻辑运算符的区别
3213213333332132
java基础
/*
* 逻辑运算符——不论是什么条件都要执行左右两边代码
* 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的
* 原理很简单,并联电路代表短路或(||),串联电路代表短路与(&&)。
*
* 并联电路两个开关只要有一个开关闭合,电路就会通。
* 类似于短路或(||),只要有其中一个为true(开关闭合)是
- Java异常那些不得不说的事
白糖_
javaexception
一、在finally块中做数据回收操作
比如数据库连接都是很宝贵的,所以最好在finally中关闭连接。
JDBCAgent jdbc = new JDBCAgent();
try{
jdbc.excute("select * from ctp_log");
}catch(SQLException e){
...
}finally{
jdbc.close();
- utf-8与utf-8(无BOM)的区别
dcj3sjt126com
PHP
BOM——Byte Order Mark,就是字节序标记 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符,它的编码是FEFF。而FFFE在UCS中是不存在的字符,所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前,先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
- JAVA Annotation之定义篇
周凡杨
java注解annotation入门注释
Annotation: 译为注释或注解
An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
- tomcat的多域名、虚拟主机配置
g21121
tomcat
众所周知apache可以配置多域名和虚拟主机,而且配置起来比较简单,但是项目用到的是tomcat,配来配去总是不成功。查了些资料才总算可以,下面就跟大家分享下经验。
很多朋友搜索的内容基本是告诉我们这么配置:
在Engine标签下增面积Host标签,如下:
<Host name="www.site1.com" appBase="webapps"
- Linux SSH 错误解析(Capistrano 的cap 访问错误 Permission )
510888780
linuxcapistrano
1.ssh -v
[email protected] 出现
Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
错误
运行状况如下:
OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013
debug1: Reading configuratio
- log4j的用法
Harry642
javalog4j
一、前言: log4j 是一个开放源码项目,是广泛使用的以Java编写的日志记录包。由于log4j出色的表现, 当时在log4j完成时,log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类,但当时jdk1.4已接近完成,所以sun拒绝使用log4j,当在java开发中
- mysql、sqlserver、oracle分页,java分页统一接口实现
aijuans
oraclejave
定义:pageStart 起始页,pageEnd 终止页,pageSize页面容量
oracle分页:
select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart
sqlServer分页:
 
- Hessian 简单例子
antlove
javaWebservicehessian
hello.hessian.MyCar.java
package hessian.pojo;
import java.io.Serializable;
public class MyCar implements Serializable {
private static final long serialVersionUID = 473690540190845543
- 数据库对象的同义词和序列
百合不是茶
sql序列同义词ORACLE权限
回顾简单的数据库权限等命令;
解锁用户和锁定用户
alter user scott account lock/unlock;
//system下查看系统中的用户
select * dba_users;
//创建用户名和密码
create user wj identified by wj;
identified by
//授予连接权和建表权
grant connect to
- 使用Powermock和mockito测试静态方法
bijian1013
持续集成单元测试mockitoPowermock
实例:
package com.bijian.study;
import static org.junit.Assert.assertEquals;
import java.io.IOException;
import org.junit.Before;
import org.junit.Test;
import or
- 精通Oracle10编程SQL(6)访问ORACLE
bijian1013
oracle数据库plsql
/*
*访问ORACLE
*/
--检索单行数据
--使用标量变量接收数据
DECLARE
v_ename emp.ename%TYPE;
v_sal emp.sal%TYPE;
BEGIN
select ename,sal into v_ename,v_sal
from emp where empno=&no;
dbms_output.pu
- 【Nginx四】Nginx作为HTTP负载均衡服务器
bit1129
nginx
Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统,通过负载均衡服务器,可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器,可以带来很多好处:
负载均衡的好处
增加可用资源
增加吞吐量
加快响应速度,降低延时
出错的重试验机制
Nginx主要支持三种均衡算法:
round-robin
l
- jquery-validation备忘
白糖_
jquerycssF#Firebug
留点学习jquery validation总结的代码:
function checkForm(){
validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID
errorElement :"span",// 使用"div"标签标记错误, 默认:&
- solr限制admin界面访问(端口限制和http授权限制)
ronin47
限定Ip访问
solr的管理界面可以帮助我们做很多事情,但是把solr程序放到公网之后就要限制对admin的访问了。
可以通过tomcat的http基本授权来做限制,也可以通过iptables防火墙来限制。
我们先看如何通过tomcat配置http授权限制。
第一步: 在tomcat的conf/tomcat-users.xml文件中添加管理用户,比如:
<userusername="ad
- 多线程-用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1
bylijinnan
java多线程
public class IncDecThread {
private int j=10;
/*
* 题目:用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1
* 两个问题:
* 1、线程同步--synchronized
* 2、线程之间如何共享同一个j变量--内部类
*/
public static
- 买房历程
cfyme
2015-06-21: 万科未来城,看房子
2015-06-26: 办理贷款手续,贷款73万,贷款利率5.65=5.3675
2015-06-27: 房子首付,签完合同
2015-06-28,央行宣布降息 0.25,就2天的时间差啊,没赶上。
首付,老婆找他的小姐妹接了5万,另外几个朋友借了1-
- [军事与科技]制造大型太空战舰的前奏
comsci
制造
天气热了........空调和电扇要准备好..........
最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........
所以,我们不得不关
- dateformat
dai_lm
DateFormat
"Symbol Meaning Presentation Ex."
"------ ------- ------------ ----"
"G era designator (Text) AD"
"y year
- Hadoop如何实现关联计算
datamachine
mapreducehadoop关联计算
选择Hadoop,低成本和高扩展性是主要原因,但但它的开发效率实在无法让人满意。
以关联计算为例。
假设:HDFS上有2个文件,分别是客户信息和订单信息,customerID是它们之间的关联字段。如何进行关联计算,以便将客户名称添加到订单列表中?
&nbs
- 用户模型中修改用户信息时,密码是如何处理的
dcj3sjt126com
yii
当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦,所有我想分享一下我是怎么处理的。
场景是使用的基本的那些(系统自带),你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。
面是它的工作流程: 当创建用户的时候密码需要加密并且保存,但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密,这
- 中文 iOS/Mac 开发博客列表
dcj3sjt126com
Blog
本博客列表会不断更新维护,如果有推荐的博客,请到此处提交博客信息。
本博客列表涉及的文章内容支持 定制化Google搜索,特别感谢 JeOam 提供并帮助更新。
本博客列表也提供同步更新的OPML文件(下载OPML文件),可供导入到例如feedly等第三方定阅工具中,特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
- js去除空格,去除左右两端的空格
蕃薯耀
去除左右两端的空格js去掉所有空格js去除空格
js去除空格,去除左右两端的空格
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
- SpringMVC4零配置--web.xml
hanqunfeng
springmvc4
servlet3.0+规范后,允许servlet,filter,listener不必声明在web.xml中,而是以硬编码的方式存在,实现容器的零配置。
ServletContainerInitializer:启动容器时负责加载相关配置
package javax.servlet;
import java.util.Set;
public interface ServletContainer
- 《开源框架那些事儿21》:巧借力与借巧力
j2eetop
框架UI
同样做前端UI,为什么有人花了一点力气,就可以做好?而有的人费尽全力,仍然错误百出?我们可以先看看几个故事。
故事1:巧借力,乌鸦也可以吃核桃
有一个盛产核桃的村子,每年秋末冬初,成群的乌鸦总会来到这里,到果园里捡拾那些被果农们遗落的核桃。
核桃仁虽然美味,但是外壳那么坚硬,乌鸦怎么才能吃到呢?原来乌鸦先把核桃叼起,然后飞到高高的树枝上,再将核桃摔下去,核桃落到坚硬的地面上,被撞破了,于是,
- JQuery EasyUI 验证扩展
可怜的猫
jqueryeasyui验证
最近项目中用到了前端框架-- EasyUI,在做校验的时候会涉及到很多需要自定义的内容,现把常用的验证方式总结出来,留待后用。
以下内容只需要在公用js中添加即可。
使用类似于如下:
<input class="easyui-textbox" name="mobile" id="mobile&
- 架构师之httpurlconnection----------读取和发送(流读取效率通用类)
nannan408
1.前言.
如题.
2.代码.
/*
* Copyright (c) 2015, S.F. Express Inc. All rights reserved.
*/
package com.test.test.test.send;
import java.io.IOException;
import java.io.InputStream
- Jquery性能优化
r361251
JavaScriptjquery
一、注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:
$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的
二、请使用一个var来定义变量
如果你使用多个变量的话,请如下方式定义:
. 代码如下:
var page
- 在eclipse项目中使用maven管理依赖
tjj006
eclipsemaven
概览:
如何导入maven项目至eclipse中
建立自有Maven Java类库服务器
建立符合maven代码库标准的自定义类库
Maven在管理Java类库方面有巨大的优势,像白衣所说就是非常“环保”。
我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下,然后全部添加到ide的构建路径中,如果用了SVN/CVS,这样会很容易就 把
- 中国天气网省市级联页面
x125858805
级联
1、页面及级联js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&l