说在前面

想自己实现一个可视化的中国地图(可以实现如用户来源省份数据统计功能),网上搜了一下,翻了几页几乎都是第三方库(如echarts.js)实现的,简直不能忍。

不是第三方库不好,只是要花时间去适应别人的插件,而且从根本角度来说自己做有更大的修改空间,有针对性。

所以打算自己从基本开始实现一遍,占个坑,完成后传上来。

大概想了两种思路:

1用canvas画出整个地图

2用一个中国地图图片,然后设置area为多边形,并赋值coords

为了实现移动到每个省份(区域 )会有对应的反应,无论哪种方法都要获得地图的拐点,或者说地图的边界线。

[前端随笔][JavaScript][自制数据可视化] “中国地图”的更多相关文章

  1. Echarts数据可视化series-map地图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. 帆软 联合 创始人 数据可视化 中国 发展 FineReport FineBI

    丧心病狂!帆软公司的成立竟源于一个被初恋抛弃的程序员 - 大数据-炼数成金-Dataguru专业数据分析社区http://dataguru.cn/article-7500-1.html 帆软联合创始人 ...

  3. 前端随笔 - JavaScript中的闭包

    前阵子重新复习了一下js基础知识,第一篇博客就以分享闭包心得为开始吧. 首先,要理解闭包,就必须要了解一个概念:作用域链. 作用域链 作用域代表着可访问变量的集合,变量分为全局变量和局部变量两种,在函 ...

  4. [前端随笔][JavaScript] 制作一个富文本编辑器

    写在前面 现在网上有很多现成的富文本编辑器,比如百度家的UEditor,kindeditor,niceditor等等,功能特别的多,API也很多,要去熟悉他的规则也很麻烦,所以想自己了解一下原理,做一 ...

  5. 让数据可视化变得简单 – JavaScript 图形库

    作者 | 董叶 公司决策层会围绕着数据来制定相应的策略,数据的重要性与日俱增,政府.金融机构.互联网大厂正在以前所未有的速度收集数据,面对扑面而来的数据,没有抽象.视觉层的帮助,我们很难快速理解掌握其 ...

  6. 4款开源免费的数据可视化JavaScript库

    概述:交互式数据可视化在很大程度上取决于JavaScript库的任务能力.在这篇文章中,我们将看看四个JavaScript库:D3,InfoVis,Processing.js,和Recline.js. ...

  7. 利用Echarts实现全国各个省份数据占比,图形为中国地图

    最近项目需求,需要一个对于全国各个省份的数据分析,图形最好是地图的样子,这样子更为直观. 最先想到的图表插件是Echarts,他的文档相对于阿里的G2,G6更加清晰一些.在Echarts 里找到的个 ...

  8. 数据可视化地图制作教程,这个免费BI软件轻松搞定

    ​数据可视化地图制作教程 现在做数据分析基本上离不开数据可视化,在大量的数据中,有很大一部分数据都与地理信息相关,因此,在数据可视化中,可视化地图是非常重要的一部分.无论是新闻报道,还是商业分析报告, ...

  9. Echarts数据可视化,easyshu图表集成。

      介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...

随机推荐

  1. 【枚举暴力】【UVA11464】 Even Parity

    传送门 Description 给你一个0/1矩阵,可以将矩阵中的0变成1,问最少经过多少此操作使得矩阵任意一元素四周的元素和为偶数. Input 第一行是一个整数T代表数据组数,每组数据包含以下内容 ...

  2. Codeforces Round #330 (Div. 2) B. Pasha and Phone

    B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  3. TCP/UDP HTTP

    TPC/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据.关于TCP/IP和HTTP协议的关系,网络有一段比较容易理解的介绍:“我们在传输数据时,可以只 ...

  4. bzoj 4725 [POI2017]Reprezentacje ró?nicowe 暴力

    [POI2017]Reprezentacje ró?nicowe Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 141  Solved: 67[Sub ...

  5. CodeVS 1017 DP

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描 ...

  6. 问题03.如果有多个集合的迭代处理情况【使用MAP】

    在SQL开发过程中,动态构建In集合条件查询是比较常见的用法,在Mybatis中提供了foreach功能,该功能比较强大,它允许你指定一个集合,声明集合项和索引变量,它们可以用在元素体内.它也允许你指 ...

  7. SpringBoot打war包并部署到tomcat下运行

    一.修改pom.xml. 1.packaging改为war 2.build节点添加<finalName>你的项目名</finalName> 二.修改项目启动类,继承Spring ...

  8. SpringMVC+MyBatis开发中指定callSettersOnNulls,可解决返回字段不全的问题

    Spring+MyBatis开发过程中,在xxMapper.xml配置文件进行select查询时resultType="map",如果要查询的字段是空值,在返回的map中会出现找不 ...

  9. 希尔排序Shell sort

    希尔排序Shell Sort是基于插入排序的一种改进,同样分成两部分, 第一部分,希尔排序介绍 第二部分,如何选取关键字,选取关键字是希尔排序的关键 第一块希尔排序介绍 准备待排数组[6 2 4 1 ...

  10. 洛谷P3764 签到题 III

    题目背景 pj组选手zzq近日学会了求最大公约数的辗转相除法. 题目描述 类比辗转相除法,zzq定义了一个奇怪的函数: typedef long long ll; ll f(ll a,ll b) { ...