vue-echarts地图使用并增加散点图显示位置

最新推荐文章于 2025-05-20 16:01:59 发布

原创最新推荐文章于 2025-05-20 16:01:59 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts

echarts以及vue-echarts 专栏收录该内容

4 篇文章

订阅专栏

博客介绍了vue-echarts的下载方式，可通过npm或CDN下载。还说明了使用步骤，包括引入vue-echarts及地图文件、编写html和css、设置配置项等。最后提到若替换数据后点不显示，需检查经纬度是否反了。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-echarts可以使用npm或者CDN下载

npm install echarts vue-echarts

<script src=“https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js”>
<script src=“https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2”>

1、引入vue-echarts以及地图文件

// 局部引入vue-echarts
import ECharts from 'vue-echarts';
import 'echarts/map/js/china';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/polar';

2、html

<template>
  <div class="map-container">
    <div class="charts-box">
      <v-chart
        :options="options"
        auto-resize
        @click="chartClick" // 这个方法可以绑定点击地图某个点触发某些变化
        />
    </div>
  </div>
</template>

3、css

.map-container{
  width: 100%;
  height: 100%;
  .charts-box{
    width: 100%;
    height: 100%;
    .echarts {
      width: 100%;
      height: 100%;
    }
  }
}

4、配置项

options: {
    geo: { // 地理坐标系组件，地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集
      show: true,
      map: 'china', // 中国地图，注意import引入中国地图
      roam: false, // 是否开启鼠标缩放和平移漫游
      label: { // 不显示地图上显示的各个地区的名称
        show: false
      },
      zlevel: 1,
      zoom: 1,
      itemStyle: { // 地图样式，此处把地图各区域样式设置为渐变色
        normal: {
          areaColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#E4EEFF' // 0% 处的颜色
              },
              {
                offset: 1, color: '#B0CAFF' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          borderColor: '#fff', // 各省之间的分界线颜色
          shadowColor: 'rgba(58, 120, 214, 0.14)',
          shadowBlur: 30,
          shadowOffsetY: 16,
          shadowOffsetX: 16
        }
      },
      emphasis: {
        label: {
          show: false
        },
        itemStyle: {
          areaColor: '#B0CAFF' // 高亮地块颜色
        }
      }
    },
    series: [{ // 地图上的点，使用散点图配置
      type: 'scatter',
      coordinateSystem: 'geo', // 该系列使用的坐标系
      symbolSize: 12, // 标记大小
      zlevel: 2, // 这个要比地图的大，就是geo里面的zlevel
      label: {
        show: false
      },
      tooltip: { // 提示框样式
        backgroundColor: '#232425',
        borderColor: '#008aff',
        borderWidth: 1,
        extraCssText: 'box-shadow: 0 0 5px #008aff;'
      },
      itemStyle: {
        color: (params) => { // 此处根据数据的不同情况显示不同颜色的标记
          let color = '#16D0A6'; // 默认颜色
          if (params.data.value && params.data.value[2] === 1) {
            color = '#FF6C6C';
          } else if (params.data.value && params.data.value[2] === 2) {
          	color = '#FFB36C';
          }
          return color;
        }
      },
      data: [
        { name:'惠州', value:[114.600278, 23.048611, 1, '惠州'] }, 
        { name:'遵义', value:[107.246111, 27.811111, 2, '遵义'] }, 
        { name:'大连', value:[121.539014, 38.965644, 2, '大连'] }, 
        { name:'三亚', value:[109.412272, 18.302925, 1, '三亚'] }, 
        { name:'福州', value:[119.663472, 25.934861, 0, '福州'] }
      ],
      emphasis: {
        label: {
          show: true,
          position: 'right',
          distance: 20, // 文字距离小图标的距离
          color: '#5B6479',
          fontSize: 14,
          lineHeight: 20,
          backgroundColor: '#fff',
          padding: [8, 10, 4],
          // 阴影
          shadowColor: '#C8D8FF',
          shadowBlur: 4,
          formatter: (params) => { // 根据需要配置提示内容
            let str = params.name;
            if (params.value[2] === 1) {
              str += '\n等于1';
            } else if (params.value[2] === 2) {
              str += '\n等于2';
            } else {
              str += '\n等于0';
            }
            return str;
          }
        },
        itemStyle: {
          areaColor: '#B0CAFF' // 高亮地块颜色
        }
      }
    }]
  }