vue-echarts 實(shí)現(xiàn)中國(guó)地圖到省vue特別簡(jiǎn)單

1，給中國(guó)地圖綁定click事件

2，click處理函數(shù)里能獲取到當(dāng)前點(diǎn)擊的是哪個(gè)省份

3，點(diǎn)擊賦值換json/js各省份 的文件

就是這么簡(jiǎn)單?


A頁(yè)面

中國(guó)地圖

<chart

? autoresize :options="map"

? :style="{height:'600px',width:'100%',}"

? @click="mapclick"

? @mouseover="mouseover"

>

</chart>

js部分

import echartsfrom 'echarts'

import 'echarts/map/js/china'; //引入中國(guó)地圖


data() {

return {

map:{

// backgroundColor: '#1D346F',

? title: {

text:'',

? ? subtext:'',

? ? x:'center'

? },

? // dataRange: {

//? show: false,

//? min: 0,

//? max: 1000,

//? text: ['High', 'Low'],

//? realtime: true,

//? calculable: true,

//? color: ['#040B5C',],

//? // backgroundColor:'#040B5C'

// },

? tooltip: {//提示框組件。

? ? trigger:'item', //數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用。

? ? formatter:'{a} <br/> : {c}',

? ? textStyle: {

fontSize:'24px'

? ? }

},

? legend: {

show:false,

? ? clockWise:false,

? ? orient:'horizontal', //圖例的排列方向

? ? x:'left', //圖例的位置

? ? data: ['']

},

? // visualMap: {//顏色軸，可以根據(jù)數(shù)據(jù)點(diǎn)的值大小，展示不同的顏色，或用來(lái)展示地圖塊的不同顏色

//? min: 0,

//? max: 200,

//? calculable: true,

//? inRange: {

//? ? color: ["#3dda8e", "#eac736", "#d94e5d"]

//? },

//? textStyle: {

//? ? color: "#fff"

//? }},

? ? geo: [{

show:true,

? ? // map: 'china',

? ? clockWise:false,

? ? label: {

normal: {

show:false

? ? ? },

? ? ? emphasis: {

show:false,

? ? ? }

},

? ? roam:true,//地圖設(shè)置不可拖拽，固定的

? ? itemStyle: {

normal: {

areaColor:'#031525',

? ? ? ? borderWidth:0,

? ? ? ? shadowColor:'#0CC6FF',

? ? ? ? shadowBlur:30,

? ? ? ? shadowOffsetX: -5,

? ? ? ? shadowOffsetY:10,

? ? ? ? color:"#0CC6FF",

? ? ? },

? ? ? emphasis: {

areaColor:"#2B91B7"

? ? ? }

}

}],

? series: [

{

name:'',

? ? ? // itemStyle: {

//? normal: {

//? ? color: "#F62157" //標(biāo)志顏色

//? }

// },

? ? ? type:'map',

? ? ? mapType:'china',

? ? ? roam:true,

? ? ? clockWise:false,

? ? ? zoom:1,

? ? ? // data: [18, 23, 29, 14, 13, 63, 63, 63, 63, 63],

? ? ? data: [{

"name":"北京",

? ? ? ? "value":599,

? ? ? ? color:'#fffed7'

? ? ? }, {

"name":"上海",

? ? ? ? "value":142

? ? ? }, {

"name":"黑龍江",

? ? ? ? "value":44

? ? ? }, {

"name":"深圳",

? ? ? ? "value":92

? ? ? }, {

"name":"湖北",

? ? ? ? "value":810

? ? ? }, {

"name":"四川",

? ? ? ? "value":453

? ? ? }],

? ? ? geoIndex:1,

? ? ? itemStyle: {

normal: {

areaColor:'#1D346F',

? ? ? ? ? borderColor:'#0CC6FF',

? ? ? ? ? // borderWidth: 0,

// shadowColor: '#D79D3D',

? ? ? ? },

? ? ? ? emphasis: {

label: {

show:true

? ? ? ? ? }

}

},

? ? },

? ]

},


methods: {

mapclick(el){

console.log(el.name)

console.log()

let name= el.name

? this.$router.push({

path:"/province",

? ? query:{

name:name

}

})

},


B頁(yè)面 省級(jí)地圖

div部分

<chart

? ? autoresize :options="map"

? ? :style="{height:'600px',width:'100%',}"

? ? @click="mapclick"

? ? @mouseover="mouseover"

? >

? </chart>

js部分

import echartsfrom 'echarts'

// import 'echarts/map/js/china' //引入中國(guó)地圖

//引入廣東地圖

import 'echarts/map/js/province/guangdong.js'

// 重慶

import 'echarts/map/js/province/chongqing.js'

//安徽

import 'echarts/map/js/province/anhui.js'

//北京

import 'echarts/map/js/province/beijing.js'

//北京

import 'echarts/map/js/province/beijing.js'

//海南

import? 'echarts/map/js/province/hainan.js'

//西藏

import? 'echarts/map/js/province/xizang.js'

//浙江

import? 'echarts/map/js/province/zhejiang.js'

//云南

import? 'echarts/map/js/province/yunnan.js'

//新疆

import? 'echarts/map/js/province/xinjiang.js'

//天津

import? 'echarts/map/js/province/tianjin.js'

//四川

import? 'echarts/map/js/province/sichuan.js'

//山西

import? 'echarts/map/js/province/shanxi.js'

//陜西

import? 'echarts/map/js/province/shanxi1.js'

//上海

import? 'echarts/map/js/province/shanghai.js'

//山東

import? 'echarts/map/js/province/shandong.js'

//青海

import? 'echarts/map/js/province/qinghai.js'

//寧夏

import? 'echarts/map/js/province/ningxia.js'

//內(nèi)蒙古

import? 'echarts/map/js/province/neimenggu.js'

//遼寧

import? 'echarts/map/js/province/liaoning.js'

//吉林

import? 'echarts/map/js/province/jilin.js'

//江西

import? 'echarts/map/js/province/jiangxi.js'

//江蘇

import? 'echarts/map/js/province/jiangsu.js'

//湖南

import? 'echarts/map/js/province/hunan.js'

//湖北

import? 'echarts/map/js/province/hubei.js'

//河南

import? 'echarts/map/js/province/henan.js'

//黑龍江

import? 'echarts/map/js/province/heilongjiang.js'

//河北

import? 'echarts/map/js/province/hebei.js'

//貴州

import? 'echarts/map/js/province/guizhou.js'

//廣西

import? 'echarts/map/js/province/guangxi.js'

//廣東

import? 'echarts/map/js/province/guangdong.js'

//甘肅

import? 'echarts/map/js/province/gansu.js'

//澳門(mén)

import? 'echarts/map/js/province/aomen.js'

//福建

import? 'echarts/map/js/province/fujian.js'

//香港

import? 'echarts/map/js/province/xianggang.js'


// 省級(jí)別地圖

map:{

title: {

text:'',

? ? subtext:'',

? ? x:'center'

? },

? tooltip: {//提示框組件。

? ? trigger:'item', //數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類(lèi)目軸的圖表中使用。

? ? formatter:'{a} <br/> : {c}',

? ? textStyle: {

fontSize:'24px'

? ? }

},

? legend: {

show:false,

? ? clockWise:false,

? ? orient:'horizontal', //圖例的排列方向

? ? x:'left', //圖例的位置

? ? data: ['']

},

? geo: [{

show:true,

? ? // map: 'china',

? ? clockWise:false,

? ? label: {

normal: {

show:false

? ? ? },

? ? ? emphasis: {

show:false,

? ? ? }

},

? ? roam:true,//地圖設(shè)置不可拖拽，固定的

? ? itemStyle: {

normal: {

areaColor:'#031525',

? ? ? ? borderWidth:0,

? ? ? ? shadowColor:'#0CC6FF',

? ? ? ? shadowBlur:30,

? ? ? ? shadowOffsetX: -5,

? ? ? ? shadowOffsetY:10,

? ? ? ? color:"#0CC6FF",

? ? ? },

? ? ? emphasis: {

areaColor:"#2B91B7"

? ? ? }

}

}],

? series: [

{

name:'',

? ? ? type:'map',

? ? ? mapType:'重慶',

? ? ? roam:true,

? ? ? clockWise:false,

? ? ? zoom:1,

? ? ? // data: [18, 23, 29, 14, 13, 63, 63, 63, 63, 63],

? ? ? data: [{

"name":"北京",

? ? ? ? "value":599,

? ? ? ? color:'#fffed7'

? ? ? }, {

"name":"上海",

? ? ? ? "value":142

? ? ? }, {

"name":"黑龍江",

? ? ? ? "value":44

? ? ? }, {

"name":"深圳",

? ? ? ? "value":92

? ? ? }, {

"name":"湖北",

? ? ? ? "value":810

? ? ? }, {

"name":"四川",

? ? ? ? "value":453

? ? ? }],

? ? ? geoIndex:1,

? ? ? itemStyle: {

normal: {

areaColor:'#1D346F',

? ? ? ? ? borderColor:'#0CC6FF',

? ? ? ? ? // borderWidth: 0,

// shadowColor: '#D79D3D',

? ? ? ? },

? ? ? ? emphasis: {

label: {

show:true

? ? ? ? ? }

}

},

? ? },

? ]

},

mounted() {

let me =this

? ? //url query傳參

? let routeQuery =this.$route.query

? me.map.series[0].mapType=routeQuery.name

},


//中國(guó)

? import zhongguofrom 'echarts/map/json/china'

//海南

? import hainanfrom 'echarts/map/json/province/hainan'

? //西藏

import xizangfrom 'echarts/map/json/province/xizang'

? //浙江

? import zhejiangfrom 'echarts/map/json/province/zhejiang'

? //云南

? import yunnanfrom 'echarts/map/json/province/yunnan'

? //新疆

? import xinjiangfrom 'echarts/map/json/province/xinjiang'

? //天津

? import tianjinfrom 'echarts/map/json/province/tianjin'

? //四川

? import sichuanfrom 'echarts/map/json/province/sichuan'

? //陜西

? import shanxifrom 'echarts/map/json/province/shanxi'

? //山西

? import shangxifrom 'echarts/map/json/province/shanxi1'

? //上海

? import shanghaifrom 'echarts/map/json/province/shanghai'

? //山東

? import shangdongfrom 'echarts/map/json/province/shandong'

? //青海

? import qinghaifrom 'echarts/map/json/province/qinghai'

? //寧夏

? import ningxiafrom 'echarts/map/json/province/ningxia'

? //內(nèi)蒙古

? import neimenggufrom 'echarts/map/json/province/neimenggu'

? //遼寧

? import liaoningfrom 'echarts/map/json/province/liaoning'

? //吉林

? import jilinfrom 'echarts/map/json/province/jilin'

? //江西

? import jiangxifrom 'echarts/map/json/province/jiangxi'

? //江蘇

? import jiangsufrom 'echarts/map/json/province/jiangsu'

? //湖南

? import hunanfrom 'echarts/map/json/province/hunan'

? //湖北

? import hubeifrom 'echarts/map/json/province/hubei'

? //河南

? import henanfrom 'echarts/map/json/province/henan'

? //黑龍江

? import heilongjiangfrom 'echarts/map/json/province/heilongjiang'

? //河北

? import hebeifrom 'echarts/map/json/province/hebei'

? //貴州

? import guizhoufrom 'echarts/map/json/province/guizhou'

? //廣西

? import guangxifrom 'echarts/map/json/province/guangxi'

? //廣東

? import guangdongfrom 'echarts/map/json/province/guangdong'

? //甘肅

? import gansufrom 'echarts/map/json/province/gansu'

? //重慶

? import chongqingfrom 'echarts/map/json/province/chongqing'

? //澳門(mén)

? import aomenfrom 'echarts/map/json/province/aomen'

? //安徽

? import anhuifrom 'echarts/map/json/province/anhui'

? //北京

? import beijingfrom 'echarts/map/json/province/beijing'

? //福建

? import fujianfrom 'echarts/map/json/province/fujian'

? //香港

? import xianggangfrom 'echarts/map/json/province/xianggang'

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容