使用echarts绘制中国地图与航班线路图

在vue项目中实现：

1.安装echarts

npm i echarts

 2.使用echarts，这里需要中国地图的json数据，可以自行查找（或者私我）。

// echarts5版本，引入echarts的方式发生了改变，要使用以下方式引入

import * as echart from "echarts"

import {ref,onMounted} from "vue"

// 引入中国地图的json数据

import CHINA from "./assets/china.json";

let container=ref()

onMounted(() => {

  let myChart = echarts.init(container.value);

   // 注册地图

  echarts.registerMap("china", CHINA as any);

  myChart.setOption({

    geo: [

      {

        show: true,

        map: "china",

        roam: true,

        label: {

          show: true,

          color: "white",

        },

        itemStyle: {

          areaColor: {

            // 径向渐变

            type: "radial",

            x: 0.5,

            y: 0.5,

            r: 0.5,

            colorStops: [

              {

                offset: 0,

                color: "green", // 0% 处的颜色

              },

              {

                offset: 1,

                color: "#399036", // 100% 处的颜色

              },

            ],

          },

        },

        // 强调（鼠标放上去的省份位置）

        emphasis: {

          label: {

            fontSize: 16,

            color: "white",

          },

          itemStyle: {

            color: "green",

            opacity: 0.9,

          },

        },

      },

    ],

    series: [

      {

        // 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化

        type: "lines",

        data: [

          {

            // coords是一个二维数组

            coords: [

              [116.405285, 39.904989],

              [112.549248, 37.857014],

            ],

          },

          {

            coords: [

              [111.670801, 40.818311],

              [121.472644, 31.231706],

            ],

          },

        ],

        lineStyle: {

          color: "white",

          opacity: 0.1,

          width: 2,

          type: [2, 2],

          curveness: 0.1,

        },

        // 特效

        effect: {

          show: true,

          period: 4,

           // 特效图形的标记，可以使用图片链接，或者"path://"+svg图标的矢量路径

          symbol:  "rect",

          symbolSize: 16,

          color: "skyblue",

        },

      },

    ],

  });

});