Vue中使用ECharts实现热力图的详细教程

在数据可视化领域，热力图是一种非常直观的表现形式，它通过颜色深浅来展示数据分布情况。在Vue项目中，我们可以使用ECharts这一强大的图表库来实现热力图。下面我将详细介绍如何在Vue中使用ECharts实现热力图。效果如下图：

一、准备工作

1、安装ECharts

在项目根目录下，运行以下命令安装ECharts：

npm install echarts --save

2、下载所需地区的JSON文件 并放在静态资源文件夹下

下载geoJson的途径网上一抓一大把，也可以参照我之前的文章https://blog.csdn.net/Jiaberrr/article/details/141939259

 

二、实现热力图

1、引入ECharts和geoJSON

在Vue组件中，首先需要引入ECharts和地图JSON。在<script>标签中添加以下代码：

import * as echarts from 'echarts';
import geoJson from './static/json/mapJson.json'

2、创建热力图容器

在<template>标签中，添加一个用于展示热力图的div容器：

<div ref="heatmap" style="width: 600px; height: 400px;"></div>

3、初始化ECharts实例

在mounted钩子函数中，初始化ECharts实例并设置热力图配置项：

mounted() {echarts.registerMap('GD', geoJson);const myChart = echarts.init(this.$refs.heatmap);const option = {// 热力图配置项};myChart.setOption(option);
}

4、配置热力图

以下是效果图中的热力图的基本配置项，您可以根据实际需求进行调整：

   let data = [['116.424697', '39.927967', 1334],// '东城'['116.358141', '39.913919', 9334],// '西城'['116.765487', '40.136573', 834],// '朝阳'['116.290679', '39.857184', 2334],// '丰台'['116.17672', '39.949198', 6734],// '石景山'['116.177807', '40.062966', 1234],// '海淀'['115.905234', '40.010063', 2634],// '门头沟'['115.941902', '39.708825', 1334],// '房山'['116.747351', '39.814339', 1178],// '通州'['116.737316', '40.137897', 634],// '顺义'['116.226118', '40.225311', 9334],// '昌平'['116.402095', '39.655493', 2334],// '大兴'['116.621138', '40.432762', 8334],// '怀柔'['117.117604', '40.192158', 4534],// '平谷'['117.065719', '40.500122', 724],// '密云'['116.016705', '40.507607', 334]// '延庆'];let areaData = [];data.map(item => { // 扩大热力图效果areaData.push(...new Array(3).fill(item));});let mapMax = Math.max(...data.map(item => item[2]));let mapMin = Math.min(...data.map(item => item[2]));myChart.setOption(option = {backgroundColor: '#ccc',tooltip: {show: false,trigger: 'item',axisPointer: {type: 'shadow'}},visualMap: {bottom: 20,left: 10,show: true,color: ['#ff4601', '#fffc00', '#87cffa'],min: mapMin,max: mapMax,calculable: true,textStyle: {color: '#fff',fontSize: 12}},grid: {height: '100%',width: '100%'},geo: {map: 'GD',label: {show: true},top: 'center',left: '100',roam: true,width: '90%',height: '95%',zoom: 0.9,label: {normal: {show: true,color: '#fff'},emphasis: {color: '#fff'}},itemStyle: {normal: {areaColor: '#76b1ff',borderColor: '#eee',shadowColor: '#76b1ff',shadowBlur: 10,borderWidth: 1},emphasis: {// 鼠标移入颜色areaColor: '#409EFF',borderWidth: 0}}},series: [{mapType: 'GD',top: 'center',left: 'center',width: '65%',height: '95%',name: 'AQI',type: 'heatmap',coordinateSystem: 'geo',blurSize: 40,data: areaData,// 鼠标移入emphasis: {show: false,itemStyle: {areaColor: 'rgb(255,255,0,1)'}}}]})

您可以根据实际需求调整热力图的配置项，以达到更好的数据可视化效果。希望本文对您有所帮助！