Vue+ECharts實(shí)現(xiàn)中國(guó)地圖的繪制及各省份自動(dòng)輪播高亮顯示
實(shí)現(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: "臺(tái)灣", value: 200, }, { name: "香港", value: 2, }, { name: "澳門", value: 5, } ], //指定圖表的配置項(xiàng)和數(shù)據(jù) option: { //標(biāo)題組件 title: { show: true, text: '全國(guó)各省份旅游景點(diǎn)(已評(píng)級(jí))數(shù)量', subtext: '截至到2021年12月', left: "center", top: 16, }, //提示框組件 tooltip: { show: true, //觸發(fā)類型:數(shù)據(jù)項(xiàng)圖形觸發(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; //此處將各等級(jí)景點(diǎn)數(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; //景點(diǎn)數(shù)量 - 五個(gè)等級(jí)之和 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>景點(diǎn)數(shù)量 : </span><span>${data.number}處</span></p> <p><span>5A級(jí) : </span><span>${data.five}處</span></p> <p><span>4A級(jí) : </span><span>${data.four}處</span></p> <p><span>3A級(jí) : </span><span>${data.three}處</span></p> <p><span>2A級(jí) : </span><span>${data.two}處</span></p> <p><span>1A級(jí) : </span><span>${data.one}處</span></p> </div> `; return context; } }, //視覺映射組件(左下角) visualMap: { show: true, left: 26, bottom: 40, showLabel: true, // 是否顯示拖拽用的手柄(手柄能拖拽調(diào)整選中范圍) calculable: false, // 拖拽時(shí),是否實(shí)時(shí)更新 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 注冊(cè)的地圖名稱 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 繪制中國(guó)地圖 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ù)在該方法中無(wú)法調(diào)用data中的數(shù)據(jù) //carouselTime =setInterval(function(){ //錯(cuò)誤寫法 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)移入組件時(shí)停止輪播 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)移出組件時(shí)恢復(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>
要點(diǎn)小結(jié)
1.setTimeout() 與 setInterval() 的區(qū)別
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(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);會(huì)報(bào)如下錯(cuò)誤(其實(shí)就是找不到該數(shù)據(jù));
這是因?yàn)?fun()、(function(){ ... })() 或回調(diào)函數(shù)中的 this 默認(rèn)都指向 window,而 window 中是找不到你所要用的 data 中的數(shù)據(jù)的,我們應(yīng)該改為箭頭函數(shù)形式。
以上就是Vue+ECharts實(shí)現(xiàn)中國(guó)地圖的繪制及各省份自動(dòng)輪播高亮顯示的詳細(xì)內(nèi)容,更多關(guān)于Vue ECharts 中國(guó)地圖繪制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue?Echarts實(shí)現(xiàn)多功能圖表繪制的示例詳解
作為前端人員,日常圖表、報(bào)表、地圖的接觸可謂相當(dāng)頻繁,今天小編隆重退出前端框架之VUE結(jié)合百度echart實(shí)現(xiàn)中國(guó)地圖+各種圖表的展示與使用;作為“你值得擁有”專欄階段性末篇,值得一看2023-02-02vue 實(shí)現(xiàn)無(wú)規(guī)則截圖
這篇文章主要介紹了vue 實(shí)現(xiàn)無(wú)規(guī)則截圖的方法,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04vue中在echarts里設(shè)置的定時(shí)器清除不掉問題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時(shí)器清除不掉問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue+Element?ui實(shí)現(xiàn)照片墻效果
這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實(shí)現(xiàn)照片墻效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車結(jié)算功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06vue.js 1.x與2.0中js實(shí)時(shí)監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實(shí)時(shí)監(jiān)聽input值的變化的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-03-03