Skip to content

Lines 路径图

基本用法

vue
<script setup>
    import { ref } from 'vue'

    // 地图数据
    const data = {
        // ...
    }
    const linesData = [
        {
            coords: [
                [109.47172429, 34.52704767],
                [107.25144393, 34.36920906],
            ],
        },
        { 
            coords:[
                [109.93874879, 33.88119694],
                [108.94900529, 34.90823005]
            ]
        }
    ]
    echarts.registerMap('shanxi', {geoJSON: data});
</script>
<template>
  <VueEcharts style="width:100%;height:300px;" backgroundColor="#111" :progressive="2000">
    <Lines :data='linesData'>
      <LineStyle color="orange" :width="0.5" :opacity="0.3"  />
    </Lines>
    <Geo map="shanxi" roam :center="[108.92813841, 34.35656909]">
      <ItemStyle color="transparent" borderColor="rgba(255,255,255,0.1)" :borderWidth="1" />
    </Geo>
  </VueEcharts>
</template>