Vue3 + Echarts 5 繪製帶有立體感流線中國地圖，建議收藏

前端人發表於2022-04-06
VueEcharts地圖

本文繪製的地圖效果圖如下：

Vue3 + Echarts 5 繪製帶有立體感流線中國地圖，建議收藏

 

一、Echarts 使用五部曲

1、下載並引入 echarts

Echarts 已更新到了 5.0 版本，安裝完記得檢查下自己的版本是否是 5.0 。

npm install echarts --save

下載地圖的 json 資料

可以下載中國以及各個省份地圖資料。免費的檔案下載地址：

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

記得收藏哦！免得浪費加班時間。

引入：

import * as echarts from "echarts"
import chinaJSON from '../../assets/json/china.json'

 

2、準備容器

給元素定義寬高確定的容器用來裝地圖。

<template>
 <div id="chinaMap"></div>  
</template>

 

3、例項化 echarts 物件

import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
var myChart = echarts.init(document.getElementById('chinaMap'))
// 建立了一個 myChart 物件

 

4、指定配置項和資料

var option = {
 // 存放需要繪製圖片型別，以及樣式設定
}

 

5、給 echarts 物件設定配置項

myChart.setOption(option)

 

Vue3 + Echarts 5 繪製帶有立體感流線中國地圖，建議收藏

 

就這麼簡單幾步還用你告訴我嗎？不瞞你說，官網也有這東東。雖然這些你都知道，但是並不影響你還是不知道流線圖是怎麼繪製出來的。下面我們看看是如何繪製的。

二、開始繪製流線中國地圖

第一步：先繪製一箇中國地圖

Vue3 + Echarts 5 繪製帶有立體感流線中國地圖，建議收藏

 

import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
 drawChina()
})
function drawChina() {
 var myChart = echarts.init(chinaMap.value)
 echarts.registerMap('china', chinaJson) //註冊可用的地圖
 var option = {
  geo: {
   show: true,
   //設定中心點
   center: [105.194115019531, 35.582111640625],
   map: 'china',
   roam: true, //是否允許縮放，拖拽
   zoom: 1, //初始化大小
   //縮放大小限制
   scaleLimit: {
    min: 0.1, //最小
    max: 12, //最大
   },
   //各個省份模組樣式設定
   itemStyle: {
    normal: {
     areaColor: '#3352c7',//背景色
     color: 'red',//字型顏色
     borderColor: '#5e84fd',
     borderWidth: 2,
    },
   },
   //高亮狀態
   emphasis: {
    itemStyle: {
     areaColor: '#ffc601',
    },
    label: {
     show: true,
     color: '#fff',
    },
   },
   // 顯示層級
   z: 10,
  },
 }
 myChart.setOption(option)
}

 

一個簡單的地圖就繪製好了，繼續研究如何新增流線。

第二步：新增流線

通過 series 屬性來設定髮色點的樣式，接受點的樣式，以及線條和線條上的動畫。

設定 series 的值：

// 中國地理座標圖
var chinaGeoCoordMap: Object = {
 西安: [108.906866, 34.162109],
 拉薩: [91.140856, 29.645554],
}
//發射點
var chinaDatas = [
 [
  {
   name: '拉薩',
   value: 2,
  },
 ],
]
//投射點
const scatterPos = [108.906866, 34.162109]
// 資料轉換
var convertData = function (data: any) {
 var res = []
 for (var i = 0; i < data.length; i++) {
  var dataItem = data[i]
  var fromCoord = chinaGeoCoordMap[dataItem[0].name]
  var toCoord = scatterPos
  if (fromCoord && toCoord) {
   res.push([
    {
     coord: fromCoord,
     value: dataItem[0].value,
    },
    {
     coord: toCoord,
     },
    ])
  }
 }
 return res
}

