?china.vue組件

<script> const chinaJson = require('../../utils/china.json'); export default {render: function(createElement) {return createElement("div", {attrs: {id: "main",},style: {height: "800px",width:'1000px',margin: 'auto',},});},data() {return {dataList: [{ name: "南海諸島" },{ ename: "beijing", name: "北京"},{ ename: "tianjin", name: "天津" },{ ename: "shanghai", name: "上海" },{ ename: "chongqing", name: "重慶" },{ ename: "hebei", name: "河北" },{ ename: "henan", name: "河南"},{ ename: "yunnan", name: "云南" },{ ename: "liaoning", name: "遼寧" },{ ename: "heilongjiang", name: "黑龍江" },{ ename: "hunan", name: "湖南"},{ ename: "anhui", name: "安徽" },{ ename: "shandong", name: "山東" },{ name: "xinjiang", name: "新疆" },{ ename: "jiangsu", name: "江蘇" },{ ename: "zhejiang", name: "浙江" },{ ename: "jiangxi", name: "江西" },{ ename: "hubei", name: "湖北" },{ ename: "guangxi", name: "廣西"},{ ename: "gansu", name: "甘肅" },{ ename: "shanxi", name: "山西" },{ ename: "neimenggu", name: "內(nèi)蒙古" },{ ename: "shanxi1", name: "陜西" },{ ename: "jilin", name: "吉林" },{ ename: "fujian", name: "福建" },{ ename: "guizhou", name: "貴州" },{ ename: "guangdong", name: "廣東" },{ ename: "qinghai", name: "青海" },{ ename: "xizang", name: "西藏" },{ ename: "sichuan", name: "四川" },{ ename: "ningxia", name: "寧夏" },{ ename: "hainan", name: "海南" },{ name: "臺灣"},{ ename: "xianggang", name: "香港" },{ ename: "aomen", name: "澳門" },],};},methods: {initEchart() {let dataList = this.dataList;for(let i = 0; i < dataList.length; i++){dataList[i].value = Math.ceil(Math.random() * 1000 - 1);}const _this = this;var myChart = this.$echarts.init(document.getElementById("main"));this.$echarts.registerMap('china', chinaJson)var option = {tooltip: {//數(shù)據(jù)格式化formatter: function(params, callback) {return (params.seriesName + "<br />" + params.name + "：" + params.value);},},visualMap: {min: 0,max: 1000,left: "left",top: "bottom",text: ["高", "低"], //取值范圍的文字inRange: {color: [// 地圖的顏色 從最深 到最淺"#fff","#a1c2f0","#90b7ed","#91b8ed","#4386e0", //藍色 最大//"#F0FFF0","#00FF7F","#3CB371","#006400", //粉色最大],// color: ["#e0ffff", "green"], //取值范圍的顏色},show: true, //圖注},geo: {map: 'china', //引入地圖數(shù)據(jù)roam: false, //不開啟縮放和平移zoom: 1, //視角縮放比例label: {normal: {show: true,fontSize: "10",color: "rgba(0,0,0,0.7)",},},itemStyle: {normal: {borderColor: "rgba(0, 0, 0, 0.2)",areaColor: '#026295'},emphasis: { //高亮的顯示設(shè)置areaColor: "skyblue", //鼠標(biāo)選擇區(qū)域顏色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},// 鼠標(biāo)懸浮提示框series: [{name: "省份",type: "map",geoIndex: 0,data: this.dataList,},],};myChart.setOption(option);myChart.on("click", function(params) {if(!params.data.ename){alert('暫無' + params.name + '地圖數(shù)據(jù)');return;}_this.$router.push({path: "/province",query: { provinceName: params.data.ename, province: params.name },});});},},mounted() {this.initEchart();}, }; </script>

相關(guān)代碼Wdtenxy (wang-xiaoyangitee) - Gitee.com

總結(jié)

以上是生活随笔為你收集整理的echarts+vue实现中国地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。