最近项目需求，需要一个对于全国各个省份的数据分析，图形最好是地图的样子，这样子更为直观。

最先想到的图表插件是Echarts,他的文档相对于阿里的G2,G6更加清晰一些。在Echarts 里找到的个

实例，效果如gif图，这里是实例的链接： https://gallery.echartsjs.com/editor.html?c=xa5_zRRpes，

看到上面的评论里，有挺多人评论说图形显示不了，因为实例上只有图表的属性Option,是无法显示

的。根据文档是需要创建一个 ECharts 实例，然后通过setOptions属性去设置图表实例的配置项以及

数据，实例化代码如下：

<div id="dom"></div>

//实例容器，一般是一个具有高宽的div元素。

//注：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

let  dom = echarts.init(document.querySelector('#dom')) //实例化dom
dom.setOption(option)//设置

重要的一点：我们需要自己引入地图数据，中国地图就需要引入china.js

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例

<script src="echarts.js"></script>

<script src="map/js/china.js"></script>

<script>

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

chart.setOption({

    series: [{

        type: 'map',

        map: 'china'

    }]

});

</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {

    echarts.registerMap('china', chinaJson);

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

    chart.setOption({

        series: [{

            type: 'map',

            map: 'china'

        }]

    });

});

完整的代码

我是使用vue框架开发，需要install一下echarts，执行npm i -S echarts

map.vue(地图组件代码)

<template>
  <div :style="styles" ref="dom"></div>
