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

最新推荐文章于 2025-07-11 11:50:38 发布

八月的猪猪

最新推荐文章于 2025-07-11 11:50:38 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_42894622/article/details/89475110

个人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: