如何简单快速的做出一个中国地图, 并且显示各个省份数据(数据随机虚构)

本贴最后更新于 1810 天前,其中的信息可能已经斗转星移

如何简单快速的做出一个中国地图,并且显示各个省份名称数据;

用 Echarts 即可以简单快速写出;

需要导入 china.js(现在官方不提供下载,需要自行下载,也可以留言获取链接)。

成品预览图:

image.png

源码:

<!DOCTYPE html> <html> <head> 首先,引入jquery.js echarts.js china.js(必要)    <script src="/jquery.js"></script> <script src="echarts.min.js"></script> <script src="china.js"></script> <head> <body>   <!--<创建一个DIV容器 方便初始化-->   <div id="china-map" style="width:1300px;height:900px;"></div> </body> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('china-map')); function randomData() { return Math.round(Math.random() * 1000); } var data = [{ name: '内蒙古', value1: randomData(), value2: randomData(), }, { name: '新疆', value1: randomData(), value2: randomData(), }, { name: '甘肃', value1: randomData(), value2: randomData(), }, { name: '云南', value1: randomData(), value2: randomData(), }, { name: '福建', value1: randomData(), value2: randomData(), }, { name: '贵州', value1: randomData(), value2: randomData(), }, { name: '广东', value1: randomData(), value2: randomData(), }, { name: '青海', value1: randomData(), value2: randomData(), }, { name: '西藏', value1: randomData(), value2: randomData(), }, { name: '四川', value1: randomData(), value2: randomData(), }, { name: '黑龙江', value1: randomData(), value2: randomData(), }, { name: '湖北', value1: randomData(), value2: randomData(), }, { name: '山东', value1: randomData(), value2: randomData(), }]; var resultdata0 = []; var sum0 = 0; var titledata = []; for(var i = 0; i < data.length; i++) { var d0 = { name: data[i].name, value: data[i].value1 + data[i].value2 }; titledata.push(data[i].name) resultdata0.push(d0); sum0 += data[i].value1 + data[i].value2; } function NumDescSort(a, b) { return a.value - b.value; } resultdata0.sort(NumDescSort); var option = { title: [{ //标题 text: '销售量统计', subtext: '纯属虚构', left: 'center' }, { //右上角全部 text: '合计 : ' + sum0, left: 'center', top: 50, width: 100, textStyle: { color: '#555', fontSize: 16 } }], tooltip: { trigger: 'item' }, visualMap: {   //左下角拉条 min: 0, max: 2500, // left: 'left', top: '60%', text: ['高', '低'], calculable: true, colorLightness: [0.2, 100], color: ['#313CFF', '#CACDFF'], dimension: 0 }, toolbox: { //右边工具栏 show: true, orient: 'vertical', // left: 'right', // top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, grid: { //右边的柱状图 right: '5%', top: '30%', bottom: '30%', // height:'40%', width: '30%' }, xAxis: [{ position: 'top', type: 'value', boundaryGap: false, splitLine: { show: false }, axisLabel: { rotate: 45,      //刻度旋转45度角 textStyle: {} } }], yAxis: [{ type: 'category', data: titledata, axisTick: { alignWithLabel: true } }], barWidth: 30, series: [{ //地图 z: 1, name: '全部', type: 'map', map: 'china', left: '5%', top: '24%', bottom: '30%', height: '50%', width: '50%', zoom: 1, label: { normal: { show: true }, emphasis: { show: true } }, //roam: true, data: resultdata0 }, { //柱状图 name: '全部', z: 2, type: 'bar', barWidth: '%10', label: { normal: { show: true }, emphasis: { show: true, } }, itemStyle: { //鼠标悬浮时的颜色 emphasis: { color: "rgb(254,153,78)" } }, data: resultdata0 }] }; myChart.setOption(option); </script> </html>
  • ECharts
    20 引用 • 20 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    495 引用 • 931 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 641 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 345 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    89 引用 • 122 回帖 • 621 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 544 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 549 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 647 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 160 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 8 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    239 引用 • 224 回帖
  • danl
    163 关注
  • CodeMirror
    2 引用 • 17 回帖 • 162 关注
  • 安全

    安全永远都不是一个小问题。

    203 引用 • 818 回帖 • 2 关注
  • Excel
    31 引用 • 28 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 84 关注
  • Access
    1 引用 • 3 回帖 • 2 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • 自由行
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 397 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 32 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 529 关注