大数据echarts展示（含地图，柱状图，饼图）

最近项目有个需要大数据展示的页面，运用echarts组件，设计饼图，柱状图和地图，现对项目做整理，原码硬盘留存

1. 领导要求，要用iframe嵌套页面，数值变化动画效果，区域颜色动画变化效果。浏览器支持最小宽度1280px。原型如下：
   最终效果图：
   
   部分代码如下：

<div class="con_all">
        <!-- header头部分start -->
        <div id="header">
            <div id="header_title">
                <h2>北京市************采集系统数据展示</h2>
            </div>
            <div id="header_currentYear_num">
                <div class="num_one">
                    <span class="num_one_r">本年度******总量</span>
                    <span id="yearSealDeliverSum"></span>
                </div>
                <div class="num_two">
                    <span class="num_one_r">本年度*****量</span>
                    <span id="yearAicSealDeliverSum"></span>
                </div>
                <div class="num_three">
                    <div id="header_current_time">
                        <span>最后刷新时间：</span>
                        <span id="header_current_time_cur"></span>
                    </div>
                    <!-- 下载数据 -->
                    <a href="./chart/export_pic" class="downloadData">下载数据</a>
                </div>
            </div>
        </div>

        <!-- 内容部分start -->
        <div id="content_container">
            <!-- 图表1-4上部分 -->
            <div id="content_top">
                <!-- 地图1 -->
                <iframe id="content_top_con" src="" name="content_top_con" scrolling="no" frameborder="0"></iframe>
                <div id="content_top_left">
                    <div id="thr_four">
                        <iframe id="columnar_3" src="" name="columnar_3" scrolling="no" frameborder="0"></iframe>
                        <div class="columnar_4_cont">
                            <iframe id="columnar_4" src="" name="content_top_right" scrolling="no" frameborder="0"></iframe>
                        </div>
                    </div>
                    <iframe id="top_pie_2" src="" name="top_pie_2" scrolling="no" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <!-- 图表5 -->
        <div class="content_bottom">
            <iframe id="columnar_5" src="" name="columnar_5" scrolling="no" frameborder="0"></iframe>
        </div>
    </div>

项目要求：数据变化页面地图及柱状图颜色变化——echarts本身动画无法满足项目需求，因为每10秒数据变化一次（前端定时请求后端存放在域中的数据，前端千万别直接访问数据库，人多会崩的！！！），我司数据变化很小（还非要用大数据，哭），通过修改地图鼠标悬停data中selected: false,及柱状图itemStyle下normal中color颜色，很low的方法，效果还可以。代码如下：

 data: [
                    { name: '东城区', selected: false, value: 312 },
                    { name: '丰台区', selected: false, value: 51 },
                    { name: '大兴区', selected: false, value: 161, },
                    { name: '密云区', selected: false, value: 92 },
                    { name: '平谷区', selected: false, value: 122 },
                    { name: '延庆区', selected: false, value: 172 },
                    { name: '怀柔区', selected: false, value: 102 },
                    { name: '房山区', selected: false, value: 151 },
                    { name: '昌平区', selected: false, value: 82 },
                    { name: '朝阳区', selected: false, value: 1111, },
                    { name: '海淀区', selected: false, value: 211 },
                    { name: '石景山区', selected: false, value: 61 },
                    { name: '西城区', selected: false, value: 41 },
                    { name: '通州区', selected: false, value: 141 },
                    { name: '门头沟区', selected: false, value: 193 },
                    { name: '顺义区', selected: false, value: 112 },
                ],

series: [
                {
                    name: '本月印章备案总量',
                    type: 'bar',
                    barGap: 0,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
                                    , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
                                    , '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd', '#336cbd'
                                ];
                                return colorList[params.dataIndex]

                            },
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            distance: '12',
                            align: 'right',
                            textStyle: {//柱子顶部数字颜色
                                color: '#000'
                            },
                            formatter: function (a) {//设置字体每个三位用“，”隔开
                                var result = [],
                                    counter = 0,
                                    num = a.data;
                                num = (num || 0).toString().split('');
                                for (var i = num.length - 1; i >= 0; i--) {
                                    counter++;
                                    result.unshift(num[i]);
                                    if (!(counter % 3) && i != 0) {
                                        result.unshift(',');
                                    }
                                }
                                result = result.join('');

                                return result;
                            }
                        }
                    },
                    barMinHeight: 10,//设置柱子的最小高度
                    data: []
                },
                {
                    name: '本月工商印章备案量',
                    type: 'bar',
                    distance: '1',
                    barCategoryGap: '50%',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
                                    , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
                                    , '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23', '#7cdc23'
                                ];
                                return colorList[params.dataIndex]
                            },
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            align: 'left',
                            textStyle: {
                                color: '#000'
                            },
                            formatter: function (a) {//设置字体每个三位用“，”隔开
                                var result = [],
                                    counter = 0,
                                    num = a.data;
                                num = (num || 0).toString().split('');
                                for (var i = num.length - 1; i >= 0; i--) {
                                    counter++;
                                    result.unshift(num[i]);
                                    if (!(counter % 3) && i != 0) {
                                        result.unshift(',');
                                    }
                                }
                                result = result.join('');
                                return result;
                            }
                        }
                    },
                    barMinHeight: 10,//设置柱子的最小高度
                    data: []
                }
            ]

累了，不想写了，看成果图，有需要的留言吧，配置数据而已。。。