在项目中运用到图形展示数据太常见了，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. my golib：db query Result

    go提供了一套统一操作database的sql接口,任何第三方都可以通过实现相应的driver来访问感兴趣的数据库.譬如我们项目中使用的Go-MySQL-Driver. go提供了一套很好的机制来处理 ...

  2. centos vsftpd 553 Could not create file解决方法

    centos vsftpd 553 Could not create file解决方法   问题由于selinux引起的,问题解决办法:   www.2cto.com   输入:getsebool - ...

  3. C++中将构造函数或析构函数定义为private

    今天面试被问到了这个单例模式常用到的技术手段,下面进行分析: 很多情况下要求当前的程序中只有一个object.例如一个程序只有一个和数据库的连接,只有一个鼠标的object.通常我们都将构造函数的声明 ...

  4. Material Design之NavigationView和DrawerLayout实现侧滑菜单栏

    本文将介绍使用Google最新推出规范式设计中的NavigationView和DrawerLayout结合实现侧滑菜单栏效果,NavigationView是android-support-design ...

  5. cocos2d-x 游戏开发之有限状态机(FSM) (三)

    cocos2d-x 游戏开发之有限状态机(FSM) (三) 有限状态机简称FSM,现在我们创建一个专门的FSM类,负责管理对象(Monkey)的状态.然后Monkey类就实现了行为与状态分离.Monk ...

  6. Android Preference详解

    转载请标明出处:ttp://blog.csdn.net/sk719887916/article/details/42437253 Preference 用来管理应用程序的偏好设置和保证使用这些的每个应 ...

  7. Struts源码之OgnlValueStack

    public class OgnlValueStack implements Serializable, ValueStack, ClearableValueStack, MemberAccessVa ...

  8. obj-c编程19:关联对象

    对于一些无法子类化的实例对象来说,如果希望将一个对象与其绑定该如何做呢? 以下示例虚构了一个HyConsoleAlert类,User类将会使用该类在控制台显示定制的告警.如果User中包括多个Aler ...

  9. HBase Compaction

    当 client 向 hregion 端 put() 数据时, HRegion 会判断当前的 memstore 的大小是否大于参数hbase.hregion.memstore.flush.size 值 ...

  10. how tomcat works 读书笔记 十一 StandWrapper 下

    StandardWrapperValve StandardWrapperValve是StandardWrapper的基础阀,主要完成了三个工作. 1 调用StandardWrapper的allocat ...