成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react項(xiàng)目引入echarts中國(guó)地圖

taoszu / 2944人閱讀

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

最近做的react項(xiàng)目需要如下的中國(guó)地圖

最先想到的當(dāng)然是echarts,下面是引入的具體步驟

1. 首先要準(zhǔn)備兩個(gè)文件

一個(gè)是echarts文件，一個(gè)是china地圖文件
echarts.js官方有鏈接，我這邊是使用的cdn版本 https://cdn.bootcss.com/echar...
china.js官方已不再提供支持

但我還是找了一個(gè)線上版本 http://gallery.echartsjs.com/...，
當(dāng)然我網(wǎng)盤里也有 鏈接: https://pan.baidu.com/s/115Sy... 密碼: vs6h，可供大家自行下載

2. 把這兩個(gè)文件插入js代碼里

這里有一點(diǎn)需要注意，echarts.min.js必須先引入，不然會(huì)報(bào)錯(cuò)。

3. 把echarts這個(gè)全局變量引入到模塊中，具體步驟如下

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

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

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

import ECharts from "ECharts";
4. 地圖初始化

因?yàn)槲易龅氖莚eact項(xiàng)目，以下全是針對(duì)react項(xiàng)目的代碼
首先創(chuàng)建一個(gè)節(jié)點(diǎn)，設(shè)置ref屬性的回調(diào)函數(shù)，獲取ref引用組件對(duì)應(yīng)的dom節(jié)點(diǎn)

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

然后在componentDidMount生命周期方法里初始化中國(guó)地圖

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: ["高", "低"], // 文本，默認(rèn)為數(shù)值文本
        splitNumber: 0,
        color: ["#2d70d6", "#80b5e9", "#e6feff"],
      },
      series: [
        {
          name: "2011全國(guó)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: "內(nèi)蒙古", 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);
  };

我這里只是簡(jiǎn)單的例子，echarts具體的更復(fù)雜的配置請(qǐng)參照 http://echarts.baidu.com/opti...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96163.html

相關(guān)文章

  • echarts結(jié)合高德API進(jìn)行地圖下鉆

    摘要：廣告開(kāi)始最近做了表格數(shù)據(jù)轉(zhuǎn)成圖表展示的一個(gè)組件，地址如下整合地圖的時(shí)候發(fā)現(xiàn)針對(duì)地級(jí)市的一些文件太多了，全部引入后有將近，所以就用了下高德老爺給的組件和接口，然后弄完在這記錄一下雖然這種例子在社區(qū)里有很多這個(gè)組件文件放在了中，樣式奇丑，請(qǐng)?jiān)? /——————廣告開(kāi)始——————/ 最近做了表格數(shù)據(jù)轉(zhuǎn)成圖表展示的一個(gè)react組件，地址如下： https://github.com/Lyla...

    happen 評(píng)論0 收藏0

  • Nodejs爬蟲(chóng)實(shí)戰(zhàn)項(xiàng)目之鏈家

    摘要：很基礎(chǔ)，不喜勿噴轉(zhuǎn)載注明出處爬蟲(chóng)實(shí)戰(zhàn)項(xiàng)目之鏈家效果圖思路爬蟲(chóng)究竟是怎么實(shí)現(xiàn)的通過(guò)訪問(wèn)要爬取的網(wǎng)站地址，獲得該頁(yè)面的文檔內(nèi)容，找到我們需要保存的數(shù)據(jù)，進(jìn)一步查看數(shù)據(jù)所在的元素節(jié)點(diǎn)，他們?cè)谀撤矫嬉欢ㄊ怯幸?guī)律的，遵循規(guī)律，操作，保存數(shù)據(jù)。 說(shuō)明 作為一個(gè)前端界的小學(xué)生，一直想著自己做一些項(xiàng)目向全棧努力。愁人的是沒(méi)有后臺(tái)，搜羅之后且學(xué)會(huì)了nodejs和express寫(xiě)成本地的接口給前端頁(yè)面調(diào)用...

    noONE 評(píng)論0 收藏0

  • Nodejs爬蟲(chóng)實(shí)戰(zhàn)項(xiàng)目之鏈家

    摘要：很基礎(chǔ)，不喜勿噴轉(zhuǎn)載注明出處爬蟲(chóng)實(shí)戰(zhàn)項(xiàng)目之鏈家效果圖思路爬蟲(chóng)究竟是怎么實(shí)現(xiàn)的通過(guò)訪問(wèn)要爬取的網(wǎng)站地址，獲得該頁(yè)面的文檔內(nèi)容，找到我們需要保存的數(shù)據(jù)，進(jìn)一步查看數(shù)據(jù)所在的元素節(jié)點(diǎn)，他們?cè)谀撤矫嬉欢ㄊ怯幸?guī)律的，遵循規(guī)律，操作，保存數(shù)據(jù)。 說(shuō)明 作為一個(gè)前端界的小學(xué)生，一直想著自己做一些項(xiàng)目向全棧努力。愁人的是沒(méi)有后臺(tái)，搜羅之后且學(xué)會(huì)了nodejs和express寫(xiě)成本地的接口給前端頁(yè)面調(diào)用...

    MartinDai 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<