引言

在做畢設(shè)的過程中，有一個需求：根據(jù)用戶的ip，在前端展示出中國地圖，然后展現(xiàn)出每個省有多少人這樣子

經(jīng)過百度后，發(fā)現(xiàn)可以使用echart來完成該功能，但對echart的版本版本有要求

java后端我完成該需求使用的是redis存儲數(shù)據(jù)來實(shí)現(xiàn)

效果如圖所示

vue中echarts@4.9版本，地圖的使用

避免進(jìn)坑，親測4.9版本正常，5.0版本不支持因?yàn)楣俜揭瞥说貓D數(shù)據(jù)和map文件夾china.js

1. 安裝echarts@4.9版本

   npm install echarts@4.9.0

2. main.js中引入echarts以及china.js

   // 引入echarts以及中國地圖china.jsimport * as echarts from 'echarts';import '../node_modules/echarts/map/js/china';Vue.prototype.$echarts = echarts;
   

3. 新建組件echars_china.vue

   <template><div class="chinaecharts"><div id="mapChart" ref="mapChart" ></div></div>
   </template>
   <script>
   export default {name: "ChinaEcharts",methods: {mapFn() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例// var mapChart = this.$echarts.init(this.$refs.mapChart);var mapChart = this.$echarts.init(document.getElementById("mapChart"));mapChart.setOption({backgroundColor: "", //背景顏色title: {text: "",subtext: "",color: "#fff",x: "center",},//是視覺映射組件，用于進(jìn)行『視覺編碼』，也就是將數(shù)據(jù)映射到視覺元素（視覺通道）。visualMap: {// 左下角定義 在選中范圍中的視覺元素 漸變地區(qū)顏色type: "piecewise", // 類型為分段型top: "bottom",// calculable: true, //是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）。right: 10,splitNumber: 6,seriesIndex: [0],itemWidth: 20, // 每個圖元的寬度itemGap: 2, // 每兩個圖元之間的間隔距離，單位為pxpieces: [// 自定義每一段的范圍，以及每一段的文字{ gte: 10000, label: "10000人以上", color: "#1890FF" }, // 不指定 max，表示 max 為無限大（Infinity）。{gte: 1000,lte: 9999,label: "1000-9999人",color: "#83C2FF",},{gte: 500,lte: 999,label: "500-999人",color: "#CDE5FF",},{gte: 100,lte: 499,label: "100-499人",color: "#E6F1FF",},{gte: 1,lte: 99,label: "1-99人",color: "#EBF3FF",},{ lte: 0, label: "無", color: "#FAFAFA" }, // 不指定 min，表示 min 為無限大（-Infinity）。],textStyle: {color: "#737373",},},// 提示框，鼠標(biāo)移入tooltip: {show: true, //鼠標(biāo)移入是否觸發(fā)數(shù)據(jù)trigger: "item", //出發(fā)方式formatter: "-用戶數(shù)量：{c}",},//配置地圖的數(shù)據(jù)，并且顯示series: [{name: "地圖",type: "map", //地圖種類map: "china", //地圖類型。data: [{name: "北京",value: Math.round(Math.random() * 500),},{name: "天津",value: Math.round(Math.random() * 500),},{name: "上海",value: Math.round(Math.random() * 500),},{name: "重慶",value: Math.round(Math.random() * 500),},{name: "河北",value: Math.round(Math.random() * 500),},{name: "河南",value: Math.round(Math.random() * 500),},{name: "云南",value: Math.round(Math.random() * 500),},{name: "遼寧",value: Math.round(Math.random() * 500),},{name: "黑龍江",value: Math.round(Math.random() * 500),},{name: "湖南",value: Math.round(Math.random() * 500),},{name: "安徽",value: Math.round(Math.random() * 500),},{name: "山東",value: Math.round(Math.random() * 5000),},{name: "新疆",value: Math.round(Math.random() * 0),},{name: "江蘇",value: Math.round(Math.random() * 5000),},{name: "浙江",value: Math.round(Math.random() * 50000),},{name: "江西",value: Math.round(Math.random() * 500),},{name: "湖北",value: Math.round(Math.random() * 5000),},{name: "廣西",value: Math.round(Math.random() * 500),},{name: "甘肅",value: Math.round(Math.random() * 0),},{name: "山西",value: Math.round(Math.random() * 500),},{name: "內(nèi)蒙古",value: Math.round(Math.random() * 0),},{name: "陜西",value: Math.round(Math.random() * 500),},{name: "吉林",value: Math.round(Math.random() * 500),},{name: "福建",value: Math.round(Math.random() * 500),},{name: "貴州",value: Math.round(Math.random() * 500),},{name: "廣東",value: Math.round(Math.random() * 500000),},{name: "青海",value: Math.round(Math.random() * 0),},{name: "西藏",value: Math.round(Math.random() * 0),},{name: "四川",value: Math.round(Math.random() * 5000),},{name: "寧夏",value: Math.round(Math.random() * 500),},{name: "海南",value: Math.round(Math.random() * 500),},{name: "臺灣",value: Math.round(Math.random() * 500),},{name: "香港",value: Math.round(Math.random() * 500),},{name: "澳門",value: Math.round(Math.random() * 500),},{name: "南海諸島",value: Math.round(Math.random() * 500),},],itemStyle: {normal: {label: {show: true, //默認(rèn)是否顯示省份名稱},areaStyle: {color: "#FAFAFA", //默認(rèn)的地圖板塊顏色},borderWidth: 1,borderColor: "#D9D9D9",},//地圖區(qū)域的多邊形 圖形樣式。emphasis: {label: {show: true, //選中狀態(tài)是否顯示省份名稱},areaStyle: {color: "#90c31d", //選中狀態(tài)的地圖板塊顏色},},},zoom: 1, //放大比例label: {//圖形上的文本標(biāo)簽，可用于說明圖形的一些數(shù)據(jù)信息show: true,},},{type: "scatter",showEffectOn: "render", //配置什么時候顯示特效coordinateSystem: "geo", //該系列使用的坐標(biāo)系symbolSize: 10, //標(biāo)記的大小data: [{ name: "宜昌", value: [111.3, 30.7, 130] }],zlevel: 99999,},],}),window.addEventListener("resize", () => {// 自動渲染echartsmapChart.resize();});},},mounted() {this.mapFn();},
   };
   </script>
   <style scoped>
   .chinaecharts {width: 100%;height: 500px;
   }
   #mapChart {width: 100%;height: 500px;
   }
   </style>