echarts绘制热力区块图

最新推荐文章于 2024-07-04 10:44:31 发布

darer49

最新推荐文章于 2024-07-04 10:44:31 发布

阅读量6.7k

点赞数 1

本文链接：https://blog.csdn.net/darer49/article/details/118107386

版权

Echarts 热力图广东地图数据视觉映射

关键词由CSDN通过智能技术生成

先上一个结果图：

其实按理来说这个不算严格意义上的热力图，但是我们还是习惯这么叫，现在的echarts5里面已经没有这个的示例了，但是还是支持这个画法，这还是当年用echart3的时候画的，写下来防止以后换电脑忘了。

<html>
<head>
    <meta charset="utf-8">
    <script src="../js/echarts5.min.js"></script>
	<script src="guangdong.js"></script>
</head>
<body>
    <div id="main" style="width: 1200px;height:900px;"></div>
    <script type="text/javascript">
        var chart = echarts.init(document.getElementById('main'));
        var  option = {
        tooltip: {type:"item"},
        visualMap: {
        min: 900,
        max: 22000,
        left: 'left',
        top: 'bottom',
        text: ['High','Low'],
        seriesIndex: [0],
        inRange: {
            color: ['#e0ffff', '#006edd']
        },
        calculable : true
    },
    series : [
        {
            name: 'categoryA',
            type: 'map',
			roam: true,
            //geoIndex: 0,
            //tooltip: {show: true},
			mapType: '广东',
              itemStyle: {
                 normal: {
                     label: {
                         show: true,
                         formatter:'{b}\n{c}',
                     },
                     borderWidth:0
                 },
                 left:'center',
                 top:'center',
                 emphasis: {
                     label: {
                         show: false
                     },
                     areaColor:'rgb(213, 214, 79)',
                 }
             },
            data:[
                {name: '广州市', value: 7051},
				{name: '深圳市', value: 908},
				{name: '佛山市', value: 4008},
				{name: '东莞市', value: 4465},
				{name: '珠海市', value: 1049},
				{name: '中山市', value: 2127},
				{name: '惠州市', value: 11812},
				{name: '江门市', value: 7846},
				{name: '肇庆市', value: 11780},
				{name: '潮州市', value: 4516},
				{name: '汕头市', value: 3212},
				{name: '汕尾市', value: 4660},
				{name: '揭阳市', value: 6106},
				{name: '茂名市', value: 15255},
				{name: '阳江市', value: 9073},
				{name: '湛江市', value: 20178},
				{name: '河源市', value: 13203},
				{name: '韶关市', value: 13587},
				{name: '梅州市', value: 14244},
				{name: '清远市', value: 21845},
				{name: '云浮市', value: 6075},
				],
        }
    ]
};
	chart.setOption(option)
    </script>
</body>
</html>

echarts文件和离线地图文件需要自行引入。