大数据echarts展示（含地图，柱状图，饼图）
最近项目有个需要大数据展示的页面，运用echarts组件，设计饼图，柱状图和地图，现对项目做整理，原码硬盘留存
- 领导要求，要用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: []
}
]
累了，不想写了，看成果图，有需要的留言吧，配置数据而已。。。