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

最先想到的图表插件是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. 服务器替换san存储

    1.通知DBA停库: 串行登陆服务器 2.备份系统信息 mkdir -p /bakinfo df -h > /bakinfo/df.txt_`date +%Y%m%d%H%M%S` ps -ef ...

  2. xshell使用小技巧

    1. 方便复制:Tool -->  options --> right buttion(paste the clipboard contents) and copy selected te ...

  3. windows下安装mysql数据库

    1. 下载mysql安装文件 MySQL官网:https://www.mysql.com/ 根据机型选择相应的安装版本 这里选择MySQL Installer安装:mysql-installer-co ...

  4. 使用T2表中的值替换T1表的值

    描述:现在有两张表,T1由Key和Value两个字段,T2也有Key和Value两个字段 当T1中的Key在T2表中存在时,更新使用T2表中对用的Value 值替换T1中的VAlue update A ...

  5. Mongodb关于查询返回指定字段的方法记录

    //通常指定字段由前端传入后台,例如params 前端以逗号分隔 //后端获取字段后操作如下: Query query = new Query(); if (params != null) { Str ...

  6. 用git提交新项目到github

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  7. 机器学习之SVM调参实例

    一.任务 这次我们将了解在机器学习中支持向量机的使用方法以及一些参数的调整.支持向量机的基本原理就是将低维不可分问题转换为高维可分问题,在前面的博客具体介绍过了,这里就不再介绍了. 首先导入相关标准库 ...

  8. sublime_REPL使用及安装教程(解决Sublime无交互问题)

    谈到python编程工具能想到那些? pycharm?IDLE? Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等,还可自定义键绑定,菜单和工具栏. ...

  9. 阿里云服务器CentOS6.9安装JDK

    1:首先查看系统有没有自带jdk rpm -qa | grep java 2:将存在的一一卸载 rpm -ev java-1.7.0-openjdk-1.7.0.141-2.6.10.1.el6_9. ...

  10. 编写shell脚本实现一键创建KVM虚拟机

    shell脚本一键创建虚拟机 代码如下: #!/bin/bashname=$1 #把位置变量$1重新定义为name(创建虚拟机的名字)path1=/var/lib/libvirt/images/ #i ...