react项目引入echarts中国地图

taoszu 发布于2019-08-22 18:45 / 2918人阅读

摘要：最近做的项目需要如下的中国地图最先想到的当然是下面是引入的具体步骤首先要准备两个文件一个是文件，一个是地图文件官方有链接，我这边是使用的版本官方已不再提供支持但我还是找了一个线上版本，当然我网盘里也有链接密码，可供大家自行下载把这两个文件插

最近做的react项目需要如下的中国地图

最先想到的当然是echarts,下面是引入的具体步骤

1. 首先要准备两个文件

一个是echarts文件，一个是china地图文件
echarts.js官方有链接，我这边是使用的cdn版本 https://cdn.bootcss.com/echar...
china.js官方已不再提供支持

但我还是找了一个线上版本 http://gallery.echartsjs.com/...，
当然我网盘里也有链接: https://pan.baidu.com/s/115Sy... 密码: vs6h，可供大家自行下载

2. 把这两个文件插入js代码里

这里有一点需要注意，echarts.min.js必须先引入，不然会报错。

3. 把echarts这个全局变量引入到模块中，具体步骤如下

先在webpack的配置文件webpackrc里添加一行配置

externals: {
    AMap: "AMap",
    AMapUI: "AMapUI",
    ECharts: "echarts",
  },

（引入高德地图或百度地图也是同理）
接着在要使用的文件里就可以引用到了

import ECharts from "ECharts";

4. 地图初始化

因为我做的是react项目，以下全是针对react项目的代码
首先创建一个节点，设置ref属性的回调函数，获取ref引用组件对应的dom节点

setMapElement = n => {
    this.mapNode = n;
  };

然后在componentDidMount生命周期方法里初始化中国地图

componentDidMount() {
    this.createMap(this.mapNode);
  }
createMap = element => {
    const myChart = ECharts.init(element);
    const option = {
      tooltip: {
        trigger: "item",
      },
      dataRange: {
        orient: "horizontal",
        min: 0,
        max: 55000,
        text: ["高", "低"], // 文本，默认为数值文本
        splitNumber: 0,
        color: ["#2d70d6", "#80b5e9", "#e6feff"],
      },
      series: [
        {
          name: "2011全国GDP分布",
          type: "map",
          mapType: "china",
          mapLocation: {
            x: "left",
          },
          // selectedMode: "multiple",
          itemStyle: {
            normal: { label: { show: true, color: "#333" }, borderWidth: 0 },
            // emphasis: { label: { show: true } },
            // borderWidth: 0,
            // borderColor: "#eee",
          },
          data: [
            { name: "西藏", value: 605.83 },
            { name: "青海", value: 1670.44 },
            { name: "宁夏", value: 2102.21 },
            { name: "海南", value: 2522.66 },
            { name: "甘肃", value: 5020.37 },
            { name: "贵州", value: 5701.84 },
            { name: "新疆", value: 6610.05 },
            { name: "云南", value: 8893.12 },
            { name: "重庆", value: 10011.37 },
            { name: "吉林", value: 10568.83 },
            { name: "山西", value: 11237.55 },
            { name: "天津", value: 11307.28 },
            { name: "江西", value: 11702.82 },
            { name: "广西", value: 11720.87 },
            { name: "陕西", value: 12512.3 },
            { name: "黑龙江", value: 12582 },
            { name: "内蒙古", value: 14359.88 },
            { name: "安徽", value: 15300.65 },
            { name: "北京", value: 16251.93, selected: true },
            { name: "福建", value: 17560.18 },
            { name: "上海", value: 19195.69, selected: true },
            { name: "湖北", value: 19632.26 },
            { name: "湖南", value: 19669.56 },
            { name: "四川", value: 21026.68 },
            { name: "辽宁", value: 22226.7 },
            { name: "河北", value: 24515.76 },
            { name: "河南", value: 26931.03 },
            { name: "浙江", value: 32318.85 },
            { name: "山东", value: 45361.85 },
            { name: "江苏", value: 49110.27 },
            { name: "广东", value: 53210.28, selected: true },
          ],
        },
      ],
      animation: false,
    };
    myChart.setOption(option, true);
  };

我这里只是简单的例子，echarts具体的更复杂的配置请参照 http://echarts.baidu.com/opti...

GPU云服务器云服务器怎么部署react项目 web项目引入jquery echart Echarts

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96163.html

echarts结合高德API进行地图下钻

摘要：广告开始最近做了表格数据转成图表展示的一个组件，地址如下整合地图的时候发现针对地级市的一些文件太多了，全部引入后有将近，所以就用了下高德老爷给的组件和接口，然后弄完在这记录一下虽然这种例子在社区里有很多这个组件文件放在了中，样式奇丑，请原谅 /——————广告开始——————/ 最近做了表格数据转成图表展示的一个react组件，地址如下： https://github.com/Lyla...

happen 2019-08-23 12:58 评论0 收藏0
Nodejs爬虫实战项目之链家

摘要：很基础，不喜勿喷转载注明出处爬虫实战项目之链家效果图思路爬虫究竟是怎么实现的通过访问要爬取的网站地址，获得该页面的文档内容，找到我们需要保存的数据，进一步查看数据所在的元素节点，他们在某方面一定是有规律的，遵循规律，操作，保存数据。说明作为一个前端界的小学生，一直想着自己做一些项目向全栈努力。愁人的是没有后台，搜罗之后且学会了nodejs和express写成本地的接口给前端页面调用...

noONE 2019-08-22 17:10 评论0 收藏0
Nodejs爬虫实战项目之链家

摘要：很基础，不喜勿喷转载注明出处爬虫实战项目之链家效果图思路爬虫究竟是怎么实现的通过访问要爬取的网站地址，获得该页面的文档内容，找到我们需要保存的数据，进一步查看数据所在的元素节点，他们在某方面一定是有规律的，遵循规律，操作，保存数据。说明作为一个前端界的小学生，一直想着自己做一些项目向全栈努力。愁人的是没有后台，搜罗之后且学会了nodejs和express写成本地的接口给前端页面调用...

MartinDai 2019-06-26 17:39 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0