react項目引入echarts中國地圖

taoszu 發布于2019-08-22 18:45 / 2945人閱讀

摘要：最近做的項目需要如下的中國地圖最先想到的當然是下面是引入的具體步驟首先要準備兩個文件一個是文件，一個是地圖文件官方有鏈接，我這邊是使用的版本官方已不再提供支持但我還是找了一個線上版本，當然我網盤里也有鏈接密碼，可供大家自行下載把這兩個文件插

最近做的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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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