在项目中运用到图形展示数据太常见了，echarts是一款使用率非常高的插件工具，很多大平台都是使用echarts；

一般运用到条形、折线、扇形图，今天说一说在中国地图上展示各地数据；

首先要准备中国地图的JS文件，可以在网盘下载，链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n

也可以在github上克隆下来:https://github.com/Luna829/incubator-echarts/blob/master/map/js/china.js

引入echarts后引入china.js文件

<head>

        <meta charset="utf-8" />

        <title>echarts中国地图数据</title>

        <script type="text/javascript" src="js/echarts.min.js" ></script>

        <script type="text/javascript" src="js/china.js" ></script>

    </head>

PS：有一个小bug，想使用china.js必须使用echarts.min.js;  引入echarts.common.min.js是无效的；测试多次才发现这个问题，也是非常烧脑了；

写入随机数来测试数据：

function randomData() {

     return Math.round(Math.random()*);

}

数据：

var mydata = [

                {name: '北京',value: '' },{name: '天津',value: randomData() },

                {name: '上海',value: randomData() },{name: '重庆',value: randomData() },

                {name: '河北',value: randomData() },{name: '河南',value: randomData() },

                {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },

                {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },

                {name: '安徽',value: randomData() },{name: '山东',value: randomData() },

                {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },

                {name: '浙江',value: randomData() },{name: '江西',value: randomData() },

                {name: '湖北',value: randomData() },{name: '广西',value: randomData() },

                {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },

                {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },

                {name: '吉林',value: randomData() },{name: '福建',value: randomData() },

                {name: '贵州',value: randomData() },{name: '广东',value: randomData() },

                {name: '青海',value: randomData() },{name: '西藏',value: randomData() },

                {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },

                {name: '海南',value: randomData() },{name: '台湾',value: randomData() },

                {name: '香港',value: randomData() },{name: '澳门',value: randomData() }

            ];

自己的数据写入value里

实例化option，配置属性，data置入数据

var optionMap = {

                backgroundColor: '#FFFFFF',

                title: {

                    text: '全国地图大数据',

                    subtext: '',

                    x:'center'

                },

                tooltip : {

                    trigger: 'item'

                },  

                //左侧小导航图标

                visualMap: {

                    show : true,

                    x: 'left',

                    y: 'center',

                    splitList: [

                        {start: , end:},{start: , end: },

                        {start: , end: },{start: , end: },

                        {start: , end: },{start: , end: },

                    ],

                    color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']

                },  

                //配置属性

                series: [{

                    name: '数据',

                    type: 'map',

                    mapType: 'china',

                    roam: true,

                    label: {

                        normal: {

                            show: true  //省份名称

                        },

                        emphasis: {

                            show: false

                        }

                    },

                    data:mydata  //数据

                }]

            };

        //初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        //使用制定的配置项和数据显示图表

        myChart.setOption(optionMap);

效果如图：

echarts实现中国地图数据展示的更多相关文章

  1. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

  2. react使用echarts地图实现中国地图大区展示

    日常项目中经常会用到百度地图或者echarts图标展示,今天给大家展示的是如何在react开发项目中使用百度echars的地图展示,把中国地图分为东北大区.华东大区.华南大区.华西大区.华中大区以及华 ...

  3. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  4. 用echarts绘制中国地图

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  5. 小程序Echarts 构建中国地图并锚定区域点击事件

    小程序Echarts 构建中国地图并锚定区域点击事件 Step1 效果展示 使用的绘图框架为 Echarts for Wexin 具体API文档地址请点击 ----> Step2 条件准备 1. ...

  6. vue+echarts+datav大屏数据展示及实现中国地图省市县下钻

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...

  7. echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍

    今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

  8. ECharts（中国地图）的使用 及 非空 tooltip formatter 验证

    中国地图使用频率很高下载文件:        echarts.min.js网址:               http://echarts.baidu.com/download.html点击:     ...

  9. echarts画中国地图并上色

    任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool ...

随机推荐

  1. Java 实现的各种经典的排序算法小Demo

    由于有上机作业,所以就对数据结构中常用的各种排序算法都写了个Demo,有如下几个: 直接插入排序 折半插入排序 希尔排序 冒泡排序 快速排序 选择排序 桶排序 Demo下载地址 下面谈一谈我对这几个排 ...

  2. 阿里电话面试问题----100万个URL如何找到出现频率最高的前100个？

    内推阿里电话面试中面试官给我出的一个题: 我想的头一个解决方案,就是放到stl 的map里面对出现的频率作为pair的第二个字段进行排序,之后按照排序结果返回: 下面口说无凭,show your co ...

  3. VB.NET版机房收费系统---组合查询

    查询的意思就是查找,寻找,指在某一个或几个地方找出自己所要的信息,假如我想搜索一下我自己写的博客,名字叫做初雪之恋,我在百度的搜索框中输入丁国华三个字,会有怎样的惊喜等着我? 啊哦,这个信息并不是我想 ...

  4. 开放源码的安卓天气应用-android学习之旅(73)

    我在github上面发布了简易的天气应用,能够简单显示全国各个省市县市的天气 效果图片如下 源代码我放在github上了.我希望大家可以去下载,修改以后在上传维护,我的代码很简单.算是抛砖引玉,希望大 ...

  5. 分布式进阶(十二)Docker固定Container IP

    使用pipework工具. 前提:每个Container所做的工作现在还很少,可以不用save.commit. 为了便于通信,自定义一个网桥(192.168.1.180/24),使之IP与宿主主机IP ...

  6. HTML入门笔记案例展示(2)

    结上一篇(1)http://blog.csdn.net/qq_32059827/article/details/51399288 6.超链接(重要): 超链接标签 就是 a 标签 <!-- 超链 ...

  7. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  8. AngularJS中的依赖注入

    依赖注入 | Dependency Injection 原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所 ...

  9. （十五）UITableViewCell的常见属性

    UItableViewCellStyle: typedef NS_ENUM(NSInteger, UITableViewCellStyle) { UITableViewCellStyleDefault ...

  10. android自定义状态栏颜色

    我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错 ...