vue echarts 山东地图 toptip滑过提示显示文字 合并莱芜的

28 篇文章 5 订阅

import echarts from "echarts";

import getCityLists from "../../../json/shandong.json";

import { 接口} from "@/api/接口.js";

接口方法名().then(res => {
        myChart.showLoading();
        echarts.registerMap("shandong", getCityLists);
        myChart.hideLoading();
        let geoCoordMap = {
          济南市: [117.121225, 36.66466],
          菏泽市: [115.480656, 35.23375],
          济宁市: [116.59, 35.38],
          德州市: [116.39, 37.45],
          聊城市: [115.97, 36.45],
          泰安市: [117.13, 36.18],
          临沂市: [118.35, 35.05],
          淄博市: [118.05, 36.78],
          枣庄市: [117.57, 34.86],
          滨州市: [118.03, 37.36],
          潍坊市: [119.1, 36.62],
          东营市: [118.49, 37.46],
          青岛市: [120.3, 36.62],
          烟台市: [120.9, 37.32],
          威海市: [122.1, 37.2],
          日照市: [119.1, 35.62]
        };
        let data = [];
        let dataitem = res.data.data;
        dataitem.forEach(item => {  //这里是渲染对象,转换成你需要的格式,但是name,value不可改动哦!!!!!!
          let o = {
            name: item.city,
            value: 111,   //value只是用于下方显示颜色用,随意设定数字
            字段名:item.某某某
          };
          data.push(o);
        });
        let convertData = function(data) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
                 提示框如需配置其他请获取定义 O 里相应的字段名即可
              });
            }
          }
          return res;
        };

        let option = {
          legend: {
            show: false
          },
          tooltip: {
            padding: 0,
            enterable: true,
            transitionDuration: 1,
            textStyle: {
              color: "#000",
              decoration: "none"
            },
            formatter: function(params) {
              let tipHtml = "";
              tipHtml =
                '<div>" +
                    字符串拼接你需要的样式div
                "</div>";
              return tipHtml;
            }
          },
          visualMap: {
            show: false,
            x: "left",
            y: "center",
            seriesIndex: [1],
            textStyle: {
              color: "#fff"
            },
            inRange: {
              color: ["#009ef4"]  // 你地图需要的配色设置,这里只做统一配色
            }
          },
          geo: {
            map: "shandong",
            zoom: 1.2,
            left: "25%",
            itemStyle: {
              //地图区域的多边形 图形样式
              color: "#fff",
              normal: {
                borderWidth: 1,
                borderColor: "rgba(37,124,169)",
                // shadowColor: "#e8e8e8",
                shadowOffsetY: 15,
                shadowOffsetX: 8
              }
            }
          },
          series: [
            {
              name: "",
              type: "effectScatter",
              left: "25%",
              coordinateSystem: "geo",
              data: convertData(data),
              zoom: 1.2,
              symbolSize: 20,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke"
              },
              label: {
                normal: {
                  formatter: "{b}",
                  position: "bottom",
                  color: "#fff",
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: "#10f9ff",
                  shadowBlur: 0,
                  shadowColor: "#05C3F9"
                }
              },
              zlevel: 1
            },
            {
              type: "map",
              mapType: "shandong",
              left: "25%",
              zoom: 1.2,
              roam: false, //是否开启鼠标缩放和平移漫游
              showLegendSymbol: false,
              label: {
                show: false
              },
              itemStyle: {
                //地图区域的多边形 图形样式
                normal: {
                  borderWidth: 1,
                  borderColor: "#28729f",
                  areaColor: "#29b4b7"
                },
                emphasis: {
                  //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                  label: {
                    show: false,
                    textStyle: {
                      color: "transparent"
                    }
                  },
                  borderColor: "#28729f",
                  areaColor: "#9ea9f7"
                }
              },
              data: data
            }
          ]
        };

        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      });

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值