Echart.js China.js制作中国热力图

最新推荐文章于 2024-08-08 11:50:46 发布

八月的猪猪

最新推荐文章于 2024-08-08 11:50:46 发布

阅读量4.9k

点赞数 1

分类专栏：前端 H5 文章标签： Echart china 中国地图热力图中国版

本文链接：https://blog.csdn.net/qq_42894622/article/details/89475110

版权

前端同时被 2 个专栏收录

123 篇文章 3 订阅

订阅专栏

12 篇文章 1 订阅

订阅专栏

个人blog，欢迎关注加收藏

Echart.js 和 China.js 制作中国热力图

Echart.js 和 China.js 可以去官方下载

项目：H5绣红旗

index.html

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.min.js"></script>
<script src="./static/js/china.js"></script>

组件.vue：调用creatThermodynamicChart函数即可

 //创造热力图
    creatThermodynamicChart(){
        let _this = this;
        var dataMap =[  //热力图的数据
            {name: '北京',value: 500 },{name: '天津',value: 400 },  
            {name: '上海',value: 500 },{name: '重庆',value: 350 },  
            {name: '河北',value: 100 },{name: '河南',value: 200 },  
            {name: '云南',value: 180 },{name: '辽宁',value: 100 },  
            {name: '黑龙江',value: 100 },{name: '湖南',value: 300 },  
            {name: '安徽',value: 330 },{name: '山东',value: 200 },  
            {name: '新疆',value: 10 },{name: '江苏',value: 340 },  
            {name: '浙江',value: 400 },{name: '江西',value: 360 },  
            {name: '湖北',value: 300 },{name: '广西',value: 400 },  
            {name: '甘肃',value: 100 },{name: '山西',value: 100 },  
            {name: '内蒙古',value: 100 },{name: '陕西',value: 100 },  
            {name: '吉林',value: 100 },{name: '福建',value: 350 },  
            {name: '贵州',value: 100 },{name: '广东',value: 500 },  
            {name: '青海',value: 100 },{name: '西藏',value: 100 },  
            {name: '四川',value: 300 },{name: '宁夏',value: 100 },  
            {name: '海南',value: 100 },{name: '台湾',value: 100 },  
            {name: '香港',value: 300 },{name: '澳门',value: 200 },
            {name: '南海诸岛',value: 100 }
        ];
        // 需要在页面上直接标记出来的城市    
        var specialMap = [];
        // 对dataMap进行处理，使其可以直接在页面上展示
        for (var i = 0; i < specialMap.length; i++) {
            for (var j = 0; j < dataMap.length; j++) {
                if (specialMap[i] == dataMap[j].name) {
                    dataMap[j].selected = true;
                    break;
                }
    
            }
        }
        //Echart的配置选项
        var option = {
            tooltip: {//悬浮时显示
                formatter: function (params) {
                    var info = '<p style="font-size:18px">' + params.name + '</p>'
                    // var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">这里可以写一些，想展示在页面上的别的信息</p>'
                    return info;
                },
                backgroundColor: "#ff7f50",//提示标签背景颜色
                textStyle: { color: "#fff" } //提示标签字体颜色
            },
            //左侧小导航图标
            visualMap: {  
                show : true,  
                x: 'left',  
                // y: 'center',
                bottom:"0%",                              //组件离容器下侧的距离,'20%'
                itemWidth:5,                           //图形的宽度，即长条的宽度。
                itemHeight:5,                         //图形的高度，即长条的高度。            
                textGap:5,                              //两端文字主体之间的距离，单位为px
                textStyle:{                             //文本样式
                                fontSize: 10,
                        },              
                itemGap:4,                          //每两个图元之间的间隔距离，单位为px        
                splitList: [   
                    {start: 500, end:600},{start: 400, end: 500},  
                    {start: 300, end: 400},{start: 200, end: 300},  
                    {start: 100, end: 200},{start: 0, end: 100},  
                ],  
                color: ['#663366', '#990033', '#ff0033','#99cccc', '#cccc00', '#ffcc99']  
            }, 
            series: [
                {
                    name: '中国',
                    type: 'map',
                    zoom: 1.2,   //这里是关键，一定要放在 series中，地图缩放比例的配置
                    mapType: 'china',
                    
                    label: {//地图中的文字
                        normal: {//正常显示
                            show: false,//显示省份标签
                            textStyle: {
                                fontSize: 10,
                                color: '#6c6a6a'
                            }
                        },
                        // emphasis: {//悬浮时显示
                        //     show: true,//对应的鼠标悬浮效果
                        // }
                    },
        
                    data: dataMap
                }
            ]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    }