首页echarts租房数据画热力图

echarts租房数据画热力图

时间: 2023-11-24 22:36:04 浏览: 59

这是一个基于echarts的租房数据热力图展示示例，代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts租房数据热力图</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 800px;height: 600px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 模拟租房数据 var data = [ {name: '北京', value: 100}, {name: '上海', value: 80}, {name: '广州', value: 70}, {name: '深圳', value: 60}, {name: '杭州', value: 50}, {name: '成都', value: 40}, {name: '武汉', value: 30}, {name: '重庆', value: 20}, {name: '南京', value: 10} ]; // echarts配置 var option = { // 设置地图类型 series: [{ type: 'map', mapType: 'china', roam: false, label: { show: true }, // 热力图数据 data: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 运行结果如下： ![热力图](https://img-blog.csdnimg.cn/20211105160214354.png)

阅读全文