vue echart 中國地圖 疫情圖
阿新 • • 發佈：2020-07-19
vue echarts中國地圖 各省疫情確證人數圖
首先安裝echarts
npm i echarts --save
引入使用
新建一個vue檔案，然後引入import echarts from "echarts"; import "../../node_modules/echarts/map/js/china.js"; // 引入中國地圖資料初始化echarts 如果介面提供資料，則等介面放回資料在執行此方法
chinaConfigure() { const _this = this; this.chart = echarts.init(this.$refs.myEchart); //這裡是為了獲得容器所在位置 window.onresize = this.chart.resize; this.chart.setOption(option)}
option配置
tooltip提示框配置tooltip: { enterable: true, trigger: "item", triggerOn: "click", position: (point, params, dom, rect, size) => { let div= getHtmlComponent(params); dom.innerHTML = ""; //新生成的節點（div）掛載到提示框的dom上面 dom.appendChild(div.$el); let w = dom.offsetWidth; let clientW = document.documentElement.clientWidth; dom.style.transform = "scale(.6)"; //避擴音示框超出頁面if (clientW / 2 < rect.x) { rect.x = rect.x - w / 2; } //提示框位置 return [rect.x, rect.y]; }
getHtmlComponent(params)方法主要是生成div
//生成div節點 function getHtmlComponent(params) { const infoContent = `<div style="font-size:12px;text-align:left;display:flex;align-items: center" @click="myClick"> <div style='padding-right:10px;'><p style='margin: 0;line-height:16px;'>省份：${params.name}</p> <p style='line-height:16px;margin: 0;'>現有確診人數：${params.data.value}</p></div> <div style='border-left:1px solid #eee;padding-left:10px;align-content:conter'>詳情</div> </div>`; const MyComponent = Vue.extend({ template: infoContent, methods: { myClick: function() { console.log("點選事件監聽到"); } } });
最終提示框效果
visualMap 各省份疫情資料不同來展示不同顏色配置
*配置visualMap以後，將覆蓋series陣列的物件型別為'map'的顏色
visualMap: { type: "piecewise", calculable: true, itemHeight: 10, itemWidth: 10, textGap: 3, itemGap: 4, inverse: true, pieces: [ { min: 100001, max: 10000000, color: "#a11", symbol: "roundRect", label: "100001-1000000" }, { min: 10001, max: 100000, color: "#a21", symbol: "roundRect", label: "10001-100000" }, { min: 1001, max: 10000, color: "#b31", symbol: "roundRect", label: "1001-10000" }, { min: 101, max: 1000, color: "#c71", symbol: "roundRect", label: "101-1000" }, { min: 11, max: 100, color: "#d91", symbol: "roundRect", label: "11-100" }, { min: 1, max: 10, color: "#ed1", symbol: "roundRect", label: "1-10" }, { value: 0, label: "", color: "#eee",
//imge引入的圖片 symbol: `image://${imge}`, symbolSize: "50" } ], left: "left", top: "bottom" },
效果圖
根據series陣列繪製地圖
*如果serise陣列下的物件的coordinateSystem:'geo'，那麼會option裡的geo屬性的配置
配置了兩個物件，一個物件map型別，控制地圖各省背景顏色；另一個物件custom型別，自定義地圖上展示的圖示。
map型別配置如下
{ // name: '中國新冠病毒各省分佈圖', type: "map", mapType: "china", roam: false, label: { show: false, normal: { show: false }, emphasis: { show: false } }, emphasis: { itemStyle: { areaColor: "#ddd", borderColor: "blue" } }, data: [..._this.mapData] },
custom型別配置如下
{ type: "custom", coordinateSystem: "geo", z:10, data: [ ..._this.mapData ], renderItem: function(params, api) { let image=''; if(_this.mapData[params.dataIndex].value===0){ image=imge; } return { type: "image", style: { image: image, x: api.coord([ _this.mapData[params.dataIndex].c[0], _this.mapData[params.dataIndex].c[1] ])[0], y: api.coord([ _this.mapData[params.dataIndex].c[0], _this.mapData[params.dataIndex].c[1] ])[1], width: "10", height: "10" } }; } }
果是當某省份確證人數為0時背景是白色，並且插上勝利的小圖示
下面是所有程式碼
<template> <divclass="echarts"> <div:style="{height:'400px',width:'100%'}"ref="myEchart"></div> </div> </template><script> importVuefrom"vue"; importechartsfrom"echarts"; import"../../node_modules/echarts/map/js/china.js";//引入中國地圖資料 importimgefrom"../assets/logo.png";
//生成div節點 functiongetHtmlComponent(params){ constinfoContent=`<divstyle="font-size:12px;text-align:left;display:flex;align-items:center"@click="myClick"> <divstyle='padding-right:10px;'><pstyle='margin:0;line-height:16px;'>省份：${params.name}</p> <pstyle='line-height:16px;margin:0;'>現有確診人數：${params.data.value}</p></div> <divstyle='border-left:1pxsolid#eee;padding-left:10px;align-content:conter'>詳情</div> </div>`; constMyComponent=Vue.extend({ template:infoContent, methods:{ myClick:function(){ console.log("點選事件監聽到"); } } }); varcomponent=newMyComponent().$mount(); returncomponent; }
exportdefault{ name:"echarts", props:["userJson"], data(){ return{ chart:null, mapData:[] }; }, mounted(){ setTimeout(()=>{ this.mapData=[ {c:[115.46,40.92,12],name:"北京",value:0}, {c:[117.2,39.13,72],name:"天津",value:1122}, { c:[121.48,31.22,88], name:"上海", value:Math.round(Math.random()*100) }, { c:[106.54,29.59], name:"重慶", value:Math.round(Math.random()*1000) }, { c:[114.48,38.03], name:"河北", value:Math.round(Math.random()*1000) }, { c:[113.65,34.76], name:"河南", value:Math.round(Math.random()*100) }, { c:[102.73,25.04,22], name:"雲南", value:Math.round(Math.random()*1000) }, { c:[123.38,41.8], name:"遼寧", value:Math.round(Math.random()*1000) }, { c:[126.63,45.75], name:"黑龍江", value:Math.round(Math.random()*1000) }, { c:[113,28.21], name:"湖南", value:Math.round(Math.random()*1000) }, { c:[117.27,31.86], name:"安徽", value:Math.round(Math.random()*100) }, { c:[117,36.65], name:"山東", value:Math.round(Math.random()*1000) }, { c:[87.68,43.77], name:"新疆", value:Math.round(Math.random()*100) }, { c:[118.78,32.04], name:"江蘇", value:Math.round(Math.random()*10) }, { c:[120.19,30.26], name:"浙江", value:Math.round(Math.random()*1000) }, { c:[115.89,28.68], name:"江西", value:Math.round(Math.random()*1000) }, { c:[114.31,30.52], name:"湖北", value:Math.round(Math.random()*1000) }, { c:[108.33,22.84], name:"廣西", value:Math.round(Math.random()*10) }, { c:[103.73,36.03], name:"甘肅", value:Math.round(Math.random()*1000) }, { c:[112.53,40.87], name:"山西", value:Math.round(Math.random()*1000) }, { c:[111.65,43.82], name:"內蒙古", value:Math.round(Math.random()*0) }, { c:[108.95,34.27], name:"陝西", value:Math.round(Math.random()*1000) }, { c:[125.35,43.88], name:"吉林", value:Math.round(Math.random()*1000) }, { c:[119.3,26.08], name:"福建", value:Math.round(Math.random()*1000) }, { c:[106.71,26.57], name:"貴州", value:Math.round(Math.random()*1000) }, { c:[113.23,23.16], name:"廣東", value:Math.round(Math.random()*1000) }, { c:[101.74,36.56], name:"青海", value:Math.round(Math.random()*1000) }, { c:[91.11,29.97], name:"西藏", value:Math.round(Math.random()*1000) }, { c:[104.06,30.67], name:"四川", value:Math.round(Math.random()*1000) }, { c:[104.06,30.67], name:"寧夏", value:Math.round(Math.random()*1000) }, { c:[110.35,20.02], name:"海南", value:Math.round(Math.random()*1000) }, { c:[104.06,30.67], name:"臺灣", value:Math.round(Math.random()*1000) }, { c:[104.06,30.67], name:"香港", value:Math.round(Math.random()*1000) }, { c:[104.06,30.67], name:"澳門", value:Math.round(Math.random()*1000) } ];
this.chinaConfigure(); }); }, beforeDestroy(){ if(!this.chart){ return; } this.chart.dispose(); this.chart=null; }, methods:{ chinaConfigure(){ const_this=this; this.chart=echarts.init(this.$refs.myEchart);//這裡是為了獲得容器所在位置 window.onresize=this.chart.resize; this.chart.setOption({ title:{ text:"疫情圖", subtext:"資料為虛構", left:"center" }, tooltip:{ enterable:true, trigger:"item", triggerOn:"click", position:(point,params,dom,rect,size)=>{ letdiv=getHtmlComponent(params); dom.innerHTML=""; //新生成的節點（div）掛載到提示框的dom上面 dom.appendChild(div.$el); letw=dom.offsetWidth; letclientW=document.documentElement.clientWidth; dom.style.transform="scale(.6)"; //避擴音示框超出頁面 if(clientW/2<rect.x){ rect.x=rect.x-w/2; } //提示框位置 return[rect.x,rect.y]; } }, visualMap:{ type:"piecewise", calculable:true, itemHeight:10, itemWidth:10, textGap:3, itemGap:4, inverse:true, pieces:[ { value:0, label:"", color:"#eee", symbol:`image://${imge}`, symbolSize:"50" }, { min:100001, max:10000000, color:"#a11", symbol:"roundRect", label:"100001-1000000" }, { min:10001, max:100000, color:"#a21", symbol:"roundRect", label:"10001-100000" },//不指定max，表示max為無限大（Infinity）。 { min:1001, max:10000, color:"#b31", symbol:"roundRect", label:"1001-10000" }, { min:101, max:1000, color:"#c71", symbol:"roundRect", label:"101-1000" }, { min:11, max:100, color:"#d91", symbol:"roundRect", label:"11-100" }, { min:1, max:10, color:"#ed1", symbol:"roundRect", label:"1-10" }, { value:0, label:"", color:"#eee", symbol:`image://${imge}`, symbolSize:"50" } ], left:"left", top:"bottom" }, toolbox:{ show:true, orient:"vertical", left:"right", top:"center", feature:{ mark:{show:true}, dataView:{show:true,readOnly:false}, restore:{show:true}, saveAsImage:{show:true} } }, geo:{ map:"china", roam:true }, series:[ { //name:'中國新冠病毒各省分佈圖', type:"map", mapType:"china", roam:false, label:{ show:false, normal:{ show:false }, emphasis:{ show:false } },
emphasis:{ itemStyle:{ areaColor:"#ddd", borderColor:"blue" } },
data:[..._this.mapData] }, { type:"custom", coordinateSystem:"geo", z:10,
data:[ ..._this.mapData ], renderItem:function(params,api){ letimage=''; if(_this.mapData[params.dataIndex].value===0){ image=imge; } return{ type:"image", style:{ image:image, x:api.coord([ _this.mapData[params.dataIndex].c[0], _this.mapData[params.dataIndex].c[1] ])[0], y:api.coord([ _this.mapData[params.dataIndex].c[0], _this.mapData[params.dataIndex].c[1] ])[1], width:"10", height:"10" } }; } } ] }); } } }; </script>
<!--Add"scoped"attributetolimitCSStothiscomponentonly--> <stylescoped> </style>