Echarts画区域飞线地图

 最近项目要求榆林市飞线图，地图上特定散点图加飞线效果，看效果：

 

1、echarts注册地图，如榆林市地图数据yls.json(https://geo.datav.aliyun.com/areas_v3/bound/610800_full.json)

<div id="chart-box" style="height: 100%; width: 100%"></div>

import echarts from "echarts/lib/echarts";
import yls_json from "./yls.json";

let data = yls_json;
this.$echarts.registerMap("yls", data);

2、配置echarts的option的geo,将注册的地图yls放在echarts的geo中。series里的type:scatter设置coordinateSystem: 'geo'；type: "lines",coordinateSystem: "geo",才能实现散点和飞线效果。 

geo: {
        map: "yls",
        zoom: 1,
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#43D0D6",
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(255,209,163, .5)", //区域边框颜色
            areaColor: "rgba(73,86,166,.1)", //区域颜色
            borderWidth: 0.5, //区域边框宽度
            shadowBlur: 5,
            shadowColor: "rgba(107,91,237,.7)",
          },
          emphasis: {
            borderColor: "#FFD1A3",
            areaColor: "rgba(102,105,240,.3)",
            borderWidth: 1,
            shadowBlur: 5,
            shadowColor: "rgba(135,138,255,.5)",
          },
        },
      },

series: [
        {
          name: "地点",
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke",
          },
          label: {
            normal: {
              show: true,
              formatter: "{b}",
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          },
          symbolSize: 8,
          showEffectOn: "render",
          itemStyle: {
            normal: {
              color: "#46bee9",
            },
          },
          data: coord.slice(0, 3),
        },
        {
          type: "lines",
          coordinateSystem: "geo",
          zlevel: 15,

          effect: {
            show: true,
            constantSpeed: 30,
            symbol: "pin",
            symbolSize: 3,
            trailLength: 0,
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#58B3CC",
                  },
                  {
                    offset: 1,
                    color: "#F58158",
                  },
                ],
                false
              ),
              width: 2,
              opacity: 0.4,
              curveness: 0.6,
            },
          },
          data: lines_coord.slice(0, 4),
        },
      ],

 3、没有配置echarts的seriestype:scatter和type:lines，显示如下geo地图

 

 4、地图上散点scatter显示label，使用echarts的formatter，达到最终效果

label: {
            normal: {
              show: true,
              formatter: "{b}",
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          },

 {a} — series的name值
{b} — 数据项的name值
{c} — 数据项的value值

 完整代码：

<template>
  <div id="chart-box" style="height: 100%; width: 100%"></div>
</template>

<script>
import echarts from "echarts/lib/echarts";
import yls_json from "./yls.json";
export default {
  data() {
    return { echarts, data: {}, yls_json };
  },
  mounted() {
    // console.log(yls_json);
    let data = yls_json;
    this.$echarts.registerMap("yls", data);
    const chart = this.$echarts.init(document.getElementById("chart-box"));
    // const coord = data.features.map((val) => {
    //   return {
    //     name: val.properties.name,
    //     value: val.properties.center.concat(1),
    //     symbolSize: 8,
    //     itemStyle: {
    //       normal: {
    //         color: "#F58158",
    //       },
    //     },
    //   };
    // });
    let coord = [
      {
        name: "榆北曹家滩矿业",
        value: [109.868455, 38.638841, 1],
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: "#F58158",
          },
        },
      },
      {
        name: "榆北煤业",
        value: [109.764534, 38.249875, 1],
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: "#F58158",
          },
        },
      },
      {
        name: "陕西小保当矿业有限公司",
        value: [109.894234, 38.75599, 1],
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: "#F58158",
          },
        },
      },
    ];
    let lines_coord = [];
    coord.forEach((v, index) => {
      index > 0 &&
        lines_coord.push({
          coords: [v.value, coord[0].value],
        });
    });
    // console.log(coord);
    // console.log(lines_coord);
    lines_coord = [
      {
        coords: [
          [109.868455, 38.638841],
          [109.764534, 38.249875],
        ],
      },
      {
        coords: [
          [109.894234, 38.75599],
          [109.764534, 38.249875],
        ],
      },
      {
        coords: [
          [109.764534, 38.249875],
          [109.868455, 38.638841],
        ],
      },
      {
        coords: [
          [109.764534, 38.249875],
          [109.894234, 38.75599],
        ],
      },
    ];
    //地市取简称
    // data.features.forEach(v => {
    //     v.properties.name = v.properties.name.indexOf('版纳')>-1 ?v.properties.name.substr(0,4) : v.properties.name.substr(0,2);
    // })
    
    const option = {
      title: {
        text: "榆林市",
      },
      geo: {
        map: "yls",
        zoom: 1,
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#43D0D6",
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(255,209,163, .5)", //区域边框颜色
            areaColor: "rgba(73,86,166,.1)", //区域颜色
            borderWidth: 0.5, //区域边框宽度
            shadowBlur: 5,
            shadowColor: "rgba(107,91,237,.7)",
          },
          emphasis: {
            borderColor: "#FFD1A3",
            areaColor: "rgba(102,105,240,.3)",
            borderWidth: 1,
            shadowBlur: 5,
            shadowColor: "rgba(135,138,255,.5)",
          },
        },
      },
      series: [
        {
          name: "地点",
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke",
          },
          label: {
            normal: {
              show: true,
              formatter: "{b}",
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 9,
              },
            },
          },
          symbolSize: 8,
          showEffectOn: "render",
          itemStyle: {
            normal: {
              color: "#46bee9",
            },
          },
          data: coord.slice(0, 3),
        },
        {
          type: "lines",
          coordinateSystem: "geo",
          zlevel: 15,

          effect: {
            show: true,
            constantSpeed: 30,
            symbol: "pin",
            symbolSize: 3,
            trailLength: 0,
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#58B3CC",
                  },
                  {
                    offset: 1,
                    color: "#F58158",
                  },
                ],
                false
              ),
              width: 2,
              opacity: 0.4,
              curveness: 0.6,
            },
          },
          data: lines_coord.slice(0, 4),
        },
      ],
    };
    chart.setOption(option);
    // chart.on("click", function (params) {
    //   console.log(params);
    // });
  },
};
</script>

<style></style>