echart地图与柱形图联动数据渲染

echart地图数据渲染

html

<div id="province"></div>
<div id="company_data"></div>

js

//省地图数据容器
	var province = echarts.init(document.getElementById('province'));
	//柱形图数据容器
	var companyDataA = echarts.init(document.getElementById('company_data'));
	var series = [];
    var series2 = [];
    var list = [];
    var dataA = [];
//省市地图echart
    var provinceChart = {
        tooltip: {
            trigger: 'item',
            textStyle: {
                width: 40,
            },
            formatter: function (params) {
                if (params.data) {
                    return params.data.name + '<br/>' + '企业数：' + params.data.value;  //浮动数据显示
                }
            }
        },
        series: [
            {
                name: [],
                type: 'map',
                mapType: 'hunan',
                label: {
                    show: true
                },
                itemStyle: {
                    normal: {
                        borderColor: '#48C971', //区域边框颜色
                        areaColor: '#EBFFF6', //区域填充颜色
                    },
                    emphasis: { //鼠标事件区块样式
                        areaColor: '#48C971',
                        borderWidth: 0
                    }
                },
                data: []
            }
        ]
    }
    province.setOption(provinceChart);
    $.ajax({
        type: 'post',
        url: "/sdc/jieKou?areaId=" + areaId + "&type=" + 1,
        success: function (r) {
            if (r.code == 0) {
                $("#companyNum").text(r.total);
                $.each(r.data, function (index, item) {
                    list.push(item.areaName);    //挨个取出类别并填入类别数组
                    series.push(item.value);
                    series2.push(item.areaIdA);
                    var oneData = {};
                    var oneData = {
                        id: item.value,
                        name: item.areaName,
                        value: item.value,
                        leave: item.level,
                        areaIdA: item.areaId
                    };
                    dataA.push(oneData);
                });
                companyDataA.setOption({
                    xAxis: {
                        data: list
                    },
                    series: [{
                        data: dataA
                    }]
                });
                province.clear();
                provinceChart.series[0].data = dataA;
                var cityChart = JSON.parse(JSON.stringify(provinceChart));
                province.setOption(cityChart, true);
            }
        }
    });
    
    companyDataA.setOption({
        tooltip: {},
        xAxis: [{
            type: 'category',
            axisLabel: {
                interval: 0,
                rotate: 40,
                formatter: function (value) {
                    return value.length > 5 ? value.substring(0, 5) + '...' : value;
                }
            },
            data: []
        }],
        yAxis: {
            name: '企业数(个)',
        },
        series: [
            {
                name: '各市数据统计',
                type: 'bar',
                barWidth: 12,
                barGap: 0,
                itemStyle: {
                    color: '#48C971',
                },
                label: {
                    show: false,
                },
                data: []
            },
        ]
    });
    //地图点击事件
     var numA = 0;
    province.on('click', function (maparams) {
        if (maparams.data) {
            var cityName = maparams.data.name;
            var id = maparams.data.areaIdA;
            var level = maparams.data.leave;
            if (level == 2) {
                numA = 1;
            } else {
                numA++;
            }
            if (numA < 3) {
                showCity(cityName, id, level);
                return;
            } else {
                window.location = '/supervise/area?areaId=' + id;
            }
        }

    });
    //柱形图点击事件
    
    companyDataA.on('click', function (param) {

        if (param.data) {

            //城市中文名称
            var cityName = param.data.name;
            var id = param.data.areaIdA;
            var level = param.data.leave;
            if (level == 2) {
                numA = 1;
            } else {
                numA++;
            }
            if (numA < 3) {
                showCity(cityName, id, level);
                return;
            } else {
                window.location = '/supervise/area?areaId=' + id;
            }
        }

    })
    // 企业地图json切换
    function showCity(zhName, pyName, obj) {
        // console.log(zhName,pyName,obj);
        var listA = [];
        var dataA2 = [];
        $.ajax({
            type: 'post',
            url: "/sdc/queryRegulatoryStatistic?areaId=" + pyName + "&type=" + 1,
            success: function (r) {
                if (r.code == 0) {
                    $("#companyNum").text(r.total);
                    $.each(r.data, function (index, item) {
                        listA.push(item.areaName);    //挨个取出类别并填入类别数组
                        series.push(item.value);
                        series2.push(item.areaIdA);
                        var oneData = {};
                        var oneData = {
                            id: item.value,
                            name: item.areaName,
                            value: item.value,
                            leave: item.level,
                            areaIdA: item.areaId
                        };
                        dataA2.push(oneData);
                    });
                    companyDataA.setOption({
                        xAxis: {
                            data: listA
                        },
                        series: [{
                            data: dataA2
                        }]
                    });
                    provinceChart.series[0].name = '企业数';
                    provinceChart.series[0].mapType = pyName;
                    provinceChart.series[0].data = dataA2;
                    // //深拷贝，另建provinceChart以免丢失原始provinceChart数据
                    var cityChart = JSON.parse(JSON.stringify(provinceChart));
                    province.setOption(cityChart);
                }
            }
        });
        $.get('/supervise/json/' + pyName + '.json', function (hunanMapData) {
            echarts.registerMap(pyName, hunanMapData);
            //设定中文省份名才能显示相关省份，之后想要设置什么数据，直接设置到provinceChart这里就可以了
            provinceChart.series[0].name = '企业数';
            provinceChart.series[0].mapType = pyName;
            provinceChart.series[0].data = dataA2;
            // //深拷贝，另建provinceChart以免丢失原始provinceChart数据
            var cityChart = JSON.parse(JSON.stringify(provinceChart));
            province.setOption(cityChart);
        })
    }

    showCity('湖南', areaId, 1);//初始化地图