china的父级页面 index.vue
<!-- 地图盒子 -->
<div class="map-box">
<china
@clickProvinceMap="clickProvinceMap"
@clickProvinceName="clickProvinceName"
:selectValue="selectValue"
:provinceName="provinceName"
:selectTime="selectTime"
></china>
</div>子组件html：china.vue
<template>
<div class="warp">
<div class="china" ref="china"></div>
</div>
</template>js: china.vue
<script>
import _ from "lodash";
import {getQuanGuodata} from '../../../api/network'
export default {
props: ["selectValue","provinceName","selectTime"],
data: () => ({}),
mounted() {
this.mapData();
this.initData()
},
methods: {
// 加载全国地图数据
initData(){
getQuanGuodata({dapingindex:this.selectValue,nf:this.selectTime}).then((res)=>{
console.log(res);
})
},
async mapData(dataSource) {
var colors = ["#20E6FF", "#074796", "#ED1D25", "#999999"];
// 获取中国的地理信息
let res = await this.$getJson("/map/json/china.json")
console.log(res);
var data = [
{ name: "北京", value: 0.7 },
{ name: "天津", value: 0.4 },
{ name: "上海", value: -5.7 },
{ name: "重庆", value: 4 },
{ name: "河北", value: 3.4 },
{ name: "河南", value: 3.1 },
{ name: "云南", value: 3.5 },
{ name: "辽宁", value: 1.5 },
{ name: "黑龙江", value: 2.8 },
{ name: "湖南", value: 4.3 },
{ name: "安徽", value: 3 },
{ name: "山东", value: 3.6 },
{ name: "新疆", value: 4.890000000000001 },
{ name: "江苏", value: 1.6 },
{ name: "浙江", value: 2.5 },
{ name: "江西", value: 4.9 },
{ name: "湖北", value: 4.5 },
{ name: "广西", value: 2.7 },
{ name: "甘肃", value: 4.2 },
// { name: "山西", value: 5.2, label: { color: "#000" } },//lable：设置文字样式
{ name: "山西", value: 5.2},
{ name: "内蒙古", value: 4.3 },
{ name: "陕西", value: 4.2 },
{ name: "吉林", value: -6 },
{ name: "福建", value: 4.6 },
{ name: "贵州", value: 4.5 },
{ name: "广东", value: 2 },
{ name: "青海", value: 2.5 },
{ name: "西藏", value: 4.8 },
{ name: "四川", value: 2.8 },
{ name: "宁夏", value: 5.3},
{ name: "海南", value: 1.6 },
{
name: "台湾",
value: -99,
emphasis: {
itemStyle: { areaColor: "#074796", color: "#FFF" },
label: { color: "#FFF" },
},
},
{
name: "香港",
value: -99,
emphasis: {
itemStyle: { areaColor: "#074796", color: "#FFF" },
label: { color: "#FFF" },
},
},
{
name: "澳门",
value: -99,
emphasis: {
itemStyle: { areaColor: "#074796", color: "#FFF" },
label: { color: "#FFF" },
},
},
{
name: "南海诸岛",
value: -99,
emphasis: {
itemStyle: { areaColor: "#074796", color: "#FFF" },
label: { color: "#FFF" },
},
},
];
// lt（小于，less than），
// gt（大于，greater than），
// lte（小于等于 less than or equals）
// gte（大于等于
// eq 等于
var pieces = [
{ lte: 4.9, gte: 4.9, label: "江西", color: "#0747a7" },
{ gte: -100, lt: 4.9, label: "≤江西", color: "#074796" },
{
gt: 4.9,
label: ">江西",
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{ offset: 0, color: "#0CC6F5 " },
{ offset: 1, color: "#078BD0" },
],
},
},
];
// 注册地图
this.$echarts.registerMap("china", res.data);
let option = {
geo: {
map: "china",
aspectScale: 0.75, //长宽比
zoom: 1.2,
roam: false,
itemStyle: {
normal: {
areaColor: "#999",
shadowColor: "rgba(0,0,0,1)",
borderWidth: 0.5,
borderColor: "#666",
shadowOffsetX: 5,
shadowOffsetY: 6,
label: {
show: true,
},
},
emphasis: {
areaColor: "#999",
borderWidth: 0.5,
borderColor: "#666",
color: "#000",
label: {
show: false,
},
},
},
},
visualMap: {
show: false,
min: 0,
max: 2000,
left: 0,
bottom: "5%", //this.getFontSize(60)
showLabel: true,
orient: "vertical",
borderColor: "#000",
itemWidth: this.getFontSize(16),
itemHeight: this.getFontSize(16),
textGap: this.getFontSize(10),
itemGap: this.getFontSize(18),
textStyle: {
fontSize: this.getFontSize(14),
color: "#FFF",
},
inverse: true,
pieces: pieces,//设置地图中的每一个地方的根据数值的样式
// lt（小于，less than），
// gt（大于，greater than），
// lte（小于等于 less than or equals）
// gte（大于等于
// eq 等于
},
series: [
{
type: "map",
roam: false,
selectedMode: "single",
label: {
normal: {
show: true,
textStyle: {
color: "#FFFFFF",
fontSize: this.getFontSize(14),
},
},
emphasis: {
textStyle: {
color: "#FFF",
},
},
},
itemStyle: {
normal: {
borderColor: "#000",
borderWidth: 0.5,
areaColor: "#777777",
},
emphasis: {
areaColor: "#F7B500",
borderWidth: 0.1,
},
},
zoom: 1.2,
map: "china", //使用
data: data,
},
],
};
let that = this;
let myChart = this.$echarts.init(this.$refs.china);
myChart.clear();
// 当地图的echarts中右option时候做点击的处理
if (option && typeof option === "object") {
myChart.on("click", function (params) {
// params：点击那一块地方的时候传回的参数
if (
!["台湾", "香港", "澳门", "南海诸岛"].includes(params.data.name)
) {
if (that.provinceName == params.data.name) {
//当不选择的时候省份呈现全国
that.$emit("clickProvinceName",'全国')
}else{
that.$emit('clickProvinceMap',params.data.name)
}
// dataSource.data.forEach(obj => {
// if (obj.name == params.data.name) {
// obj.selected = true
// } else {
// obj.selected = false
// }
// })
// that.initData(dataSource)
}
});
}
myChart.clear();
myChart.setOption(option, true);
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
};
</script>地图的json数据在 地理小工具 的链接中获取对应的json文件
效果：
实现前往他的固定下级地（如：江西）： china.vue
上个代码中的进行点击判断将将名称传回父级
// 当地图的echarts中右option时候做点击的处理
if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.on("click", function (params) {
// params：点击那一块地方的时候传回的参数
if (
!["台湾", "香港", "澳门", "南海诸岛"].includes(params.data.name)
) {
if (that.provinceName == params.data.name) {
//当点击相同的省份呈现全国
that.$emit("clickProvinceName",'全国')
}else{
that.$emit('clickProvinceMap',params.data.name)
}
// dataSource.data.forEach(obj => {
// if (obj.name == params.data.name) {
// obj.selected = true
// } else {
// obj.selected = false
// }
// })
// that.initData(dataSource)
}
});
}在父级页面接受判断是否为江西 index.vue
是江西的话跳转至江西省的地图
// 点击全国地图
clickProvinceMap(e) {
this.provinceName = e;
if (e != "江西") {
this.$nextTick(() => {
// 不是的时候刷新数据
});
} else {
// 是江西的时候跳转页面
this.$router.push({
path: "/dp/shouye/shi",
});
}
},
//当不选择的时候省份呈现全国
clickProvinceName(e) {
this.provinceName = e;
},江西的父页面 shi.vue(中写江西地图的组件)
<!-- 地图盒子 -->
<div class="map-box">
<jx
@clickCityMap="clickCityMap"
@clickCityName="clickCityName"
:selectValue="selectValue"
:cityName="cityName"
></jx>
</div>子组件 jainxi.vue
<template>
<div class="warp">
<div class="china" ref="china"></div>
<!-- <div class="tools">
<div class="title">{{selectValue}}</div>
<div class="items">
<div>>江西</div>
<div>≤江西</div>
</div>
</div> -->
</div>
</template>
<script>
import _ from "lodash";
export default {
name: "china",
props: ["selectValue",'cityName'],
components: {},
data() {
return {};
},
computed: {},
mounted() {
this.initData();
console.log(this.selectValue);
},
methods: {
async initData(dataSource) {
var colors = ["#20E6FF", "#074796", "#ED1D25", "#999999"];
let res = await this.$getJson("/map/json/province/jiangxi.json");
let that = this;
let myChart = this.$echarts.init(this.$refs.china);
console.log(res);
var mapData = [
{name: '南昌市', value: 4.3},
{name: '景德镇市', value: 4.6},
{name: '萍乡市', value: 4.5, label: {padding: [0, 0, 0, 25]}},
{name: '九江市', value: 4.9, label: {padding: [75, 50, 0, 0]}},
{name: '新余市', value: 4.8},
{name: '鹰潭市', value: 5.1},
{name: '赣州市', value: 4.9, label: {padding:[75, 0, 0, 50]}},
{name: '吉安市', value: 5.2},
{name: '宜春市', value: 5, label: {padding:[0, 0, 100, 60]}},
{name: '抚州市', value: 4.7, label: {padding: [75, 0, 0, 30]}},
{name: '上饶市', value: 5.4},
];
// lt（小于，less than），
// gt（大于，greater than），
// lte（小于等于 less than or equals）
// gte（大于等于
// eq 等于
var pieces = [
{
lte: 4.9,
label: "≤江西",
// color: colors[1],
color: colors[1],
},
{
gt: 4.9,
label: ">江西",
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#20E6FF",
},
{
offset: 1,
color: "#A0F4FF",
},
]),
},
];
this.$echarts.registerMap("jiangxi", res.data);
let option = {
geo: {
map: "jiangxi",
aspectScale: 0.75, //长宽比
zoom: 1.2,
roam: false,
itemStyle: {
normal: {
areaColor: "#999",
shadowColor: "rgba(0,0,0,1)",
borderWidth: 0.5,
borderColor: "#666",
shadowOffsetX: 5,
shadowOffsetY: 6,
label: {
show: true,
},
},
emphasis: {
areaColor: "#999",
borderWidth: 0.5,
borderColor: "#666",
color: "#000",
label: {
show: false,
},
},
},
},
// visualMap: {
// show: false,
// pieces: pieces,自定义每一段范围的数值展示在图表上的样式
// },
series: [
{
type: "map",
roam: false,
selectedMode: "single",
label: {
normal: {
show: true,
textStyle: {
color: "#FFFFFF",
fontSize: this.getFontSize(16),
},
},
emphasis: {
textStyle: {
color: "#FFF",
},
},
},
itemStyle: {
normal: {
borderColor: '#000',
borderWidth: 0.5,
areaColor: '#0f6ac1',
},
emphasis: {
areaColor: "#5AAEF4",
borderWidth: 0.1,
},
},
zoom: 1.2,
map: "jiangxi", //使用
data: mapData,
},
],
};
if (option && typeof option === "object") {
myChart.on("click", function (params) {
if (that.cityName == params.data.name) {
console.log(456);
//当不选择的时候市区呈现江西
that.$emit("clickCityName",'江西')
}else{
that.$emit("clickCityMap", params.data.name);
}
});
}
myChart.clear();
myChart.setOption(option, true);
window.addEventListener("resize", () => {
myChart.resize();
});
},
},
created() {},
destroyed() {},
};
</script>
<style lang="scss" scoped>
//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";
//默认设计稿的宽度
$designWidth: 1920;
//默认设计稿的高度
$designHeight: 1080;
//px转为vw的函数
@function vw($px) {
@return math.div($px, $designWidth) * 100vw;
}
//px转为vh的函数
@function vh($px) {
@return math.div($px, $designHeight) * 100vh;
}
.china {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: vh(40) 0 0 0;
}
.warp {
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;
.title {
font-size: vw(16);
color: #fff;
}
.tools {
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
.items {
display: flex;
flex-direction: column;
div {
display: flex;
align-items: center;
font-size: vw(16);
color: #fff;
margin-top: vw(14);
&:nth-child(1)::before {
content: "";
width: vw(14);
height: vh(14);
border-radius: vw(2);
background: #20e6ff;
margin-right: vw(7);
}
&:nth-child(2)::before {
content: "";
width: vw(14);
height: vh(14);
border-radius: vw(2);
background: #063f84;
margin-right: vw(7);
}
}
}
}
}
</style>
效果：
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
