Echarts之地图下钻

最近做从中国地图下钻的省市地图

首先引入

 <script src="../Scripts/echarts/build/dist/echarts.js" type="text/javascript"></script>
    <script src="../Scripts/Charts.js" type="text/javascript"></script>
接着写js文件

有一个问题就是我想实现点击中国地图,下钻到省市地图,点击省市地图,对应的textbox中出现从后台调取数据,现在就是我点击中国地图左边也会出现数据不造怎么解决了。头疼。

var bar_data_ChinaMap; //第四个图表的数据源

$(function () {
    getfirstchartdata();
    document.getElementById("ChinaMap").style.height = window.screen.height / 10*5 - 20 + "px";//设置显示中国地图的图层高度和宽度
    document.getElementById("ChinaMap").style.width = window.screen.width / 4 * 2 - 20 + "px";
    require.config({
        paths: {
            echarts: '../Scripts/echarts/build/dist'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
                'echarts/chart/bar',
                'echarts/chart/map'
            ], DrawCharts

            );
    function DrawCharts(ec) {
    
        Drawbar_ChinaMapChart(ec);//中国地图
    }

        function Drawbar_ChinaMapChart(ec)//中国地图
        {
            var myChart = ec.init(document.getElementById('ChinaMap'));
            optionMap = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },

                series: [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode: 'single',//multiple多选
                        mapLocation: {
                            x: 'left',
                            y: 'top',
                            width: '35%'
                        },
                        roam: false,
                        itemStyle: {
                            normal: {
                                label: { show: false },
                                areaStyle: { color: 'rgba(128, 128, 128, 0.01)' },//区块颜色
                                color: 'rgba(128, 128, 128, 0.01)',//颜色
                                borderColor: '#006699'//区块的边框颜色
                            },
                            emphasis: {
                                label: {
                                    show: true

                                }, areaStyle: { color: '#FFA500' }
                            }
                        },
                        data: [
                            { name: '北京', selected: false },
                            { name: '天津', selected: false },
                            { name: '上海', selected: false },
                            { name: '重庆', selected: false },
                            { name: '河北', selected: false },
                            { name: '河南', selected: false },
                            { name: '云南', selected: false },
                            { name: '辽宁', selected: false },
                            { name: '黑龙江', selected: false },
                            { name: '湖南', selected: false },
                            { name: '安徽', selected: false },
                            { name: '山东', selected: false },
                            { name: '新疆', selected: false },
                            { name: '江苏', selected: false },
                            { name: '浙江', selected: false },
                            { name: '江西', selected: false },
                            { name: '湖北', selected: false },
                            { name: '广西', selected: false },
                            { name: '甘肃', selected: false },
                            { name: '山西', selected: false },
                            { name: '内蒙古', selected: false },
                            { name: '陕西', selected: false },
                            { name: '吉林', selected: false },
                            { name: '福建', selected: false },
                            { name: '贵州', selected: false },
                            { name: '广东', selected: false },
                            { name: '青海', selected: false },
                            { name: '西藏', selected: false },
                            { name: '四川', selected: false },
                            { name: '宁夏', selected: false },
                            { name: '海南', selected: false },
                            { name: '台湾', selected: false },
                            { name: '香港', selected: false },
                            { name: '澳门', selected: false }
                        ]
                    }
                ],
                animation: false
            };
            var ecConfig = require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
                var selected = param.selected;
                var selectedProvince;
                var name;
                for (var i = 0, l = optionMap.series[0].data.length; i < l; i++) {
                    name = optionMap.series[0].data[i].name;
                    optionMap.series[0].data[i].selected = selected[name];
                    if (selected[name]) {
                        selectedProvince = name;
                    }
                }
                if (typeof selectedProvince == 'undefined') {
                    optionMap.series.splice(1);
                    optionMap.legend = null;
                    optionMap.dataRange = null;
                    myChart.setOption(optionMap, true);
                    return;
                }
                optionMap.series[1] = {
                    name: '随机数据',
                    type: 'map',
                    mapType: selectedProvince,
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    mapLocation: {
                        x: '35%',
                        width: '50%'

                    },
                    roam: false,
                    data: [


                    ]
                };
                myChart.setOption(optionMap, true);
            })
            myChart.on(ecConfig.EVENT.CLICK, eConsole);//区块点击事件
            function eConsole(param) {
                //alert(param.name);
                Drawbar_LocationChart(ec, param.name);
            }
            myChart.setOption(optionMap);
        }

    function Drawbar_LocationChart(ec, name)//现场信息
    {
        getLocationdata(name);
    }

   
    function getLocationdata(name)//获取现场数据
    {
      
        $.ajax({
            async: false, //异步执行   
            type: "POST",
            url: '../data_ashx/chartData.ashx',
            data: { "action": "getLocationdata", "name": name },
           // data: { "action": "getLocationdata"},
            dataType: "json",
            success: function (data) {
              
                setLocationData(data.rows);
            }
        });
    }

    
});


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值