JKbigScreen/src/components/EnterpriseInformation/jlMap.vue

<template>
  <!-- <div style="height:100%"> -->
  <div id="map1" style="width: 100%;height:100%"></div>
  <!-- </div> -->
</template>
<script>
import echarts from "echarts";
import map from "../../util/jilin";
export default {
  name: "jlMapChart",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
    // data1: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // }
  },
  data() {
    return {
      myChart: null
    };
  },
  watch: {
    data() {
      this.myChart.clear();
      this.registerMap1();
    }
  },
  methods: {
    registerMap1() {
      console.log(this.data)
      let myChart = this.$echarts.init(document.getElementById("map1"));
      this.myChart = myChart;
      // console.log(this.data,"sdsadsadsadsadsadasdsad");

      // let data1 = this.data;
      echarts.registerMap("吉林", map);
      // 每个地区的坐标
      var geoCoordMap = {
        长春市: [125.55, 44.18],
        // 九台市: [124.35, 43.88],
        // 德惠市: [123.35, 43.88],
        四平市: [124.600785, 43.470344],
        辽源市: [125.13, 42.88],
        吉林市: [126.75, 43.33],
        松原市: [124.12, 44.81],
        白城市: [123.14, 45.21],
        白山市: [126.997839, 41.992505],
        通化市: [125.93, 41.73],
        延边朝鲜族自治州: [128.9, 43.12]
      };
      // 每个地区的设备数量值
      var data = this.data;
      // 每个地区的设备告警数量
      var data2 = [];
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        // 有数据的地区的名称和value值
        return res;
      };
      // 设定series是一个空的数组
      var series = [];
      [["吉林", data]].forEach(function(item) {
        series.push(
          {
            name: "定位点",
            type: "effectScatter", // 散点图
            coordinateSystem: "geo", // 使用地理坐标系
            // hoverAnimation: "true",
            // legendHoverLink: "false",
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 3
            },
            data: convertData(item[1]),
            symbolSize: 0.1,
            label: {
              normal: {
                show: true,
                formatter: function(params) {
                  // console.log(params);
                  return (
                    "{fline|" +
                    " " +
                    data[params.dataIndex].value +
                    " " +
                    "户" +
                    "}"
                  );
                },
                position: "bottom",
                distance: 20,
                // background:require(..),
                // backgroundColor: "rgba(255,200,9,.7)",
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 30,
                verticalAlign: "middle",
                color: "#ffc809",
                rich: {
                  fline: {
                    fontSize: 18,
                    padding: [0, 10],
                    color: "#ffc809",
                    fontWeight:900
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#ffc809"
              }
            },
            zlevel: 10
          },
          {
            type: "map",
            map: "吉林",
            zlevel: 10,
            // itemStyle: {
            //   normal: {
            //     areaColor: "rgba(41,103,160,0.5)",
            //     borderColor: "#24bae7"
            //   },
            //   emphasis: {
            //     areaColor: "#24bae7"
            //   }
            // },
            itemStyle: {
              normal: {
                areaColor: "#2071b4",
                borderColor: "#23b9e8",
                borderWidth:2
              },
              emphasis: {
                areaColor: "#23b9e8"
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 18
                }
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                  fontSize: 18
                }
              }
            },
            data: data
          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            symbolSize: 25,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 14
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#F62157" //标志颜色
              }
            },
            zlevel: 2,
            data: convertData(data2)
          }
        );
      });

      let option = {
        // tooltip: {
        //   padding: 0,
        //   enterable: true,
        //   transitionDuration: 1,
        //   textStyle: {
        //     color: "#000",
        //     decoration: "none"
        //   },
        //   formatter: function(params) {
        //     let tipHtml = "";
        //     tipHtml =
        //       '<div style="width:200px;height:150px;background:rgba(20,47,88,0.8);border:1px solid rgba(7,166,255,0.7)">' +
        //       // '<div style="width:85%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 20px">' +
        //       // '<span style="margin-left:10px;color:#fff;font-size:16px;">' +
        //       // params.name +
        //       // "</span>" +
        //       // "</div>" +
        //       '<div style="padding:20px">' +
        //       '<p style="color:#fff;font-size:12px;">' +
        //       "企业名称：" +
        //       '<span style="color:#ffc809;font-size:1em;margin:0 6px;">' +
        //       data1[params.dataIndex].qymc +
        //       "</span>" +
        //       // "家" +
        //       "</p>" +
        //       '<p style="color:#fff;font-size:12px;">' +
        //       "申请金额：" +
        //       '<span style="color:#00d8ff;font-size:2em;margin:0 6px;font-family:LCD">' +
        //       data1[params.dataIndex].sqje +
        //       "</span>" +
        //       "万" +
        //       "</p>" +
        //       "</p>" +
        //       '<p style="color:#fff;font-size:12px;">' +
        //       "推送银行：" +
        //       '<span style="color:#00d8ff;font-size:1em;margin:0 6px;">' +
        //       data1[params.dataIndex].tsyh +
        //       "</span>" +
        //       // "个" +
        //       "</p>" +
        //       "</div>" +
        //       "</div>";
        //     // setTimeout(function() {
        //     //   tooltipCharts(params.name);
        //     // }, 10);
        //     return tipHtml;
        //   }
        // },
        geo: {
          map: "吉林",
          label: {
            textStyle: {
              fontSize: ".1rem"
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#2071b4",
              borderColor: "#23b9e8"
            },
            emphasis: {
              areaColor: "#23b9e8"
            }
          }
        },
        series: series
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  },
  mounted() {
    this.registerMap1();
  }
  // watch: {
  //   data() {
  //     if (this.myChart != null) {
  //       this.myChart.clear();
  //     }
  //     this.gatherers();
  //   }
  // }
};
</script>
<style scoped>
</style>