thinkphp+echarts生成地图数据

thinkphp+echarts生成地图数据

今天记录下实现地图的动态数据加载功能。

具体代码如下：

HTML代码:

<div id="main" style="width: 100%;height:550px;"></div>

JavaScript代码:

 <script src="__PUBLIC__/echarts/dist/echarts.min.js"></script>
 <script src="__PUBLIC__/echarts/china1.js"></script>
<!--/_footer 作为公共模版分离出去-->

<script type="text/javascript">
var optionMap = {  
        backgroundColor: '#FFFFFF',  
        title: {  
            text: '全国各省市高考录取人数地图展示',  
            subtext: '',  
            x:'center'  
        },  
        tooltip : {  
            trigger: 'item'  
        },  
        
        //左侧小导航图标
        visualMap: {  
            show : true,  
            x: 'left',  
            y: 'center',  
            splitList: [   
                {start: 200, end:250},
                {start: 150, end: 200},  
                {start: 100, end: 150},
                {start: 50, end: 100},  
                {start: 10, end: 50},
                {start: 1, end: 10},  
            ],  
            color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
        },  
        
        //配置属性
        series: [{  
            name: '录取人数',  
            type: 'map',  
            mapType: 'china',   
            roam: true,  
            label: {  
                normal: {  
                    show: true  //省份名称  
                },  
                emphasis: {  
                    show: false  
                }  
            },  
            data:[]  //数据
        }]  
    };  
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);

    $('#tongji').click(function() {
    nianji = $("#nianji").find("option:selected").val();
    cengci = $("#cengci").find("option:selected").val();
    $.post("{:U('dt')}", { "nianji": nianji,"cengci":cengci },function(info){
        //console.log(info);
        myChart.setOption({
            series:[{
                data:info,
            }],
        })
    }, "json");
});
</script> 

后端代码：

public function dt() {    
        if (!empty($_POST)) {
            $nianji = I('nianji');
            $where['nianji'] = $nianji;
            $cengci = I('cengci');
            if ($cengci) {
                $where['cengci'] = $cengci;
            }
            $count = M('Zhaosheng');
            $data = $count->field('lys as name,count(id) as value')->where($where)->order('lys asc')->group('lys')->select();
            //show_bug($data);exit;
            $this->ajaxReturn($data);
        }       
        $this->display();
    }

生成的地图效果如下：