Echarts 地图和柱状图联动

项目需求：

 点击新乡市地图上的指定县，在柱状图上展示该县业绩季度统计图；

成果展示：

项目逻辑：

1. 引入jquery.min.js、echars.js文件，存放在/js/目录下；

2. 下载指定城市的地图文件（json格式），存放在/map/json/目录下，；

3. 初始化地图、柱状图；整理数据，点击地图上指定县联动柱状图；

代码展示：

<!--css根据自己需求布局-->
 <div id="map-wrap" style="height: 500px;width: 600px;display: inline-block;float: left;">
        <!-- 存放地图 -->
  </div>
 <div id="main" style="width: 600px;height:400px;display: inline-block;float: left;margin: 20px 0px 0px 100px;">
     <!-- 柱状图 -->
</div>

  <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main')); //初始化柱状图

        $.get('map/json/xinxiang.json', function (xinxiangJson) {
            echarts.registerMap('新乡市', xinxiangJson); // 注册地图
            var mapChart_map = echarts.init(document.getElementById('map-wrap')); //初始化地图
            var myData = []; //地图data数据
            var series_zztdata = []; //柱状图data数据
            $.each(xinxiangJson['features'], function(i) {
                var name = xinxiangJson['features'][i]['properties']['name']; 
                var jiduone = parseInt(Math.random() * (200 - 0 + 1) + 0); //季度值取随机数
                var jidutwo = parseInt(Math.random() * (200 - 0 + 1) + 0);
                var jiduthree = parseInt(Math.random() * (200 - 0 + 1) + 0);
                var jidufour = parseInt(Math.random() * (200 - 0 + 1) + 0);
                var value = jiduone+jidutwo+jiduthree+jidufour;
                myData[i] = {name:name,value:value};
                series_zztdata[i] = {name:name,type:'bar',barWidth:30,itemStyle:{color:'red',barBorderRadius:[10,10,0,0]},data:[jiduone,jidutwo,jiduthree,jidufour],label:{show:true}};
            });

            // 柱状图配置
            var option = {
                title: {
                    text: '新乡市业绩季度统计表 （2020）',
                    subtext: '新乡市'+series_zztdata[0]['name'],
                    sublink: 'https://www.baidu.com/'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a0}<br/>{b}<br/>{c} (万/季度)'
                },
                legend: {
                    data:['季度业绩']
                },
                xAxis: {
                    data: ["第一季度","第二季度","第三季度","第四季度"]
                },
                yAxis: {
                    type: 'value',
                    scale: true,
                    max: 200,
                    min: 0
                },
                series: series_zztdata[0]
            };
            // 柱状图初始化第一个城市的季度数据
            myChart.setOption(option);

            var option_map = {
                title: {
                    text: '新乡市年度业绩统计表 （2020）',
                    subtext: '业绩额度来自分地区上报',
                    sublink: 'https://www.baidu.com/'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (万/年)'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    type: 'continuous', // 连续型
                    min: 200,
                    max: 1000,
                    text: ['高', '低'],
                    calculable: true,// 是否启用值域漫游
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    },
                   textStyle: {
                        color: '#000'	// 值域控件的文本颜色
                    }
                },
                geo: {
                    map: '新乡市',
                },
                series: [
                    {
                        name: '业绩', // series名称
                        type: 'map',
                        mapType: '新乡市', // 自定义扩展图表类型
                        label: {
                            show: true
                        },
                        data: myData // series数据内容
                    }
                ],
            };
            mapChart_map.setOption(option_map);

            //联动：点击地图上的市区块信息
            mapChart_map.on('click', function (params) {
                var city = params.name;
                var index = myData.findIndex(function(item) {
                    return item.name === city;
                });
                option['title']['subtext'] = '新乡市'+city;
                option['series'] = series_zztdata[index];
                myChart.setOption(option);
            });

        });
    </script>