欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

 更新時間:2021年12月14日 15:23:52   作者:前端小馬  
這篇文章主要介紹了Vue+ECharts實現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

實現(xiàn)效果

完整代碼+詳細(xì)注釋

<template>
  <div class="echart">
    <div class="content">
      <div id="map_cn"></div>
    </div>
  </div>
</template>
 
<script>
  import echarts from "echarts";
  import 'echarts/map/js/china.js' //這一步必須引入
 
  export default {
    data() {
      return {
        //地圖中的數(shù)據(jù)
        dataList: [
          {
            name: "南海諸島",
            value: 25,
          },
          {
            name: "北京",
            value: 71,
          },
          {
            name: "天津",
            value: 52,
          },
          {
            name: "上海",
            value: 14,
          },
          {
            name: "重慶",
            value: 50,
          },
          {
            name: "河北",
            value: 20,
          },
          {
            name: "河南",
            value: 30,
          },
          {
            name: "云南",
            value: 55,
          },
          {
            name: "遼寧",
            value: 50,
          },
          {
            name: "黑龍江",
            value: 40,
          },
          {
            name: "湖南",
            value: 6,
          },
          {
            name: "安徽",
            value: 96,
          },
          {
            name: "山東",
            value: 75,
          },
          {
            name: "新疆",
            value: 45,
          },
          {
            name: "江蘇",
            value: 15,
          },
          {
            name: "浙江",
            value: 8,
          },
          {
            name: "江西",
            value: 78,
          },
          {
            name: "湖北",
            value: 78,
          },
          {
            name: "廣西",
            value: 36,
          },
          {
            name: "甘肅",
            value: 25,
          },
          {
            name: "山西",
            value: 140,
          },
          {
            name: "內(nèi)蒙古",
            value: 85,
          },
          {
            name: "陜西",
            value: 85,
          },
          {
            name: "吉林",
            value: 74,
          },
          {
            name: "福建",
            value: 20,
          },
          {
            name: "貴州",
            value: 74,
          },
          {
            name: "廣東",
            value: 47,
          },
          {
            name: "青海",
            value: 45,
          },
          {
            name: "西藏",
            value: 41,
          },
          {
            name: "四川",
            value: 3,
          },
          {
            name: "寧夏",
            value: 7,
          },
          {
            name: "海南",
            value: 7,
          },
          {
            name: "臺灣",
            value: 200,
          },
          {
            name: "香港",
            value: 2,
          },
          {
            name: "澳門",
            value: 5,
          }
        ],
        //指定圖表的配置項和數(shù)據(jù)
        option: {
          //標(biāo)題組件
          title: {
            show: true,
            text: '全國各省份旅游景點(已評級)數(shù)量',
            subtext: '截至到2021年12月',
            left: "center",
            top: 16,
          },
          //提示框組件
          tooltip: {
            show: true,
            //觸發(fā)類型:數(shù)據(jù)項圖形觸發(fā)
            trigger: 'item',
            padding: 10,
            borderWidth: 1,
            borderColor: '#409eff',
            backgroundColor: 'rgba(255,255,255,0.4)',
            textStyle: {
              color: '#000000',
              fontSize: 12
            },
            //提示框內(nèi)容格式器
            formatter: (e) => {
              let data = e.data;
              //此處將各等級景點數(shù)量表示為0-10內(nèi)的隨機(jī)整數(shù)
              data.five = Math.random() * 10 | 0;
              data.four = Math.random() * 10 | 0;
              data.three = Math.random() * 10 | 0;
              data.two = Math.random() * 10 | 0;
              data.one = Math.random() * 10 | 0;
              //景點數(shù)量 - 五個等級之和
              data.number = data.five + data.four + data.three + data.two + data.one;
              //字符串模板
              let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>景點數(shù)量 : </span><span>${data.number}處</span></p>
                   <p><span>5A級 : </span><span>${data.five}處</span></p>
                   <p><span>4A級 : </span><span>${data.four}處</span></p>
                   <p><span>3A級 : </span><span>${data.three}處</span></p>
                   <p><span>2A級 : </span><span>${data.two}處</span></p>
                   <p><span>1A級 : </span><span>${data.one}處</span></p>
               </div>
            `;
              return context;
            }
          },
          //視覺映射組件(左下角)
          visualMap: {
            show: true,
            left: 26,
            bottom: 40,
            showLabel: true,
            // 是否顯示拖拽用的手柄(手柄能拖拽調(diào)整選中范圍)
            calculable: false,
            // 拖拽時,是否實時更新
            realtime: true,
            align: 'left',
            //各顏色代表的區(qū)域
            pieces: [
              {
                gte: 100,
                label: "> 100",
                color: "#FDB669"
              },
              {
                gte: 50,
                lt: 99,
                label: "50 - 99",
                color: "#FECA7B"
              },
              {
                gte: 30,
                lt: 49,
                label: "30 - 49",
                color: "#FEE191"
              },
              {
                gte: 10,
                lt: 29,
                label: "10 - 29",
                color: "#FFF0A8"
              },
              {
                lt: 9,
                label: '< 10',
                color: "#FFFFBF"
              }
            ]
          },
          //地理坐標(biāo)系組件
          geo: {
            //使用 registerMap 注冊的地圖名稱
            map: "china",
            //是否開啟鼠標(biāo)縮放和平移漫游
            roam: true,
            //當(dāng)前視角縮放比例
            zoom: 1,
            //滾輪縮放的極限控制
            scaleLimit: {
              min: 1, //最小1倍
              max: 3 //最大3倍
            },
            //地圖組件離容器的距離
            top: 90,
            left: 'center',
            //圖形上的文本標(biāo)簽
            label: {
              show: true,
              fontSize: "11"
            },
            //地圖區(qū)域的多邊形 圖形樣式
            itemStyle: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              // 高亮狀態(tài)(鼠標(biāo)移入后)的多邊形和標(biāo)簽樣式
              emphasis: {
                areaColor: "#f98333",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
            }
          },
          series: [
            {
              type: "map",
              roam: true,
              geoIndex: 0,
              data: '',
              label: {
                show: true,
              }
            }
          ]
        },
      };
    },
 
    methods: {
      //定義方法 draw_map 繪制中國地圖
      draw_map() {
        let myChart = this.$echarts.init(document.getElementById('map_cn'));
        //高亮輪播展示
        var hourIndex = 0;
        var carouselTime = null;
        //setInterval() 可在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達(dá)式,直到clearInterval把它清除
 
        //使用setInterval方法后,必須使用箭頭函數(shù)而不能寫function,否則后續(xù)在該方法中無法調(diào)用data中的數(shù)據(jù)
        //carouselTime =setInterval(function(){ //錯誤寫法
 
        carouselTime = setInterval(() => {
          //dispatchAction echarts的API:觸發(fā)圖表行為
          myChart.dispatchAction({
            type: "downplay", //downplay 取消高亮指定的數(shù)據(jù)圖形
            seriesIndex: 0
          });
          myChart.dispatchAction({
            type: "highlight", //highLight 高亮指定的數(shù)據(jù)圖形
            seriesIndex: 0, //系列index
            dataIndex: hourIndex //數(shù)據(jù)index
          });
          myChart.dispatchAction({
            type: "showTip", //showTip 顯示提示框
            seriesIndex: 0,
            dataIndex: hourIndex
          });
          hourIndex++;
          //當(dāng)循環(huán)到數(shù)組當(dāng)中的最后一條數(shù)據(jù)后,重新進(jìn)行循環(huán)
          if (hourIndex > this.dataList.length) {
            hourIndex = 0;
          }
        }, 3000);
        //鼠標(biāo)移入組件時停止輪播
        myChart.on("mousemove", (e) => {
          clearInterval(carouselTime); //清除循環(huán)
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
        });
        //鼠標(biāo)移出組件時恢復(fù)輪播
        myChart.on("mouseout", () => {
          carouselTime = setInterval(() => {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
 
            });
            myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: hourIndex
            });
            myChart.dispatchAction({
              type: "showTip",
              seriesIndex: 0,
              dataIndex: hourIndex
            });
            hourIndex++;
            if (hourIndex > this.dataList.length) {
              hourIndex = 0;
            }
          }, 3000);
        });
 
        //顯示地圖
        myChart.setOption(this.option);
      },
 
      //修改echart配制
      setEchartOption() {
        this.option.series[0].data = this.dataList;
      },
    },
    created() {
      this.setEchartOption();
    },
    mounted() {
      this.$nextTick(() => {
        this.draw_map();
      });
    }
  };
</script>
 
<style scoped lang="less">
  .echart {
    width: 100%;
 
    .content {
      width: 95.8%;
      height: 100px;
      margin: auto;
 
      #map_cn {
        width: 65%;
        height: 7rem;
        background-color: #eaeaea;
        margin: auto;
      }
    }
  }
</style>

要點小結(jié)

1.setTimeout() 與 setInterval() 的區(qū)別

setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式,只執(zhí)行一次;

setInterval() 可在每隔指定的毫秒數(shù)循環(huán)調(diào)用函數(shù)或表達(dá)式,直到clearInterval把它清除,多次調(diào)用。

2.使用 setInterval() 方法后,必須使用箭頭函數(shù)形式而不能用 function

如果使用 function,后續(xù)在該方法中調(diào)用 data 中的數(shù)據(jù)如 console.log(this.dataList.length);會報如下錯誤(其實就是找不到該數(shù)據(jù));

這是因為 fun()、(function(){ ... })() 或回調(diào)函數(shù)中的 this 默認(rèn)都指向 window,而 window 中是找不到你所要用的 data 中的數(shù)據(jù)的,我們應(yīng)該改為箭頭函數(shù)形式。

以上就是Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示的詳細(xì)內(nèi)容,更多關(guān)于Vue ECharts 中國地圖繪制的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue利用插件實現(xiàn)按比例切割圖片

    vue利用插件實現(xiàn)按比例切割圖片

    這篇文章主要為大家詳細(xì)介紹了vue利用插件實現(xiàn)按比例切割圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue?Echarts實現(xiàn)多功能圖表繪制的示例詳解

    Vue?Echarts實現(xiàn)多功能圖表繪制的示例詳解

    作為前端人員,日常圖表、報表、地圖的接觸可謂相當(dāng)頻繁,今天小編隆重退出前端框架之VUE結(jié)合百度echart實現(xiàn)中國地圖+各種圖表的展示與使用;作為“你值得擁有”專欄階段性末篇,值得一看
    2023-02-02
  • vue前端實現(xiàn)打印下載示例詳解

    vue前端實現(xiàn)打印下載示例詳解

    這篇文章主要為大家介紹了vue前端實現(xiàn)打印下載示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue 實現(xiàn)無規(guī)則截圖

    vue 實現(xiàn)無規(guī)則截圖

    這篇文章主要介紹了vue 實現(xiàn)無規(guī)則截圖的方法,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-04-04
  • vue的事件綁定與方法詳解

    vue的事件綁定與方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue的事件綁定與方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • vue中在echarts里設(shè)置的定時器清除不掉問題及解決

    vue中在echarts里設(shè)置的定時器清除不掉問題及解決

    這篇文章主要介紹了vue中在echarts里設(shè)置的定時器清除不掉問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue+Element?ui實現(xiàn)照片墻效果

    vue+Element?ui實現(xiàn)照片墻效果

    這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實現(xiàn)照片墻效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue實現(xiàn)購物車結(jié)算功能

    vue實現(xiàn)購物車結(jié)算功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)購物車結(jié)算功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • Vue渲染過程淺析

    Vue渲染過程淺析

    這篇文章主要介紹了Vue渲染過程淺析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • vue.js 1.x與2.0中js實時監(jiān)聽input值的變化

    vue.js 1.x與2.0中js實時監(jiān)聽input值的變化

    這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實時監(jiān)聽input值的變化的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-03-03

最新評論