var series: Array<any> = []
;[['西安', chinaDatas]].forEach(function (item, i) {
 series.push(
  //設定指向箭頭資訊
  {
   type: 'lines',
   zlevel: 2,
   effect: {
    show: true,
    period: 4, //箭頭指向速度，值越小速度越快
    trailLength: 0.02, //特效尾跡長度[0,1]值越大，尾跡越長重
    symbol: 'arrow', //箭頭圖示
    symbolSize: 8, //圖示大小
   },
   lineStyle: {
    normal: {
     color: '#adffd0',
     width: 1, //尾跡線條寬度
     opacity: 1, //尾跡線條透明度
     curveness: 0.3, //尾跡線條曲直度
    },
   },
   data: convertData(item[1]),
  },
 // 發射點位置漣漪等效果
 {
  type: 'effectScatter',
  coordinateSystem: 'geo',
  zlevel: 2,
  rippleEffect: {
  //漣漪特效
  period: 4, //動畫時間，值越小速度越快
  brushType: 'stroke', //波紋繪製方式 stroke, fill
  scale: 4, //波紋圓環最大限制，值越大波紋越大
  },
  label: {
   normal: {
   show: true,
   position: 'right', //顯示位置
   offset: [5, 0], //偏移設定
   formatter: function (params) {
    //圓環顯示文字
    return params.data.name
   },
   fontSize: 13,
  },
  emphasis: {
   show: true,
  },
 },
 symbol: 'circle',
 symbolSize: function (val: Array<any>) {
  return 5 + val[2] * 5 //圓環大小
 },
 itemStyle: {
 normal: {
  show: false,
  color: '#f8f9f5',
  },
 },
 data: item[1].map(function (dataItem: any) {
  return {
   name: dataItem[0].name,
   value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
   }
  }),
 },
 //被攻擊點
 {
  type: 'effectScatter',
  coordinateSystem: 'geo',
  zlevel: 2,
  rippleEffect: {
   //漣漪相關
   period: 2,
   brushType: 'stroke',
   scale: 5,
   },
  label: {
   normal: {
    show: true,
    position: 'right',
    color: '#0f0',
    formatter: '{b}',
    textStyle: {
     color: '#fff',
     fontSize: 12,
     },
    },
    emphasis: {
     show: true,
     color: '#f60',
    },
   },
   itemStyle: {
    normal: {
    color: '#f00',
   },
  },
  symbol: 'circle',
  symbolSize: 10, //圓圈大小
  data: [
   {
    name: item[0],
    value: chinaGeoCoordMap[item[0]].concat([10]),
    },
   ],
  },
 )
})

 

給上邊的 option 新增 series 屬性。

第三步：新增立體投影

新增立體投影的時候，由於並沒有這樣的屬性，所以需要通過設定邊框投影，再加一個偏移。

實現原理：繪製兩個地圖，設定中心點是一樣的，然後一個設定邊框投影+偏移，它的層級設定小一點，上邊再繪製一個地圖不設定投影，這樣就能夠實現上述效果。

// series 新增一個物件，繪製新地圖
{
 //繪製一個新地圖
 type: 'map',
 map: 'china',
 zoom: 1,
 center: [105.194115019531, 35.582111640625],
 z: -1,
 aspectScale: 0.75, //
 itemStyle: {
  normal: {
   areaColor: '#f00',
   borderColor: '#090438',
   borderWidth: '2',
   shadowColor: '#090438',
   shadowOffsetX: 0,
   shadowOffsetY: 15,
   },
 },
}

 

上述效果的完整原始碼：

<template>
  <div>
    首頁
    <div
      ref="chinaMap"
      class="chinaMap"
      style="
        height: 800px;
        border: solid 1px red;
        width: 100%;
        background: #0b0873;
      "
    >
      地圖1
    </div>
  </div>
</template>
<style scoped>
.chinaMap {
  transform: rotate3d(1, 0, 0, 35deg);
}
</style>
<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
  drawChina()
})
/**************************** series start ************************************/
//中國地理座標圖
var chinaGeoCoordMap: Object = {
  西安: [108.906866, 34.162109],
  柯橋區: [120.476075, 30.078038],
  拉薩: [91.140856, 29.645554],
  瀋陽: [123.431474, 41.805698],
  新疆: [87.627704, 43.793026],
  臺灣: [121.508903, 25.044319],
}
var chinaDatas = [
  [
    {
      name: '柯橋區',
      value: 0,
    },
  ],
  [
    {
      name: '拉薩',
      value: 2,
    },
  ],
  [
    {
      name: '瀋陽',
      value: 1,
    },
  ],
  [
    {
      name: '新疆',
      value: 1,
    },
  ],
  [
    {
      name: '臺灣',
      value: 1,
    },
  ],
]
//設定投射點
const scatterPos = [108.906866, 34.162109]

