echarts和highchart的区别

echarts

echarts的前身是百度公司前端开发的一个图表库,后捐献给阿帕奇公司维护。
支持柱状图、饼状图、k线图、map图、热导向图、折线图等常用图表,
主要采用canvas画图。

highchart

highcharts是国外的一家公司开发的图表库,主要采用svg画图。
支持的图表也很多,功能也比较强大。
到底是使用echarts还是使用highchart呢?(萝卜青菜各有所爱,当然你也可以选择G2等一些图表库)

此项目之所以使用echarts+highcharts混合方式,是因为有些功能是echarts无法完成的,只好使用highcharts去完成,这篇文章也主要介绍地图的使用这部分内容。
需求:触摸屏幕能够双指放大或者缩小,鼠标同时也要满足滚轮或者双击实现放大缩小,这么看上去echarts的地图好像也能完成,但是,我要说但是了,在实际的触摸大屏上面双指并不能行,被放大或者缩小的是整张web页面,而不是地图的canvas区域,使用highcharts的地图发现是可以完成的,并且HIGHMAPS 的api上也有相应的配置说明

如何在vue中使用Highmaps?

第一步:先安装依赖

npm install highcharts --save

第二步:在需要引入的map的组件中引入使用

  import Highcharts from 'highcharts'
  import Highmaps from 'highcharts/modules/map'
  Highmaps(Highcharts);

需求是需要做一个中国打点地图,那么就需要引入下china.js,这个js文件下载下来作为本地文件引入使用,cdn服务器不稳定会造成地图不能出来

中国地图数据js:https://data.jianshukeji.com/geochina/china.js
世界地图数据js:https://img.hcharts.cn/mapdata/custom/world.js
如果你需要其他某个国家的地图基础数据可以在这里下载

下载中国地图基础数据完事之后的js文件我们不能直接拿来用,因为会报错Highcharts找不到,把Highcharts.maps[“cn/china”]这个对象修改为直接export default出去即可,修改如下图:
在这里插入图片描述
然后引入china.js这个文件并使用

import china from "../JS/china";

在这里插入图片描述
如果还需要标点,也有三种方式进行标点,可以查看这个中国地图标点demo

这里采用坐标方式进行标点,整个highmaps组件代码如下:

<template>
  <div ref="highmaps" class="high-maps"></div>
</template>

<script>
import $ from "jsonp";
import Highcharts from "highcharts";
import Highmaps from "highcharts/modules/map";
Highmaps(Highcharts);
import china from "../JS/china";

export default {
  name: "highmap",
  data() {
    return {
      map: null,
      timer: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      $(
        "https://data.jianshukeji.com/jsonp?filename=geochina/cities.json",
        (err, mapData) => {
          if (err) return;
          // 随机数据
          var beijing = mapData["北京"],
            chongqing = mapData["重庆"]
            data = [
              {
                x: beijing.x,
                y: -beijing.y,
                name: beijing.name,
                color: "#01ffff"
              },
              {
                x: chongqing.x,
                y: -chongqing.y,
                name: chongqing.name,
                color: "#01ffff"
              }
            ];
          let _this = this;
          this.map = new Highcharts.Map(this.$refs.highmaps, {
            chart: {
              backgroundColor: "transparent"
            },
            title: {
              text: ""
            },
            credits: {
              enabled: false
            },
            mapNavigation: {
              enabled: true,
              enableButtons: false,
              enableTouchZoom: true
            },
            legend: {
              enabled: false
            },
            colorAxis: {
              min: 0,
              minColor: "#fff",
              maxColor: "#006cee",
              labels: {
                style: {
                  color: "red",
                  fontWeight: "bold"
                }
              }
            },

            series: [
              {
                type: "map",
                mapData: china,
                joinBy: "name",
                name: "中国地图",
                nullColor: "rgba(21, 37, 99,.5)"
              },
              {
                type: "mappoint",
                name: "通过坐标描点",
                data: data,
                dataLabels: {
                  enabled: true,
                  useHTML: true,
                  color: "#01ffff",
                  formatter: function() {
                    return this.point.name;
                  }
                },
              }
            ]
          });
        }
      );
    },
  }
};
</script>
<style lang="less">
.high-maps {
  width: 100%;
  height: 100%;
}
</style>

效果如图:
在这里插入图片描述

写在最后:

整体效果完成之后,从使用方面来说没有echarts的map配置简单,使用起来方便,highmaps的中国地图外围轮廓和内轮廓好像不能够区分配置,而是通过border统一配置的,还不知道如何让外围轮廓高亮?
如有不妥之处欢迎下方留言指正~

Logo

前往低代码交流专区

更多推荐