投稿
  1. 极客之音首页
  2. 前端开发

echarts中应用中国地图并前往指定的下钻

小半 • • 前端开发 • 阅读 224

导读：本篇文章讲解 echarts中应用中国地图并前往指定的下钻，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

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.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)
          }
        });
      }
    },
  },
};
</script>

地图的json数据在 地理小工具 的链接中获取对应的json文件
效果：
echarts中应用中国地图并前往指定的下钻

 实现前往他的固定下级地（如：江西）： 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");
      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,
          },
        ],
      };
      let that = this;
      let myChart = this.$echarts.init(this.$refs.china);
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        myChart.on("click", function (params) {
            if (that.cityName == params.data.name) {
                console.log(456);
                //当不选择的时候市区呈现江西
                that.$emit("clickCityName",'江西')
            }else{
              that.$emit("clickCityMap", params.data.name);
            }
            
        });
      }
    },
  },
  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>

效果：
echarts中应用中国地图并前往指定的下钻

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79810.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！