热力图前端功能实现

怒放的生命1991

已于 2023-02-06 14:57:22 修改

阅读量324

点赞数

分类专栏：前端实现功能面试文章标签：前端 echarts javascript Powered by 金山文档

于 2023-02-06 14:43:14 首次发布

本文链接：https://blog.csdn.net/qq_34507902/article/details/128901423

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

实现功能面试

4 篇文章 0 订阅

订阅专栏

该代码示例展示了如何利用ECharts库在HTML页面中生成一个热力图。数据是随机生成的，图表类型设定为heatmap，x轴和y轴为category类型，使用了视觉映射进行颜色渲染，以展示不同区域的强度或频率。

摘要由CSDN通过智能技术生成

直接上代码吧：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HeatMap</title>
</head>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<body>
<div id="main" style="width: 1600px;height:500px;"></div>
</body>

<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let xData = [];
let yData = [];
function setDataFn(){
    let arr=[];
    for(let i=0;i<=40;i++){
        for(let j=0;j<=40;j++){
            arr.push([i,j,Math.random()*j/40*10]);
        }
        xData.push(i);
    }
    for (let j = 0; j <=40; j++) {
    yData.push(j);
  }
    return arr
}
let data = setDataFn();
console.log(data);
option = {
title: {
      text: '热力图数据加载示例'
    },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: xData
  },
  yAxis: {
    type: 'category',
    data: yData
  },
  visualMap: {
    min: 0,
    max: 10,
    left: 'center',
    orient: 'horizontal',
    calculable: true,
    realtime: false,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  series: [
    {
      name: 'Gaussian',
      type: 'heatmap',
      data: data,
      emphasis: {
        itemStyle: {
          borderColor: '#333',
          borderWidth: 1
        }
      },
      progressive: 1000,
      animation: false
    }
  ]
};
option && myChart.setOption(option);


</script>

</html>

效果如图：