一个基于中国地图china.js实现的热力图、动态箭头扩散图,是echarts的一个插件

image.pngimage.png

热力图代码(动态的在附件):

<!DOCTYPE html>
<html style="height: 100%">
<head>
  <meta charset="UTF-8">
  <title>中国地图热力图</title>
  <!-- 引入 ECharts -->
  <script src="echarts.js"></script>
  <!-- 引入中国地图扩展 -->
  <script src="china.js"></script>
</head>
<body style="height: 100%; margin: 0;">
  <div id="map" style="height: 100%"></div>

<script>
    // 初始化 ECharts
    var chart = echarts.init(document.getElementById('map'));

    // 示例数据:每个省份的数值
    var data = [
        { name: '北京', value: 120 },
        { name: '上海', value: 200 },
        { name: '广东', value: 300 },
        { name: '江苏', value: 180 },
        { name: '浙江', value: 250 },
        { name: '四川', value: 90 },
        { name: '湖北', value: 130 },
        { name: '湖南', value: 110 },
        { name: '山东', value: 210 },
        { name: '河南', value: 160 }
    ];

    // 配置项
    var option = {
        title: {
            text: '全国热力图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: 'left',
            inRange: {
                color: ['#ffffff', '#f93205']
            },
            text: ['高值', '低值'],
            calculable: true
        },
        geo: {
            map: 'china',
            type: 'map',
            roam: true,
            label: {
                show: true,
                color: '#fff'
            },
            itemStyle: {
                areaColor: '#2a333d',
                borderColor: '#111'
            }
        },
        series: [{
            name: '数值',
            type: 'map',
            map: 'china',
            roam: false,
            label: {
                show: true
            },
            data: data,
        }]
    };

    // 使用配置项渲染图表
    chart.setOption(option);
</script>
</body>
</html>



附件(demo是热力图、line是动态图):

map.zip


评论/留言