eacher 地图穿透

最新推荐文章于 2024-05-29 11:05:13 发布

TortyE

最新推荐文章于 2024-05-29 11:05:13 发布

阅读量495

点赞数 6

分类专栏： Eacher 文章标签： java 前端服务器

本文链接：https://blog.csdn.net/TortyE/article/details/135543095

版权

Eacher 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ECharts库在网页上动态加载中国地图，并实现地图数据的渲染和点击事件，包括省级地图的下钻到城市级地图的功能。

摘要由CSDN通过智能技术生成

方法：

 initChart() {
      let chart = this.$echarts.init(document.getElementById("main"));
      let _self = this;
      $axios.get("/map/china.json").then(function (res) {
        let d = [];
        for (var i = 0; i < res.data.features.length; i++) {
          d.push({
            name: res.data.features[i].properties.name,
            value: Math.random() * 100,
          });
        }
        _self.mapdata = d;
        _self.originalValue = d;
        //注册地图
        echarts.registerMap("china", res.data);
        //绘制地图
        _self.renderMap("china", d);
      });

      //地图点击事件
      chart.on("click", function (params) {
        // console.log( params );
        if (params.name in provinces) {
          //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
          $axios
            .get("/map/province/" + provinces[params.name] + ".json")
            .then(function (res) {
              echarts.registerMap(params.name, res.data);
              var d = [];
              for (var i = 0; i < res.data.features.length; i++) {
                d.push({
                  name: res.data.features[i].properties.name,
                });
              }
              _self.renderMap(params.name, d);
            });
        } else if (params.seriesName in provinces) {
          //如果是【直辖市/特别行政区】只有二级下钻
          if (_self.special.indexOf(params.seriesName) >= 0) {
            _self.renderMap("china", _self.mapdata);
          } else {
            _self.gyclickshow();

            //_self.renderMap("china", _self.originalValue);
            // //显示县级地图
            // $axios.get('/map/city/'+ cityMap[params.name] +'.json')
            //     .then(function(res){
            //       echarts.registerMap( params.name, res.data );
            //         var d = [];
            //         for( var i=0; i<res.data.features.length; i++ ){
            //             d.push({
            //                 name: res.data.features[i].properties.name
            //             })
            //         }
            //         _self.renderMap(params.name,d);
            //     });
          }
        } else {
          _self.renderMap("china", _self.originalValue);
        }
      });
    },
    gyclickshow() {
      this.gysshow = true;
      console.log(this.gysshow, "this.gysshow");
    },
    renderMap(map, data) {
      let chart = this.$echarts.init(document.getElementById("main")); //图表初始化，china-map是绑定的元素
      // let chart = this.$echarts.init(document.getElementById('main'));
      
      let option = {
        // geo: {
        //   //地理坐标系组件   地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
        //   map: map, //地图类型  这儿展示的是中国地图
        //   aspectScale: 0.85,
        //   selectedMode: "single", // 开启单选
        //   label: {
        //     show: false, //是否显示标签  此处指是否显示地图上的地区名字
        //     color: "#ffffff",
        //     fontSize: 14,
        //   },
        //   color: ["#0f5d9d"],
        //   roam: false, //是否开启鼠标缩放和平移漫游
        //   itemStyle: {
        //     areaColor: "#03365b",
        //     borderColor: "#4bf3f9",
        //     shadowColor: "#03365b", //阴影颜色
        //     shadowOffsetX: 10, //阴影偏移量
        //     shadowOffsetY: 20, //阴影偏移量
        //   },
        //   emphasis: {
        //     label: {
        //       show: true,
        //       color: "#ffffff",
        //     },
        //     itemStyle: {
        //       areaColor: "#0f5d9d",
        //     },
        //   },
        // },
        title: {
          text: "",
          subtext: map,
          link: "",
          left: "center",
          viewControl: {
            distance: 120, // 地图视角 控制初始大小
            alpha: 100, // 倾斜角度
            rotateSensitivity: [1, 1],
          },
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontWeight: "normal",
            fontFamily: "Microsoft YaHei",
          },
          subtextStyle: {
            color: "#ccc",
            fontSize: 13,
            fontWeight: "normal",
            fontFamily: "Microsoft YaHei",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "客户数量:" + Math.floor(Math.random() * 11),
        },
        selectedMode: false,
        toolbox: {
          show: false,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
          iconStyle: {
            normal: {
              color: "#fff",
            },
          },
        },
        animationDuration: 1000,
        animationEasing: "cubicOut",
        animationDurationUpdate: 1000,
        visualMap: {
          type: "continuous",
          min: 0,
          max: 500,
          // text:['High','Low'],
          realtime: false,
          calculable: true,
          color: ["#0f5d9d"],
        },
        series: [
          {
            // coordinateSystem: "geo",
            name: map,
            type: "map",
            mapType: map,
            roam: false,
            nameMap: {
              china: "中国",
            },
            // boxDepth: 100, //地图倾斜度
            // regionHeight: 2, //地图厚度
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#999",
                  fontSize: 13,
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              color: "rgba(95,158,160,0.5)", // 地图板块的颜色
              opacity: 1, // 图形的不透明度 [ default: 1 ]
              borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
            shadowOffsetX: 10, //阴影偏移量
              shadowOffsetY: 20, //阴影偏移量
             normal: {
                            areaColor: '#323c48',
                            borderColor: 'dodgerblue'
                        },
                        emphasis: {
                            areaColor: 'darkorange'
                        }
            },

            data: data,
          },
        ],
      };
      //渲染地图
      chart.setOption(option);
    },