v-charts湖北地图 地图显示文章重叠问题 json数据
注册引入 按需引入
import VeMap from "v-charts/lib/map.common.min";
components: { headerPage, VeMap, footerPage },
html中显示
<ve-map
:legend-visible="false" //图例的隐藏
:judge-width="true"//图表宽高 默认为 false,如果设置为 true ,那么图表的宽度高度才会随着父元素的宽高更改而变化
ref="VeMapRef"
width="700px"
:data="chartData" //数据列表
:tooltip="chartTooltip" //提示框的配置
:events="chartEvents" //图上区域的点击事件
:settings="chartSettings" 配置项
></ve-map>
chartData = {columns: [], row: []}
配置项
// 地图配置
this.chartSettings = {
positionJsonLink: "@/../static/hubei.json",
position: "province/hubei",
beforeRegisterMap(json) {
// 手动改变图上的文字的位置！！！（地图宽度小了的话就重叠的文字）
json.features[1].properties.cp = [115.059365, 29.997711];
json.features[8].properties.cp = [112.68813, 29.886857];
json.features[9].properties.cp = [115.699365, 30.697711];
json.features[13].properties.cp = [113.453974, 30.264953];
json.features[14].properties.cp = [112.696866, 30.421215];
return json;
},
labelMap: {
city: "城市", //修改指标名称
},
mapGrid: {
left: "20px",
right: "20px",
top: "auto",
bottom: "auto",
},
height: "auto",
zoom: 1, //这里是关键，一定要放在 series中
aspectScale: 1,
dataRange: {
x: "left",
y: "bottom",
splitList: [],
color: ["#31D76B"],
textStyle: {
color: "white",
},
},
itemStyle: {
normal: {
borderColor: "#80adae",
},
},
label: {
show: true,
color: "#080808",
fontSize: 10,
fontWeight: 600,
align: "center",
position: "insideTop",
distance: 55,
rotate: 30,
offset: [30, 0],
lineHeight: 14,
},
// 这里是之前配置的换行 文字太长了就换行
// tooltip: {
// trigger: "item",
// // // formatter: function (params) {
// // // let value = params;
// // // var newParamsName = ""; // 最终拼接成的字符串
// // // var paramsNameNumber = value.length; // 实际标签的个数
// // // var provideNumber = 4; // 每行能显示的字的个数
// // // var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
// // // /**
// // // * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
// // // */
// // // // 条件等同于rowNumber>1
// // // if (paramsNameNumber > provideNumber) {
// // // /** 循环每一行,p表示行 */
// // // for (var p = 0; p < rowNumber; p++) {
// // // var tempStr = ""; // 表示每一次截取的字符串
// // // var start = p * provideNumber; // 开始截取的位置
// // // var end = start + provideNumber; // 结束截取的位置
// // // // 此处特殊处理最后一行的索引值
// // // if (p == rowNumber - 1) {
// // // // 最后一次不换行
// // // tempStr = value.substring(start, paramsNameNumber);
// // // } else {
// // // // 每一次拼接字符串并换行
// // // tempStr = value.substring(start, end) + "\n";
// // // }
// // // newParamsName += tempStr; // 最终拼成的字符串
// // // }
// // // } else {
// // // // 将旧标签的值赋给新标签
// // // newParamsName = value;
// // // }
// // // //将最终的字符串返回
// // // return newParamsName;
// // // },
// },
};
//点击地图的某个城市
this.chartEvents = {
click: (v) => {
console.log(v);
// if (v.name == "武汉市") {
// // this.$router.push("/wuhan");
// } else if (v.name == "黄石市") {
// // this.$router.push("/huangshi");
// } else if (v.name == "十堰市") {
// // this.$router.push("/shiyan");
// } else if (v.name == "襄阳市") {
// // this.$router.push("/xiangyang");
// } else if (v.name == "荆州市") {
// // this.$router.push("/jingzhou");
// } else if (v.name == "潜江市") {
// // this.$router.push("/qianjiang");
// } else if (v.name == "恩施土家族苗族自治州") {
// // this.$router.push("/enshi");
// } else if (v.name == "神农架林区") {
// // this.$router.push("/shenlongjia");
// } else if (v.name == "宜昌市") {
// // this.$router.push("/yichang");
// } else if (v.name == "鄂州市") {
// // this.$router.push("/ezhou");
// } else if (v.name == "荆门市") {
// // this.$router.push("/jingmen");
// } else if (v.name == "孝感市") {
// // this.$router.push("/xiaogan");
// } else if (v.name == "黄冈市") {
// // this.$router.push("/huanggang");
// } else if (v.name == "咸宁市") {
// // this.$router.push("/xianning");
// } else if (v.name == "随州市") {
// // this.$router.push("/suizhou");
// } else if (v.name == "天门市") {
// // this.$router.push("/tianmen");
// } else if (v.name == "仙桃市") {
// // this.$router.push("/xiantao");
// }
},
};
this.chartTooltip = {
trigger: "item",
triggerOn: "click",// triggerOn 一定要改为 “click”。默认值是下面两个，只触发则设置哪个都可以，也可以不设置此项，但是鼠标移走的话，这个提示框就消失了，所以改成 “click”， 鼠标移走不会消失
enterable: true,//enterable 要设置为 true，才能使鼠标进入提示框，才可以为提示框添加点击事件。
extraCssText: "z-index: 99;max- 100px;white-space:pre-wrap",
formatter: function (params) {
return (
params.name +
"</br>" +
`<div style='cursor:pointer;' onclick="open_pcPolicyDisplay(0,'${params.name}')">查看xxx</div>` +
`<div style='cursor:pointer;' onclick="open_pcPolicyDisplay(1,'${params.name}')">查看xxx</div>`
);
},
};
湖北JSON文件：https://files.cnblogs.com/files/panghu123/hubei.json?t=1646121899