山东echarts地图

<template>
  <div class="map1">
    <div id="mapbox" class="plantline"></div>
    <div class="tabs">
      <div
        :class="index == active ? 'tabs_item active' : 'tabs_item'"
        v-for="(item, index) in tabList"
        :key="index"
        @click="change(index)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import shandong from "@/utils/shandong.json";
export default {
  props: {
    marketList: {
      type: [Array],
      default: null,
    },
    carList: {
      type: [Array],
      default: null,
    },
  },
  // props: [ "id"],
  data() {
    return {
      chart: null,
      active: 0,
      tabList: [
        {
          name: "销售流向",
        },
        {
          name: "运输信息",
        },
      ],
      echartList: [],
      carinfo: [],
    };
  },
  watch: {
    marketList: {
      deep: true,
      handler(val, val2) {
        this.echartList = val;
        for (let i = 0; i < val.length; i++) {
          this.echartList[i].coords = [];
          this.echartList[i].coords[0] = [116.233879, 36.858752];
          this.echartList[i].coords[1] = [
            parseFloat(val[i].longitude),
            parseFloat(val[i].latitude),
          ];
        }

        console.log(this.carinfo, "this.carinfo");
        this.initChart();
      },
    },
    carList: {
      deep: true,
      handler(val, val2) {
        this.carinfo = val;
        for (let i = 0; i < val.length; i++) {
          this.carinfo[i].value = [
            parseFloat(val[i].longitude),
            parseFloat(val[i].latitude),
          ];

          this.carinfo[i].img =
            "image://data:image/png;base64,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";
        }

        console.log(this.echartList, "this.echartList");
        this.initChart();
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  created() {},
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var mapDate = [
        {
          name: "王美丽",
          value: [117.000923, 36.6758],
          datas: 1354,
          address: "济南",
          img: "image://data:image/png;base64,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",
          title: require("@/assets/imgs/model/poptitle.png"),
          contentimg: require("@/assets/imgs/model/insertimg.png"),
        },
        {
          name: "潍坊",
          value: [118.66471, 37.434564],
          datas: 1402,
          address: "济南",
          img: "image://data:image/png;base64,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",
        },
      ];
      var that = this;
      var series = [];
      if (that.active == 0) {
        series = [
          {
            name: "销售流向",
            type: "map",
            map: "shandong",
            label: {
              show: true,
              color: "#fff",
            },
            top: 0,
            // aspectScale: 1,
            layoutCenter: ["70%", "58%"],
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 1,
                areaColor: "#014497",
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 0,
                shadowOffsetX: 0,
                // areaColor: {
                //   image: icon,
                //   repeat: "repeat",
                // },
                shadowColor: "rgba(255, 255, 255, 0.5)",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
              },
            },
            emphasis: {
              // areaColor: {
              //   image: icon,
              //   repeat: "repeat",
              // },
              disabled: false,
              itemStyle: {
                areaColor: "#014497",
                borderColor: "#2ab8ff",
                borderWidth: 1,
                shadowColor: "rgba(255, 255, 255, 0.5)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
            select: {
              disabled: false,
              itemStyle: {
                areaColor: "#014497",
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
            roam: false,
            data: [],
            // data: [
            //   {
            //     fromName: "省委",
            //     toName: "合肥市",
            //     coords: [
            //       [117.000923, 36.675807],
            //       [118.66471, 37.434564],
            //     ],
            //   },
            // ],
          },
          {
            name: "线路",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "arrow", //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
              symbolSize: 0,
              trailLength: 0,
            },

            lineStyle: {
              normal: {
                color: "#2ab8ff",
                width: 2,
                opacity: 1.0,
                curveness: 0.15,
              },
            },
            data: that.echartList,
            // data: [
            //   {
            //     fromName: "省委",
            //     toName: "合肥市",
            //     coords: [
            //       [117.000923, 36.675807],
            //       [118.66471, 37.434564],
            //     ],
            //   },
            //   {
            //     company: "省委",
            //     toName: "合肥市",
            //     coords: [
            //       [117.000923, 35.675807],
            //       [118.66471, 37.434564],
            //     ],
            //   },
            // ],
          },
        ];
      } else if (that.active == 1) {
        series = [
          {
            name: "销售流向",
            type: "map",
            map: "shandong",
            label: {
              show: true,
              color: "#fff",
            },
            top: 0,
            // aspectScale: 1,
            layoutCenter: ["70%", "58%"],
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 1,
                areaColor: "#014497",
                shadowColor: "rgba(0, 0, 0, 1)",
                shadowBlur: 0,
                shadowOffsetX: 0,
                // areaColor: {
                //   image: icon,
                //   repeat: "repeat",
                // },
                shadowColor: "rgba(255, 255, 255, 0.5)",
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
              },
            },
            emphasis: {
              // areaColor: {
              //   image: icon,
              //   repeat: "repeat",
              // },
              disabled: false,
              itemStyle: {
                areaColor: "#014497",
                borderColor: "#2ab8ff",
                borderWidth: 1,
                shadowColor: "rgba(255, 255, 255, 0.5)",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 1,
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
            select: {
              disabled: false,
              itemStyle: {
                areaColor: "#014497",
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
            roam: false,
            data: [
            ],
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            itemStyle: {
              color: "#f00",
            },
            label: {
              show: false,
            },
            symbol: function (value, params) {
              return params.data.img;
            },
            symbolSize: [30, 49],
            symbolOffset: [0, -23],
            z: 9999,
            data: this.carinfo,
          },
        ];
      }

      that.chart = echarts.init(document.getElementById("mapbox"));
      echarts.registerMap("shandong", shandong);
      that.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            // console.log(params, params.data, that, this, "params");
            if (params.data == undefined) {
              return;
            } else {
              if (this.active == 0) {
                var text = `
          <div class="insertbox_popup_title">
            <div class="insertbox_popup_title_imgbox">
              <img src="${require("@/assets/imgs/model/poptitle.png")}" alt="" />
            </div>
            <div class="insertbox_popup_title_text">销售信息</div>
          </div>
          <div class="insertbox_popup_content">
            <div class="insertbox_popup_content_imgbox">
              <img src="${require("@/assets/imgs/model/insertimg.png")}" alt="" />
            </div>
            <div class="insertbox_popup_content_text">
              <div class="insertbox_popup_content_text_time">
                批次：<span>${params.data.batchName}</span>
              </div>
              <div class="insertbox_popup_content_text_area">
                数量：<span>${params.data.quantity}</span>
              </div>
              <div class="insertbox_popup_content_text_strategy">
                地址：<span>${params.data.address}</span>
              </div>
            </div>
        </div>`;
              } else if (this.active == 1) {
                var text = `
          <div class="insertbox_popup_title">
            <div class="insertbox_popup_title_imgbox">
              <img src="${require("@/assets/imgs/model/poptitle.png")}" alt="" />
            </div>
            <div class="insertbox_popup_title_text">物流信息</div>
          </div>
          <div class="insertbox_popup_content">
            <div class="insertbox_popup_content_imgbox">
              <img src="${require("@/assets/imgs/model/insertimg.png")}" alt="" />
            </div>
            <div class="insertbox_popup_content_text">
              <div class="insertbox_popup_content_text_time">
                车牌：<span>${params.data.carId}</span>
              </div>
              <div class="insertbox_popup_content_text_area">
                司机：<span>${params.data.transUser}</span>
              </div>
              <div class="insertbox_popup_content_text_strategy">
                数量：<span>${params.data.quanitiy}</span>
              </div>
            </div>
        </div>`;
              }
            }

            return text;
          },
          showContent: true,
          // enterable: true,
          className: "popup",
          renderMode: "html",
          borderColor: "rgba(11,50,74,0)",
          backgroundColor: "rgba(11,50,74,0)",
          textStyle: {
            color: "#2dd2e0",
          },
        },

        geo: {
          map: "shandong",
          //   aspectScale: 1,
          layoutCenter: ["70%", "58%"],
          //   layoutSize: "100%",
          top: 0,
          silent: true,
          roam: false,
          z: 0,
          label:{
             show: true,
                color: "#fff",
          },
          itemStyle: {
            normal: {
              areaColor: "#143041",
              shadowColor: "#00fffc",
              shadowBlur: 0,
              shadowOffsetX: 0,
              shadowOffsetY: 12,
              borderColor: "#00fffc",
              borderWidth: 0.5,
            },
            emphasis: {
              areaColor: "#014497",
              borderWidth: 1,
              color: "#ffffff",
              label: {
                show: false,
              },
            },
          },
          data:[]
        },
        series: series,
        // series: [
        //   {
        //     name: "销售流向",
        //     type: "map",
        //     map: "shandong",
        //     label: {
        //       show: true,
        //       color: "#fff",
        //     },
        //     top: 0,
        //     // aspectScale: 1,
        //     layoutCenter: ["70%", "58%"],
        //     itemStyle: {
        //       normal: {
        //         borderColor: "#2ab8ff",
        //         borderWidth: 1,
        //         areaColor: "#014497",
        //         shadowColor: "rgba(0, 0, 0, 1)",
        //         shadowBlur: 0,
        //         shadowOffsetX: 0,
        //         // areaColor: {
        //         //   image: icon,
        //         //   repeat: "repeat",
        //         // },
        //         shadowColor: "rgba(255, 255, 255, 0.5)",
        //         shadowBlur: 0,
        //         shadowOffsetX: 0,
        //         shadowOffsetY: 1,
        //       },
        //     },
        //     emphasis: {
        //       // areaColor: {
        //       //   image: icon,
        //       //   repeat: "repeat",
        //       // },
        //       disabled: false,
        //       itemStyle: {
        //         areaColor: "#014497",
        //         borderColor: "#2ab8ff",
        //         borderWidth: 1,
        //         shadowColor: "rgba(255, 255, 255, 0.5)",
        //         shadowBlur: 10,
        //         shadowOffsetX: 0,
        //         shadowOffsetY: 1,
        //       },
        //       label: {
        //         show: true,
        //         color: "#fff",
        //       },
        //     },
        //     select: {
        //       disabled: false,
        //       itemStyle: {
        //         areaColor: "#014497",
        //       },
        //       label: {
        //         show: true,
        //         color: "#fff",
        //       },
        //     },
        //     roam: false,
        //     data: [
        //       {
        //         fromName: "省委",
        //         toName: "合肥市",
        //         coords: [
        //           [117.000923, 36.675807],
        //           [118.66471, 37.434564],
        //         ],
        //       },
        //     ],
        //   },
        //   {
        //     name: "线路",
        //     type: "lines",
        //     coordinateSystem: "geo",
        //     zlevel: 2,
        //     large: true,
        //     effect: {
        //       show: true,
        //       constantSpeed: 30,
        //       symbol: "arrow", //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
        //       symbolSize: 0,
        //       trailLength: 0,
        //     },

        //     lineStyle: {
        //       normal: {
        //         color: "#2ab8ff",
        //         /*
        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                 offset: 0, color: '#58B3CC'
        //             }, {
        //                 offset: 1, color: '#F58158'
        //             }], false),*/
        //         width: 2,
        //         opacity: 1.0,
        //         curveness: 0.15,
        //       },
        //     },
        //     data: [
        //       {
        //         fromName: "省委",
        //         toName: "合肥市",
        //         coords: [
        //           [117.000923, 36.675807],
        //           [118.66471, 37.434564],
        //         ],
        //       },
        //     ],
        //   },
        //   {
        //     type: "scatter",
        //     coordinateSystem: "geo",
        //     itemStyle: {
        //       color: "#f00",
        //     },
        //     label: {
        //       show: false,
        //     },
        //     symbol: function (value, params) {
        //       return params.data.img;
        //     },
        //     symbolSize: [30, 49],
        //     symbolOffset: [0, -23],
        //     z: 9999,
        //     data: mapDate,
        //   },
        //   // {
        //   //   type: "scatter",
        //   //   coordinateSystem: "geo",
        //   //   label: {
        //   //     normal: {
        //   //       show: true,
        //   //       formatter: function (params) {
        //   //         var name = params.name;
        //   //         var value = params.data.datas;
        //   //         var text = `{fline|${value}}\n{tline|${name}}`;
        //   //         return text;
        //   //       },
        //   //       color: "#fff",
        //   //       rich: {
        //   //         fline: {
        //   //           padding: [0, 25],
        //   //           color: "#fff",
        //   //           textShadowColor: "#030615",
        //   //           textShadowBlur: "0",
        //   //           textShadowOffsetX: 1,
        //   //           textShadowOffsetY: 1,
        //   //           fontSize: 14,
        //   //           fontWeight: 400,
        //   //         },
        //   //         tline: {
        //   //           padding: [0, 27],
        //   //           color: "#ABF8FF",
        //   //           fontSize: 12,
        //   //         },
        //   //       },
        //   //     },
        //   //     emphasis: {
        //   //       show: true,
        //   //     },
        //   //   },
        //   //   itemStyle: {
        //   //     color: "#0b324a",
        //   //   },
        //   //   symbol: img2,
        //   //   symbolSize: [100, 50],
        //   //   symbolOffset: [0, -60],
        //   //   z: 999,
        //   //   data: mapDate,
        //   // },
        // ],
      });
      // } catch (error) {
      //   console.log(error);
      // }
      //   }, 500);
    },
    change(index) {
      this.active = index;
      this.initChart();
    },
  },
};
</script>
<style lang="less" scoped>
.map1 {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("~@/assets/imgs/retrospect/mapbg.png") no-repeat bottom;
  background-size: 80% 80%;
  .plantline {
    width: 100%;
    height: 100%;
    /deep/.popup {
      height: calc(180 / 1080 * 100vh);
      width: calc(345 / 1920 * 100vw);
      background: url("~@/assets/imgs/model/popbg.png") no-repeat;
      background-size: 100% 100%;
      display: none;
      .insertbox_popup_title {
        margin-top: calc(10 / 1080 * 100vh);
        height: calc(30 / 1080 * 100vh);
        width: calc(340 / 1920 * 100vw);
        .insertbox_popup_title_imgbox {
          float: left;
          height: calc(25 / 1080 * 100vh);
          width: calc(20 / 1920 * 100vw);
          // img {
          //   width: 100%;
          //   height: 100%;
          // }
        }
        .insertbox_popup_title_text {
          float: left;
          font-size: calc(20 / 1080 * 100vh);
          color: #fff;
        }
      }
      .insertbox_popup_content {
        height: calc(120 / 1080 * 100vh);
        width: calc(300 / 1920 * 100vw);
        .insertbox_popup_content_imgbox {
          float: left;
          height: calc(120 / 1080 * 100vh);
          width: calc(100 / 1920 * 100vw);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .insertbox_popup_content_text {
          float: left;
          margin-left: calc(10 / 1920 * 100vw);
          height: calc(100 / 1080 * 100vh);
          width: calc(180 / 1920 * 100vw);
          color: #fff;
          line-height: calc(30 / 1080 * 100vh);
          // .insertbox_popup_content_text_time {
          // }
          span {
            color: #38efff;
          }
        }
      }
    }

    // background: #000;
  }
  .tabs {
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(125 / 1080 * 100vh);
    width: calc(200 / 1920 * 100vw);
    z-index: 1000;
    .tabs_item {
      margin-bottom: calc(15 / 1080 * 100vh);
      height: calc(40 / 1080 * 100vh);
      width: calc(200 / 1920 * 100vw);
      background: url("~@/assets/imgs/retrospect/tabsbg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      color: #fff;
      line-height: calc(40 / 1080 * 100vh);
      font-size: calc(24 / 1080 * 100vh);
      font-weight: 700;
    }
    .active {
      background: url("~@/assets/imgs/retrospect/tabsbg_active.png") no-repeat;
      color: #73fdff;
    }
  }
}

// #mapbox {
//   .echarts_tooltip {
//     height: calc(180 / 1080 * 100vh);
//     width: calc(345 / 1920 * 100vw);
//     background: url("~@/assets/imgs/model/popbg.png") no-repeat;
//     background-size: 100% 100%;
//     background: #000;
//   }
// }
</style>

山东省市数据：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.98944183792288&lng=97.6025390625&zoom=4