更新记录

2.8（2024-07-11） 下载此版本

组件优化

2.4（2024-05-26） 下载此版本

组件优化

6.4（2024-05-16） 下载此版本

组件优化

平台兼容性

cc-HeatMap中国

广东省热力地图使用方法

地图数据链接： http://datav.aliyun.com/portal/school/atlas/area_selector

我的技术公众号(私信可加前端技术交流群)

群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼

<template>
    <view>
        <div class="map">
            <div id="myEchart" class="map-echart"></div>
        </div>

        <div class="map">
            <div id="myEchartChina" class="map-echart"></div>
        </div>
    </view>
</template>

<script>
    import echarts from '../../static/h5/echarts.min.js'

    export default {
        mounted() {
            this.getMapData();
        },
        props: {},
        data() {
            return {
                searchForm: {
                    ip: "",
                    moduleType: 0,
                    moduleName: "",
                },
                myChart: null,
            };
        },
        methods: {
            getMapData() {
                this.loadMap();
                this.loadMapChina();

            },
            loadMap() {
                this.myChart = echarts.init(document.getElementById("myEchart")); // 初始化

                // 热力图数据地址 http://datav.aliyun.com/portal/school/atlas/area_selector
                const uploadedDataURL = require(`../../static/guangdong.json`);
                echarts.registerMap("广东", uploadedDataURL);

                var option = {
                    title: {
                        text: "广东热力图", //表头
                        x: "center",
                    },
                    // dataRange: {
                    //   min: 0,
                    //   max: 1000,
                    //   text: ["高", "低"],
                    //   realtime: true,
                    //   calculable: true,
                    //   color: ["darkred" , "red", "orangered", "yellow"],//颜色
                    // },
                    visualMap: {
                        min: 800,
                        max: 50000,
                        text: ['高', '低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        }
                    },
                    series: [{
                        name: "热力图",
                        type: "map",
                        map: "广东",
                        label: {
                            color: '#333',
                            fontSize: 9,
                            show: true
                        },
                        mapLocation: {
                            y: 0,
                        },
                        itemSytle: {
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                        },
                        data: [
                            {
                                name: "珠海市",
                                value: 500
                            },
                            {
                                name: "东莞市",
                                value: 256
                            },
                            {
                                name: "佛山市",
                                value: 434
                            },
                            {
                                name: "中山市",
                                value: 343
                            },
                            {
                                name: "惠州市",
                                value: 100
                            },
                            {
                                name: "汕头市",
                                value: 460
                            },
                            {
                                name: "江门市",
                                value: 40
                            },
                            {
                                name: "湛江市",
                                value: 30
                            },
                            {
                                name: "肇庆市",
                                value: 250
                            },
                            {
                                name: "梅州市",
                                value: 350
                            },
                            {
                                name: "茂名市",
                                value: 230
                            },
                            {
                                name: "阳江市",
                                value: 330
                            },
                            {
                                name: "清远市",
                                value: 450
                            },
                            {
                                name: "韶关市",
                                value: 120
                            },
                            {
                                name: "揭阳市",
                                value: 3560
                            },
                            {
                                name: "汕尾市",
                                value: 390
                            },
                            {
                                name: "潮州市",
                                value: 210
                            },
                            {
                                name: "河源市",
                                value: 560
                            },
                            {
                                name: "云浮市",
                                value: 240
                            }
                        ],
                    }, ],
                };

                this.myChart.setOption(option);
            },

            loadMapChina() {
                this.myChart = echarts.init(document.getElementById("myEchartChina")); // 初始化
                const uploadedDataURL = require(`../../static/china.json`);
                echarts.registerMap("中国", uploadedDataURL);

                var optionTwo = {
                    title: {
                        text: "中国热力图", //表头
                        x: "center",
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (p / km2)'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {
                                readOnly: false
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], //取值范围的文字
                        inRange: {
                            color: ['#e0ffff', '#006edd'] //取值范围的颜色
                        },
                        show: true //图注
                    },
                    geo: {
                        map: 'china',
                        roam: false, //不开启缩放和平移
                        zoom: 1.23, //视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize: '10',
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: '#F3B329', //鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series: [{
                        name: "中国热力图",
                        type: "map",
                        map: "中国",
                        label: {
                            color: '#333',
                            fontSize: 8,
                            show: true
                        },
                        itemSytle: {
                            emphasis: {
                                label: {
                                    show: false
                                }
                            },
                        },
                        geoIndex: 0,
                        data: [{
                                name: "湖南省",
                                value: 700
                            },
                            {
                                name: "广东省",
                                value: 1600
                            },
                            {
                                name: "湖北省",
                                value: 500
                            },
                            {
                                name: "广西省",
                                value: 256
                            },
                            {
                                name: "海南省",
                                value: 34
                            },

                        ]
                    }]
                };

                var option = {
                    title: {
                        text: "中国热力图", //表头
                        x: "center",
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (p / km2)'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {
                                readOnly: false
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    // dataRange: {
                    //   min: 0,
                    //   max: 3000,
                    //   text: ["高", "低"],
                    //   realtime: true,
                    //   calculable: true,
                    //   color: ["darkred" , "red", "orangered", "yellow"],//颜色
                    // },
                    visualMap: {
                        min: 800,
                        max: 50000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        }
                    },
                    series: [{
                        name: "中国热力图",
                        type: "map",
                        map: "中国",
                        label: {
                            color: '#333',
                            fontSize: 8,
                            show: true
                        },
                        itemSytle: {
                            emphasis: {
                                label: {
                                    show: false
                                }
                            },
                        },
                        data: [{
                                name: "湖南省",
                                value: 700
                            },
                            {
                                name: "广东省",
                                value: 1600
                            },
                            {
                                name: "湖北省",
                                value: 500
                            },
                            {
                                name: "广西省",
                                value: 256
                            },
                            {
                                name: "海南省",
                                value: 34
                            },

                        ],
                    }, ],
                };

                this.myChart.setOption(option);
            },
        },
    };
</script>

<style lang="less" scoped>
    .map {
        width: 100vw;
        height: 100vw;
    }

    .map-echart {
        height: 100vw;
        width: 100vw;
    }
</style>