Vue2项目实践十一：旅游地图

努力赚钱的阳仔

已于 2023-12-05 16:00:21 修改

阅读量427

点赞数 6

分类专栏：通用后台系统文章标签：前端

于 2023-12-05 15:05:06 首次发布

本文链接：https://blog.csdn.net/shieryue_2016/article/details/134807761

版权

通用后台系统专栏收录该内容

13 篇文章 1 订阅

订阅专栏

单点涟漪图
多点散点图
单线图和样式设置
散点图线图

<template>
  <div class="travel-map">
    <div id="main"></div>
  </div>
</template>
<script>
import geoJson from '@/assets/data.json'
export default {
  data() {
    return {}
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById('main'))
    this.$echarts.registerMap('china', geoJson)
    console.log(geoJson)
    let option = {
      backgroundColor: 'rgb(121,145,209)',
      geo: {
        map: 'china',
        aspectScale: 0.75,
        zoom: 1.1,
        itemStyle: {
          normal: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: '#09132c'
                },
                {
                  offset: 1,
                  color: '#274d68'
                }
              ],
              globalCoord: true
            },
            shadowColor: 'rgb(58,115,192)',
            shadowOffsetX: 10,
            shadowOffsetY: 11,
          }

        },
        regions: [{
          name: '南海诸岛',
          itemStyle: {
            opacity: 0.5
          }
        }]
      },
      series: [
        {
          type: 'map',
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6'
              }
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)'
              }
            }
          },
          zoom: 1.1,
          map: 'china',
          itemStyle: {
            normal: {
              backgroundColor: 'rgb(147,1235,148)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(31,54,150)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(89,128,142)'
                  }
                ],
                globalCoord: true
              }
            },
            emphasis: {
              areaColor: 'rgb(46,229,206)',
              borderWidth: 0.1

            }
          },
        },
        //地图散点图配置
        {
          type: 'effectScatter', //散点图
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          SymbolSize: 10,//散点大小
          zlevel: 1,
          data: [
            { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } },
            { value: [110.8062, 31.9208], itemStyle: { color: '#1af456' } },
            { value: [120.8062, 30.9208], itemStyle: { color: '#1af456' } },
            { value: [115.8062, 31.9208], itemStyle: { color: '#1af456' } },
            { value: [125.8062, 46.9208], itemStyle: { color: '#1af456' } },
            { value: [125.8062, 43.9208], itemStyle: { color: '#1af456' } },
            { value: [120.8062, 39.9208], itemStyle: { color: '#1af456' } }
          ],
          rippleEffect: {
            //涟漪特效配置
            period: 15,
            scale: 4,
            brushType: 'fill'
          }

        },
        //线路动画效果设置
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4,
            symbolSize: 7,
            symbol: 'arrow',
            trailLength: 0.4
          },
          lineStype: {
            normal: {
              color: '#1DE9B6',
              width: 1,
              apacity: 0.1,
              curveness: 0.9
            }
          },
          data: [
            { coords: [[118.8062, 31.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
            { coords: [[110.8062, 31.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
            { coords: [[120.8062, 30.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
            { coords: [[125.8062, 46.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
            { coords: [[125.8062, 43.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } },
            { coords: [[120.8062, 39.9208], [115.8062, 31.9208]], lineStype: { color: '#4ab2e5' } }
          ]
        },
      ]
    }
    myChart.setOption(option)
  }
}
</script>
<style>
.travel-map {
  width: 100%;

  #main {
    width: 100%;
    height: 600px;
  }
}
</style>

【拿走即用】Echarts案例网站、150套源码模板、入门视频教程 - 知乎