在项目中运用到图形展示数据太常见了，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. iOS中 UISearchController 搜索栏 UI技术分享

    <p style="margin-top: 0px; margin-bottom: 0px; font-size: 20px; font-family: 'STHeiti Light' ...

  2. 存储那些事儿（五）：BTRFS文件系统之Btree结构详解

    Btree数据结构可以说是BTRFS文件系统的基础.它提供了一个通用的方式去存储不同的数据类型.它仅仅存储3个数据类型:key, item和block header. btrfs_header的定义如 ...

  3. nginx root、alias、location指令使用方法

    一．nginx root指令 1. Nginx配置 相关配置如下图: 通过配置root目录到"/wwwroot/html/"位置 在用虚拟主机方法,主机名称是test,需要大家配置 ...

  4. epoll通俗讲解

        转载地址:http://yaocoder.blog.51cto.com/2668309/888374     首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O ...

  5. 导航控制器&nbsp;UI_08（上）

    主要内容:UINavigationController 重要:属性传值(向后一个界面传值).代理传值(向前相邻的界面传值).单例传值(不相邻的界面向前传值) 1.UINavigationControl ...

  6. Linux根文件系统介绍

    系统 根文件系统首先是一种文件系统,但是相对于普通的文件系统,它的特殊之处在于,它是内核启动时所mount的第一个文件系统,内核代码映像文件保存在根文件系统中,而系统引导启动程序会在根文件系统挂载之后 ...

  7. OC语言（七）Block复习

    看下面一道Block的面试题: int i = 10; void(^myBlock)() = ^{ NSLog(@"%d",i); }; i = 100; myBlock(); 经 ...

  8. 简单说说Android自定义view学习推荐的方式

    这几天比较受关注,挺开心的,嘿嘿. 这里给大家总结一下学习自定义view的一些技巧.  以后写自定义view可能不会写博客了,但是可以开源的我会把源码丢到github上我的地址:https://git ...

  9. C#之委托和事件

    我想,读者们可能看过一部电影叫<全民目击>,在电影中,富豪林泰婚期将至,准新娘却惨死地下停车场,林泰的富二代女儿林萌萌成为最大嫌疑人,林泰不惜重金聘请国内顶级律师周莉为女儿辩护,而公诉方却 ...

  10. GDAL库调试（包括跨语言调试）

    很多时候都需要调试GDAL库,尤其是像学习GDAL库中的某些算法是如何实现的时候,调试就必不可少了. 首先说明用C++的调试.以VS2008为例进行说明. 编译DEBUG版本的GDAL库,这个可以参考 ...