</template>
<script>
import echarts from "echarts";
import { on, off,getChartsMapData } from '@/libs/tools'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
export default {
  name: "ChartsMap",
  props: {
    /**
     * @description 图表宽
     */
    width: {
      type: String,
      default: '50%'
    },
    /**
     * @description 图表高
     */
    height: {
      type: String,
      default: '500px'
    },
    /**
     * @description 图表数据
     */
    data: {
      type: Array,
      default: () => {
        /**
         * @description getChartsMapData() 获取地图的默认数据
         */
        return getChartsMapData()
      }
    },
    /**
     * @description 设置图表的标题
     */
    title: {
      type: Object,
      default: () => {
        return {
          show: true,
          text: "排名情况",
          textAlign: 'center',
          textStyle: {
            color: "#2D3E53",
            fontSize: 30
          },
          left: 'center',
        }
      }
    },
    /**
     * @description 指定 visualMapContinuous 组件的允许的最小值
     */
    min: {
      type: [Number,String],
      default: 0
    },
    /**
     * @description 指定 visualMapContinuous 组件的允许的最大值
     */
    max: {
      type: [Number,String],
      default: 34
    },
     /**
     * @description 指定 visualMapContinuous 组件的两端的文本 如['高','低']
     */
    text: {
      type: Array,
      default: () => ['高','低']
    },
    /**
     * @description 定义 在选中范围中 的视觉元素
     */
    inRange: {
      type: Object,
      default: () => {
        return {
          color: ["#6FCF6A", "#FFFD64", "#FF5000"]
        }
      }
    }
  },
  data () {
    return {
      dom: null
    }
  },
  computed: {
    styles() {
      return {
        width: this.width,
        height: this.height
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    var option = {
      title: this.title,
      tooltip: {
        show: true,
        formatter: function(params) {
          return params.name + "：" + params.data["value"] + "%";
        }
      },
      visualMap: {
        type: "continuous",
        orient: "horizontal",
        itemWidth: 10,
        itemHeight: 80,
        text: this.text,
        showLabel: true,
        seriesIndex: [0],
        min: this.min,
        max: this.max,
        inRange: this.inRange,
        textStyle: {
          color: "#7B93A7"
        },
        bottom: 30,
        left: "left",
      },
      grid: {
        right: 10,
        top: 135,
        bottom: 100,
        width: "20%"
      },
      geo: {
        // roam: true,
        map: "china",
        left: "left",
        right: "300",
        // layoutSize: '80%',
        label: {
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          emphasis: {
            areaColor: "#fff464"
          }
        }
      },
      series: [
        {
          name: "mapSer",
          type: "map",
          roam: false,
          geoIndex: 0,
          label: {
            show: false
          },
          data: this.data
        }
      ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
};
</script>

使用代码

<template>
  <div id="app">
    <charts-map>
    </charts-map>
  </div>
</template>
<script>
import ChartsMap from "_c/charts/map"
import { getChartsMapData } from '@/libs/tools.js'
export default {
  name: 'app',
  components: {
    ChartsMap
  },
  data () {
    return {
      width: '70%',
      height: '800px',
      data: getChartsMapData(),
      min: 10,
      max: 30,
      text: ['High', 'low'],
      inRange: {
        color: ['#f00', '#fff', '#00f']
      },
      title: {
        show: true,
        text: '全国数据',
        textAlign: 'center',
        textStyle: {
          color: '#2D3E53',
          fontSize: 30,
          lineHeight: 100
        },
        left: 'center',
      }
    }
  }
}
</script>

tools.js 这个工具函数，监听浏览器的resize事件和创造假数据

　　

/**
 * @description 绑定事件 on(element, event, handler)
 */
export const on = (function () {
  if (document.addEventListener) {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.attachEvent('on' + event, handler)
      }
    }
  }
})()
/**
 * @description 解绑事件 off(element, event, handler)
 */
export const off = (function () {
  if (document.removeEventListener) {
    return function (element, event, handler) {
      if (element && event) {
        element.removeEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event) {
        element.detachEvent('on' + event, handler)
      }
    }
  }
})()
/**
 * @description 获取地图数据 getChartsMapData()
 */
 export const getChartsMapData = () => {
    const data = ["内蒙古","黑龙江","吉林","辽宁","北京","天津","河北","河南","山西","山东","江苏","安徽",
    "上海","湖北","湖南","江西","浙江","福建","台湾","广东","香港","澳门","海南","广西","贵州","云南","重庆",
    "四川","甘肃","陕西","宁夏","青海","西藏","新疆",]
    return data.map((item,index) => {
      return {
        name: item,
        value: index + 1
      }
    })
 }

我已经将他封装成一个vue组件，做成一个npm包了，直接npm install brock-charts -S 就可以使用，具体使用方法可以看这个地址：

https://www.npmjs.com/package/brock-charts

利用Echarts实现全国各个省份数据占比，图形为中国地图的更多相关文章

  1. echarts实现中国地图数据展示

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

  2. Echarts 展示两条动态数据曲线

    利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...

  3. 用echarts绘制中国地图

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

  4. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  5. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

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

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

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

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

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

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

  9. Echarts动画效果：实现数据左右移动

    1.业务背景 图形实时从后台获取数据,让图形从最右边出现,每隔一秒向左移一位,当最左边的数据移到Y轴时,最左边的数据移出屏幕,最右边增加一个数.实现一个从右往左动画的效果 2.先看下项目中的demo解 ...

随机推荐

  1. Web之-----弹出确认框控件应用

    引用文件!-------- <link rel="stylesheet" type="text/css" href="@Url.FrontUrl ...

  2. Elastic-Job:动态添加任务,支持动态分片

    多情只有春庭月,犹为离人照落花. 概述 因项目中使用到定时任务,且服务部署多实例,因此需要解决定时任务重复执行的问题.即在同一时间点,每一个定时任务只在一个节点上执行.常见的开源方案,如 elasti ...

  3. Cookie的有效路径

    程序实现: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletE ...

  4. setuptools的安装

    Python 2.x:    sudo apt-get install python-setuptools           (python2.x版本执行此命令) Python 3.x:    su ...

  5. Java中常用IO流之文件流的基本使用姿势

    所谓的 IO 即 Input(输入)/Output(输出) ,当软件与外部资源(例如:网络,数据库,磁盘文件)交互的时候,就会用到 IO 操作.而在IO操作中,最常用的一种方式就是流,也被称为IO流. ...

  6. 由 [SDOI2012]Longge的问题 探讨欧拉函数和莫比乌斯函数的一些性质和关联

    本题题解 题目传送门:https://www.luogu.org/problem/P2303 给定一个整数\(n\),求 \[ \sum_{i=1}^n \gcd(n,i) \] 蒟蒻随便yy了一下搞 ...

  7. .NET Conf 2019 大会上发布.NET Core 3.0

    北京时间今天凌晨如期在.NET Conf 上发布.NET Core 3.0,Keynotes 由Scott Hunter 主演,主要围绕.NET Core 3.0的新特性和社区展开. 多功能性是.Ne ...

  8. jqGrid 日期格式化，只显示日期，去掉小时分

    {name:'operateTime',index:'operateTime', formatter:"date", formatoptions: {newformat:'Y-m- ...

  9. spring项目与logstash和Elasticsearch整合

    原创/朱季谦   最近在做一个将项目日志通过logstash传到Elasticsearch的功能模块,经过一番捣鼓,终于把这个过程给走通了,根据自己的经验,做了这篇总结文章,希望可以给各位玩logst ...

  10. python的pywinrm模块远程连接windows执行dos命令

    ----A机器远程连接B---- 在A机器上安装模块: pip install pywinrm 在B机器上配置winrm服务的相关配置,使其支持远程控制: (winrm服务是windows 一种方便远 ...