var convertData = function (data: any) {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i]
    var fromCoord = chinaGeoCoordMap[dataItem[0].name]
    var toCoord = scatterPos
    if (fromCoord && toCoord) {
      res.push([
        {
          coord: fromCoord,
          value: dataItem[0].value,
        },
        {
          coord: toCoord,
        },
      ])
    }
  }
  console.log('res', res)
  return res
}

var series: Array<any> = []
;[['西安', chinaDatas]].forEach(function (item, i) {
  console.log(item, item[0])
  series.push(
    {
      //繪製一個新地圖
      type: 'map',
      map: 'china',
      zoom: 1,
      center: [105.194115019531, 35.582111640625],
      z: -1,
      aspectScale: 0.75, //
      itemStyle: {
        normal: {
          areaColor: '#f00',
          borderColor: '#090438',
          borderWidth: '2',
          shadowColor: '#090438',
          shadowOffsetX: 0,
          shadowOffsetY: 15,
        },
      },
    },
    //設定指向箭頭資訊
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭頭指向速度，值越小速度越快
        trailLength: 0.02, //特效尾跡長度[0,1]值越大，尾跡越長重
        symbol: 'arrow', //箭頭圖示
        symbolSize: 8, //圖示大小
      },
      lineStyle: {
        normal: {
          color: '#adffd0',
          width: 1, //尾跡線條寬度
          opacity: 1, //尾跡線條透明度
          curveness: 0.3, //尾跡線條曲直度
        },
      },
      data: convertData(item[1]),
    },
    // 發射點位置漣漪等效果
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //漣漪特效
        period: 4, //動畫時間，值越小速度越快
        brushType: 'stroke', //波紋繪製方式 stroke, fill
        scale: 4, //波紋圓環最大限制，值越大波紋越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //顯示位置
          offset: [5, 0], //偏移設定
          formatter: function (params) {
            //圓環顯示文字
            return params.data.name
          },
          fontSize: 13,
        },
        emphasis: {
          show: true,
        },
      },
      symbol: 'circle',
      symbolSize: function (val: Array<any>) {
        return 5 + val[2] * 5 //圓環大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f8f9f5',
        },
      },
      data: item[1].map(function (dataItem: any) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
        }
      }),
    },
    //被攻擊點
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //漣漪相關
        period: 2,
        brushType: 'stroke',
        scale: 5,
      },
      label: {
        normal: {
          show: true,
          position: 'right',
          // offset:[5, 0],
          color: '#0f0',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        emphasis: {
          show: true,
          color: '#f60',
        },
      },
      itemStyle: {
        normal: {
          color: '#f00',
        },
      },
      symbol: 'circle',
      symbolSize: 10, //圓圈大小
      data: [
        {
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        },
      ],
    },
  )
})

/****************************************************************/
function drawChina() {
  var myChart = echarts.init(chinaMap.value)
  echarts.registerMap('china', chinaJson) //註冊可用的地圖
  var option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根據業務自己擴充要顯示的內容
        var res = ''
        var name = params.name
        var value = params.value[params.seriesIndex + 1]
        res = "<span style='color:#fff;'>" + name + '</span><br/>資料：' + value
        return res
      },
    },
    geo: {
      show: true,
      center: [105.194115019531, 35.582111640625],
      map: 'china',
      roam: true, //是否允許縮放，拖拽
      zoom: 1, //初始化大小
      //縮放大小限制
      scaleLimit: {
        min: 0.1, //最小
        max: 12, //最大
      },
      //設定中心點
      //center: [95.97, 29.71],
      //省份地圖新增背景
      //regions: regions,
      itemStyle: {
        normal: {
          areaColor: '#3352c7',
          color: 'red',
          borderColor: '#5e84fd',
          borderWidth: 2,
        },
      },
      label: {
        color: 'rgba(255,255,255,0.5)',
        show: false,
      },
      //高亮狀態
      emphasis: {
        itemStyle: {
          areaColor: '#ffc601',
        },
        label: {
          show: true,
          color: '#fff',
        },
      },
      z: 10,
    },
    //配置屬性
    series: series,
  }
  myChart.setOption(option)
}
</script>

 

相關文章