制作可视化必不可少的技术echarts

在echarts制作地图

在vue项目种下载echarts,在其最新版本的过程中，china.json 及word.json两个文件都已经取消，需要的化可以来我主页自取！
1.首先我们需要定义一个容器

<template>
  <div class="mychart" :id="'chart' + _uid"></div>
</template>

2.引入echarts及世界地图的json文件便于我们制作Geo图层

import Echarts from "echarts";
import worldMap from "echarts/map/json/world.json";

3.整体的代码：

<template>
  <div class="mychart" :id="'chart' + _uid"></div>
</template>

<script>
// import { judge } from 'service/api'
import Echarts from "echarts";
import worldMap from "echarts/map/json/world.json";
import { bigScreen } from "service/api";

export default {
  data() {
    return {
      data: [],
      mychart: {},
      option: {
        tooltip: {
          trigger: "item",
        },
        geo: {
          map: "world",
          top: "10%",
          left: "5%",
          right: "5%",
          bottom: "10%",
          label: {
            emphasis: {
              show: false,
            },
          },
          aspectScale: 0.75,
          // zoom: 1,
          itemStyle: {
            normal: {
              areaColor: "#2c6a96",
              borderColor: "#83cbf8", // '#1E4E8B'
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#2c6a96",
              borderColor: "#83cbf8", // '#1E4E8B'
            },
          },
        },
        series: [],
      },
      geoCoordMap: {
        // 杭州: [119.5313, 29.8773],
        // "安哥拉-罗安达": [13.0333333333, -8.083333333],
        // "澳洲-墨尔本": [144.9755859375, -37.8141237016],
        // "澳洲-悉尼": [151.28333333333333, -33.916666666666664],
        // "澳洲-堪培拉": [149.0844726563, -35.3173663292],
        // "德国-布鲁塞尔": [4.3450927734, 50.8510411297],
        // "德国-法兰克福": [8.701171875, 50.1346643222],
        // "德国-柏林": [13.4088134766, 52.5162208639],
        // "俄罗斯-莫斯科": [37.6391601563, 55.7642131648],
        // "英国-伦敦": [-0.1318359375, 51.4676969562],
        // "英国-邓斯特布尔": [-0.4648160934, 52.1371890032],
        // "法国-巴黎": [2.3510742188, 48.8357974624],
        // "法国-蒙彼利埃": [3.8616943359, 43.6042618681],
        // "加拿大-温哥华": [-123.1182861328, 49.2964716027],
        // "柬埔寨-西哈努克": [103.5210800171, 10.6275412459],
        // "捷克-塔博尔": [14.6722412109, 49.4073990589],
        // "捷克-布拉格": [14.4415283203, 50.0747692335],
        // "马来西亚-甘榜峇鲁": [101.7095374642, 3.1619413302],
        // "马来西亚-巴生": [101.4546203613, 3.028069379],
        // "美国-华盛顿": [-77.0251464844, 38.8824811976],
        // "美国-波特兰": [-122.65960693359997, 45.59190960761732],
        // "美国-洛杉矶": [-118.2238769531, 34.0344526097],
        // "美国-纽约": [-76.9921875, 38.6511983323],
        // "美国-芝加哥": [-87.5830078125, 41.8368278607],
        // "美国-西雅图": [-122.3327636719, 47.5913464768],
        // "美国-旧金山": [-122.434387207, 37.7479148249],
        // "美国-核桃市": [-118.2470297813, 34.0542772204],
        // "美国-奇诺": [-117.7322387695, 33.9900571345],
        // "美国-詹姆斯堡": [-74.4395828247, 40.3521695963],
        // "缅甸-仰光": [96.1976623535, 16.8610624585],
        // "日本-东京": [139.7570800781, 35.6929946321],
        // "日本-大阪": [135.4998779297, 34.6874279493],
        // "韩国-首尔": [126.9895935059, 37.5511101601],
        // "沙特-达曼": [72.8321456909, 20.3964450705],
        // "泰国-曼谷": [100.5084228516, 13.7633957796],
        // "泰国-春武里": [101.0110473633, 13.3388476879],
        // "泰国-北榄": [100.6114193425, 13.5952693961],
        // "老挝-万象": [102.6438903809, 17.9774268559],
        // "越南-胡志明": [106.6223144531, 10.8009326407],
        // "西班牙-马德里": [-3.7, 40.43333333333333],
        // "新加坡-新加坡": [103.8647460938, 1.2962761196],
        // "印度-孟买": [72.85, 18.9333333333],
        // "印度-新德里": [77.216666666, 28.6166666666],
        // "埃塞俄比亚-亚的斯亚贝巴": [38.759765625, 9.0044515617],
        // "荷兰-阿姆斯特丹": [4.8944091797, 52.3722455687],
        // "荷兰-欧德米尔": [4.6459722519, 52.3875181437],
        // "荷兰-鹿特丹": [4.4714355469, 51.9103907099],
        // "伊拉克-巴格达": [44.3627929688, 33.2846199689],
        // "中国-香港": [114.1968232013, 22.2863306587],
      },
      queryForm: {
        order: "",
        orderField: "",
        start: 0,
        statEndTime: "",
        statStartTime: "",
        statTime: "",
        zoneName: "",
      },
    };
  },
  methods: {
    convertData(data) {
      // console.log(this.geoCoordMap);
      const res = [];
      for (let i = 0; i < data.length; i++) {
        const dataItem = data[i];
        const fromCoord = this.geoCoordMap[dataItem[0].name]; // 始发地
        const toCoord = this.geoCoordMap[dataItem[1].name]; // 目的地

        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord], // 一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
          });
        }
      }
      return res;
    },
    setOption() {
      const HZData = this.data;
      const series = [];
      series.push(
        {
          type: "lines",
          zlevel: 1,
          symbol: ["none", "none"],
          lineStyle: {
            normal: {
              width: 3,
              curveness: 0.4,
              color: "#5c686f",
            },
          },
          tooltip: {
            show: false,
          },
          data: this.convertData(HZData),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "fill",
            period: 5,
            scale: 8,
          },
          symbolSize: function (val) {
            return val[2] / 10; //根据经纬度第二哥值大小动态设置symbolSize
          },
          tooltip: {
            show: false,
          },
          itemStyle: {
            color: (val) => {
              if (val.name == "杭州") {
                return "rgba(186,232,255,0.64)";
              } else {
                return "rgba(255,52,21,0.50)";
              }
            },
          },
          data: HZData.map((dataItem) => {
            return {
              name: dataItem[1].name, //城市名称
              value: this.geoCoordMap[dataItem[1].name].concat(80), //城市经纬度,
            };
          }),
        },
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 4,
          rippleEffect: { number: 0, period: 0, scale: 1 },
          symbol: function (val) {
            if (val[3] !== "杭州") {
              return "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAASJJREFUOE+lkz8vBUEUxX/nG2iRoJKIUkV4pURCFDoN7etEIzRonkQiUdHyATQoKIV4jfZJVP4UT+sbXJnk7mZ234wtTDU359xfzs69K/55lOo3szYwCyy4/gh0JZ3X/QMAM/sExjLBviSNx1oFYGa7QKfhq/YkHRWeEmBmw0A/aj4FLr3eALYibUTSd6hjwDJw46YPYK4wOfwZmHB9RdJtHXAA7LvhUFKoy2NmST1OMAO8eEcPmJf0E2ozGwKegGnXQ7puJYEbX4EpN10AV35fAzb93pc0OvCIDtgGThqmcCxpJwlwyD2wmIFcS1rN7oEDWsBDAvAGLEl6/xPgkLDKZzVIaL6rg5P/gkPisVW2rzFBYfDZT0pazz1sNkHDJEr5FzjRXBGiqvRcAAAAAElFTkSuQmCC";
            } else {
              return "none";
            }
          },

          symbolSize: function (val) {
            return val[2] / 5;
          },
          tooltip: {
            show: true,
            position: "top",
            backgroundColor: "rgba(7,18,32,0.5);",
            padding: 0,
            borderWidth: 1,
            borderColor: "rgba(139,191,242,0.5)",
            formatter: (val) => {
              if (val.name == "杭州") {
                return "";
              }
              return `<div style="width: 302px;
                      height: 149px;
                      border-radius: 20px;
                      padding:20px 23px;
                      box-sizing: border-box;
                     ">
                      <div>${val.name}</div>
                      <div style="margin-top:12px">
                          <div class="bottom"
                            style=" display: flex;
                            justify-content: flex-start;
                            align-items: center;"
                          >
                            <div class="left"
                              style="width: 129px;
                              height: 68px;
                              "
                            >
                                <img style="width:100%;height:100%" src="${val.value[4].flagUrl}" alt="">
                            </div>
                            <div class="right"
                            style="color: #3196fa;
                                  display: flex;
                                  margin-left:16px;
                                  height: 68px;
                                  justify-content: space-between;
                                  flex-direction: column;
                                  font-size: 12px;
                                  padding:5px 0"
                            >
                              <span>班次号：${val.value[4].model}</span>
                              <span>周班次：${val.value[4].flghtNumber}</span>
                              <span>航空公司：${val.value[4].airlineCompany}68</span>
                            </div>
                          </div>
                      </div>
              </div>`;
            },
          },
          symbolOffset: [0, -10],
          symbolKeepAspect: true,
          data: HZData.map((dataItem) => {
            return {
              name: dataItem[1].name,
              value: this.geoCoordMap[dataItem[1].name].concat(
                80,
                dataItem[1].name,
                dataItem[1].value
              ),
            };
          }),
        }
      );
      this.option.series = series;
    },
    initMap() {
      Echarts.registerMap("world", worldMap);
      this.mychart = Echarts.init(document.querySelector("#chart" + this._uid));
      this.mychart.setOption(this.option);
      // this.mychart.on("click", { seriesIndex: 2 }, this.handleClick);//绑定事件
    },
    handleClick(e) {
      // console.log(e);
    },
    getTable() {
      bigScreen.queryScreenHzjcgjhxPage(this.queryForm).then((res) => {
        let geoCoordMap = { 杭州: [119.5313, 29.8773] };
        // 处理使用的数据
        let result = res.data.result;
        this.data = [[{ name: "杭州" }, { name: "杭州" }]];
        result.forEach((item) => {
          geoCoordMap[item.destinations] = [Number(item.longitude), Number(item.latitude)];
          this.data.push([{ name: "杭州" }, { name: item.destinations, value: item }]);
        });
        this.geoCoordMap = geoCoordMap;
        this.setOption();
        this.initMap();
      });
    },
  },
  created() {},
  mounted() {
    this.getTable();
  },
};
</script>

<style lang="less" scoped>
.mychart {
  width: 100%;
  height: 100%;
}
</style>