发布时间:2025-12-09 20:22:52 浏览次数:4
记录一下
<p ref="china_map" :key="Number(currentActiveId)" style="height: 100%;width: 100%"></p> // 地图图表chinaMapHidden(chinaMap) {let that = this;// console.log(params)// chinaMap.off('click');chinaMap.on("click", async function (params) {that.province = params.name + "省";that.getAreaData();that.showIcon = true;if (params.name in provinces) {let s = await import(`echarts/map/js/province/${provinces[params.name]}`);if (s) {console.log(params.name);chinaMap.off("click");setTimeout(() => {that.chinaMaprsult(params.name);}, 500);}}});}, chinaMaprsult(name = null) {let chinaMap = echarts.init(this.$refs.china_map);this.chinaList = this.tableData.map((item) => {if (item.area.charAt(item.area.length - 1) == "省") {return {name: item.area.substring(0, item.area.length - 1),value: item.checkNum,checkUser: item.checkUser,};} else {return {name: item.area,value: item.checkNum,checkUser: item.checkUser,};}});let options = {tooltip: {// 鼠标移到图里面的浮动提示框formatter: function (params) {return (params.name +"<br>" +"<span>验真次数:</span>" +params.value +"<br>" +"<span>验真人数:</span>" +params.data.checkUser);},},// visualMap: { // 左下角展示// show: true,// min: 0,// max: 100,// left: 10,// bottom: 0,// showLabel: true,// textStyle: {// color: '#000'// },// pieces: [{// gt: 75,// lte: 100,// label: '111',// color: '#f7358c',// }, {// gt: 50,// lte: 75,// label: '222',// color: '#fb9632',// }, {// gt: 25,// lte: 50,// label: '3333',// color: '#08b2ff',// }, {// gte: 0,// lte: 25,// label: '444',// color: '#4d2ed2'// }// ]// },dataRange: {show: false,min: 0,max: 1000,text: ["High", "Low"],realtime: true,calculable: true,color: ["orangered"],},geo: {map: name ? name : "china", // 核心// roam: true,label: {// 页面初始化加载的文字normal: {show: true,textStyle: {color: "#000", // 页面初始化的地图文字颜色fontSize: 15, // // 页面初始化的地图文字大小},},},itemStyle: {//设置样式normal: {borderWidth: 0.5, //区域边框宽度borderColor: "rgba(119, 156, 255, 1)",// areaColor: {// x: 0,// y: 0,// x2: 0,// y2: 1,// colorStops: [{// offset: 0,// color: '#073684' // 0% 处的颜色// }, {// offset: 1,// color: '#061E3D' // 100% 处的颜色// }],// },},emphasis: {// 移入背景颜色areaColor: "#34c9aa",show: true,textStyle: {color: "#000",fontSize: "12px",},},},},series: [{type: "map",geoIndex: 0,data: this.chinaList,// data: [// {// name: "北京省",// value: 599,// },// {// name: "上海",// value: 142,// },// {// name: "黑龙江省",// value: 44,// },// {// name: "深圳省",// value: 92,// },// {// name: "湖北",// value: 810,// },// {// name: "四川",// value: 453,// },// ],itemStyle: {//地图区域的多边形 图形样式normal: {//是图形在默认状态下的样式label: {show: true, //是否显示标签textStyle: {color: "black",},},},zoom: 1, //地图缩放比例,默认为1emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时label: { show: true },},},label: {normal: {show: true, //显示省份标签textStyle: { color: "#696969" }, //省份标签字体颜色},emphasis: {show: true,textStyle: {},},},},{type: "scatter",coordinateSystem: "geo",// rippleEffect: {// brushType: 'fill',// scale: 0// },// showEffectOn: 'render',// label: {// lineHeight: 30,// normal: {// show: true,// color: '#081727',// position: 'inside',// padding: [5, 0, 0, 0],// verticalAlign: 'middle',// formatter: function (para) {// return '{cnNum|' + para.data.value[2] + '}'// // return para.data.value[2]// },// rich: {// cnNum: {// fontSize: 16,// color: '#081727',// lineHeight: 28,// }// }// },// },// symbol: 'roundRect',// // symbolRotate: 20,// symbolSize: [40, 28],// data: [],// zlevel: 1,},],};chinaMap.setOption(options);this.chinaMapHidden(chinaMap);},