当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 利用Echarts实现全国各个省份数据占比，图形为中国地图

利用Echarts实现全国各个省份数据占比，图形为中国地图

2019年10月23日  | 移动技术网IT编程  | 我要评论

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

最先想到的图表插件是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 就可以使用，具体使用方法可以看这个地址：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网