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)'
                }
            }
        }]
    })

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

 

原文地址：https://blog.csdn.net/Jiaberrr/article/details/142701437

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！