首页请给出一个echarts 热力图的代码

请给出一个echarts 热力图的代码

时间: 2024-03-02 14:48:38 浏览: 52

热力图源码

本代码简单介绍python热力图如何绘制的，仅供大家分享和参考。

好的，以下是一个简单的 echarts 热力图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 热力图示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { // 设置图表类型为热力图 series: [{ type: 'heatmap', data: [[0, 0, 10], [0, 1, 20], [0, 2, 30], [1, 0, 40], [1, 1, 50], [1, 2, 60]], label: { show: true }, emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 这个热力图的数据是一个二维数组，每个元素表示一个数据点，前两个元素表示该点的横纵坐标，第三个元素表示该点的数值大小。在上述代码中，数据为`[[0, 0, 10], [0, 1, 20], [0, 2, 30], [1, 0, 40], [1, 1, 50], [1, 2, 60]]`，表示一个 3x2 的矩阵，数值从 10 到 60 逐渐增大。

阅读全文