Vue+ECharts實現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
實現(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?Echarts實現(xiàn)多功能圖表繪制的示例詳解
作為前端人員,日常圖表、報表、地圖的接觸可謂相當(dāng)頻繁,今天小編隆重退出前端框架之VUE結(jié)合百度echart實現(xiàn)中國地圖+各種圖表的展示與使用;作為“你值得擁有”專欄階段性末篇,值得一看2023-02-02vue中在echarts里設(shè)置的定時器清除不掉問題及解決
這篇文章主要介紹了vue中在echarts里設(shè)置的定時器清除不掉問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue.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