当前位置：首页 > VUE

vue实现某个省散点图

2026-01-20 18:55:32VUE

使用 Vue 实现省级散点图

准备工作

确保项目中已安装 ECharts 和 Vue-ECharts。可以通过以下命令安装：

npm install echarts vue-echarts

引入 ECharts 和 Vue-ECharts

在 Vue 组件中引入必要的库和组件：

import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { ScatterChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent
]);

准备数据

假设需要展示某个省的城市人口与 GDP 的散点图，数据格式如下：

const scatterData = [
  { name: '城市A', value: [120, 50, 800] }, // [经度, 纬度, GDP]
  { name: '城市B', value: [121, 51, 1200] },
  { name: '城市C', value: [122, 52, 600] }
];

配置散点图选项

在 Vue 组件的 data 或 setup 中配置 ECharts 选项：

const option = {
  title: {
    text: 'XX省城市GDP分布散点图'
  },
  tooltip: {
    formatter: params => {
      return `${params.data.name}<br/>GDP: ${params.data.value[2]}亿元`;
    }
  },
  visualMap: {
    min: 0,
    max: 2000,
    dimension: 2,
    orient: 'vertical',
    right: 10,
    top: 'center',
    text: ['高', '低'],
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  grid: {
    left: '3%',
    right: '7%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    name: '经度',
    nameLocation: 'middle',
    nameGap: 30
  },
  yAxis: {
    name: '纬度',
    nameLocation: 'middle',
    nameGap: 30
  },
  series: [{
    name: '城市',
    type: 'scatter',
    symbolSize: val => {
      return Math.sqrt(val[2]) * 2;
    },
    data: scatterData.map(item => ({
      name: item.name,
      value: item.value,
      symbolSize: Math.sqrt(item.value[2]) * 2
    })),
    label: {
      show: true,
      formatter: params => {
        return params.data.name;
      },
      position: 'top'
    },
    emphasis: {
      label: {
        show: true
      }
    }
  }]
};

在模板中使用组件

在 Vue 组件的模板部分添加图表组件：

<template>
  <div class="chart-container">
    <v-chart class="chart" :option="option" autoresize />
  </div>
</template>

<style scoped>
.chart-container {
  width: 100%;
  height: 600px;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

自定义散点样式

可以通过 itemStyle 自定义散点的颜色和样式：

series: [{
  // ...
  itemStyle: {
    color: params => {
      const val = params.data.value[2];
      if (val > 1000) return '#d94e5d';
      if (val > 500) return '#eac736';
      return '#50a3ba';
    }
  }
}]

添加地图背景

如果需要在地图上显示散点，可以引入中国地图：

import china from 'echarts/map/json/china.json';
echarts.registerMap('china', china);

// 在option中添加geo配置
geo: {
  map: 'china',
  roam: true,
  zoom: 1.5,
  center: [105, 36], // 调整中心点位置
  itemStyle: {
    areaColor: '#f5f5f5',
    borderColor: '#ccc'
  }
}

响应式调整

监听窗口大小变化，确保图表自适应：

mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    if (this.chart) {
      this.chart.resize();
    }
  }
}

vue实现某个省散点图