echarts3 实现中国地图

最新推荐文章于 2025-03-02 11:46:58 发布

脑瓜不疼

最新推荐文章于 2025-03-02 11:46:58 发布

阅读量8.4k

点赞数 1

分类专栏：大前端文章标签： echarts 中国地图

本文链接：https://blog.csdn.net/super__code/article/details/82772864

版权

大前端专栏收录该内容

88 篇文章

订阅专栏

echarts3 实现中国地图
china.js下载地址（及各省市） https://download.csdn.net/download/super__code/10676410

效果图在这里插入图片描述
直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入  echarts-->
    <script src="assets/plugins/echarts3/echarts3.min.js"></script>
    <!--引入 china.js  echarts3不在支持内置地图文件，需要另外引入-->
    <script src="assets/plugins/echarts3/js/china.js"></script>

</head>
<body>
<div id="chinaMap" style="width: 500px;height: 500px;"></div>
</body>

<script>
   /**
    * 基于准备好的dom，初始化echarts实例
    * */
    var myChart = echarts.init(document.getElementById("chinaMap"));
    /**
     *  指定图表的配置项和数据
     * */
    var option= {
        backgroundColor: '#ccc',  //设置背景颜色
        title: {
            show:true,
            text: '中国地图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show : true,
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 10, end:20},
                {start: 6, end: 10},
                {start: 0, end: 6},
            ],
            color: ['#a5ad00', '#8bdd00', '#2cd493']
        },
        //配置属性
        series: [{
            name: '数量',
            type: 'map',
            mapType: 'china',
            roam: false,
            zoom:1.2,
            label: {
                normal: {
                    show: true ,
                },
                emphasis: {
                    show: false
                }
            },
            data:[{name: '北京',value:randomData() },{name: '天津',value: randomData() },
                {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
                {name: '河北',value: randomData() },{name: '河南',value: randomData() },
                {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
                {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
                {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
                {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
                {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
                {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
                {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
                {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
                {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
                {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
                {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
                {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
                {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },{name: '澳门',value: randomData() }]
        }]
    };

    /**
     *  使用刚指定的配置项和数据显示图表。
     *  */
    myChart.setOption(option);

    //获取随机数
    function randomData() {
        return Math.round(Math.random()*(12-1)+1)
    }

</script>
</html>