echarts中国地图 飞线 热力

<template> <div style="width: 100%; height: 100%; padding: 5px 10px"> <div id="map" style="width: 788px; height: 700px"></div> </div> </template> <script> import axios from "axios"; import china from "../../utils/china.json"; export default { 
    props: [], data() { 
    return { 
    hotData: [], fromData: [], }; }, methods: { 
    getStatisticsClientType() { 
    let that = this; axios .post( "https://avamayun.xingbiaoyi.com/overviewScreen/statisticsRegionScanCode" ) .then(function (res) { 
    that.hotData = [ { 
    log: 121.07299, scanCount: 1526, region: "南通市", lat: 32.06764, }, { 
    log: 120., scanCount: 1167, region: "上海市", lat: 24., }, { 
    log: 118.85578, scanCount: 26, region: "红河哈尼族彝族自治州", lat: 31.79811, }, { 
    log: 113.33685, scanCount: 23, region: "广州市", lat: 23.13491, }, { 
    log: 103.83845, scanCount: 16, region: "兰州市", lat: 36.0766, }, { 
    log: 113.06644, scanCount: 7, region: "长沙市", lat: 28.25761, }, ]; // that.hotData = res.data that.hotData.map((i) => { 
    i.name = i.region; i.value = [i.log, i.lat, i.scanCount]; // i.visualMap = false; }); that.initChart(); }) .catch(function (error) { 
    console.log(error); }); }, getInfo() { 
    let that = this; axios .post( "https://avamayun.xingbiaoyi.com/overviewScreen/scanCodeMigrationMap" ) .then(function (res) { 
    const arr = []; res.data.map((i) => { 
    arr.push([ { 
    coord: i.from.split(","), }, { 
    coord: i.to.split(","), }, ]); }); that.fromData = arr; that.initChart(); }) .catch(function (error) { 
    console.log(error); }); }, initChart() { 
    this.setOptions(); }, setOptions() { 
    let myChart = echarts.init(document.getElementById("map"), "macarons"); window.addEventListener("resize", () => { 
    myChart.resize(); }); echarts.registerMap("china", china); const option = { 
    visualMap: { 
    type: "continuous", min: 0, max: 12, splitNumber: 3, inRange: { 
    color: ["#dec674", "#ffc20e"], }, textStyle: { 
    color: "#fff", }, show: false, }, geo: { 
    map: "china", roam: true, center: [110.97, 35.71], layoutCenter: ["100%", "100%"], zoom: 1, // roam: true, //支持拖拽缩放 scaleLimit: { 
    //滚轮缩放的极限控制 min: 1, //缩放最小大小 max: 6, //缩放最大大小 }, label: { 
    normal: { 
    show: false, textStyle: { 
    color: "#fff", fontSize: 8, }, }, emphasis: { 
    show: true, textStyle: { 
    color: "#fff", }, }, }, itemStyle: { 
    areaColor: "rgba(0, 23, 58, 1)", borderColor: "rgba(85, 147, 193, 1)", borderWidth: 1, emphasis: { 
    borderWidth: 1, borderColor: "rgba(60,233,255,1)", areaColor: "rgba(0, 23, 58, 1)", }, }, }, // visualMap: { 
    // min: 0, // max: 1, // calculable: false, // realtime: false, // inRange: { 
    // color: [ // "#fcf16e", // "#dec674", // "#ffe600", // "#ffd400", // "#ffd400", // "#ffc20e", // ], // }, // }, series: [ { 
    type: "heatmap", coordinateSystem: "geo", data: this.hotData, color: [ "#fcf16e", "#dec674", "#ffe600", "#ffd400", "#ffd400", "#ffc20e", ], // symbolSize: function (val) { 
    // return val[2] * 1; // }, // itemStyle: { 
    // normal: { 
    // color: "#ddb926", // }, // }, }, { 
    type: "lines", zlevel: 2, effect: { 
    show: true, period: 4, //箭头指向速度，值越小速度越快 trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重 symbol: "circle", //箭头图标 symbolSize: 7, //图标大小 }, lineStyle: { 
    normal: { 
    color: "#FFB800", width: 0, //线条宽度 opacity: 0.1, //尾迹线条透明度 curveness: 0.2, //尾迹线条曲直度 }, }, data: this.fromData, }, ], }; myChart.setOption(option); }, }, created() { 
    this.getInfo(); this.getStatisticsClientType(); }, }; </script> <style lang="scss" scoped> </style>