首页 > 其他 > 详细

echart4.9 实现map地图

时间:2021-04-06 20:12:05      阅读:28      评论:0      收藏:0      [点我收藏+]

1.需要引入echart.js以及chain.js

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>

html:

<div class="chart-box">
   <div id="main" style="width:100%;height:95%;"></div>
</div>

script:

<script type="text/javascript">
    function randomData() {  
        return Math.round(Math.random()*500);  
    }
    var mydata = [  
        {name: 北京,value: 100 },{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() }  
    ];
    var optionMap = {
        backgroundColor: #FFFFFF,  
        title: {  
            text: 全国地图大数据,  
            subtext: ‘‘,  
            x:center  
        },  
        tooltip : {  
            trigger: item  
        },
        
        //左侧小导航图标
        visualMap: {  
            show : true,  
            x: left,  
            y: center,  
            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: [#5475f5, #9feaa5, #85daef,#74e2ca, #e6ac53, #9fb5ea]  
        },
        
        //配置属性
        series: [{
            name: 数据,  
            type: map,  
            mapType: china,   
            roam: true,
            label: {  
                normal: {  
                    show: true  //省份名称  
                },  
                emphasis: {  
                    show: false  
                }  
            },  
            data:mydata  //数据
        }]
    };  
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById(main));

    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);
</script>

 

echart4.9 实现map地图

原文:https://www.cnblogs.com/150536FBB/p/14622733.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!