$(document).ready(function() {
//插件初始化
$(":checkbox").labelauty({
checked_label: "",
unchecked_label: "",
});
$(":radio").labelauty();
//联动下拉
$("#city_1").citySelect({
url:{"citylist":[
{"p":"新老客户","c":[{"n":"不限"},{"n":"新客户"},{"n":"老客户"}]},
{"p":"级别","c":[{"n":"LV-0"},{"n":"LV-1"},{"n":"LV-2"},{"n":"LV-3"},{"n":"LV-4"}]}
]},
prov:"新老客户",
city:"不限"
});
$("#city_2").citySelect({
url:{"citylist":[
{"p":"全国省份排名","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Objective-C"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"DB2"}]},
]},
prov:"全国省份排名",
city:"",
dist:"",
nodata:"none"
});
//调用日期
/*var start = {
format: 'YYYY-MM-DD',
//minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
festival:true,
//isinitVal:true,
maxDate: $.nowDate(0), //最大日期
choosefun: function(elem,datas){
end.minDate = datas; //开始日选好后,重置结束日的最小日期
}
};
var end = {
format: 'YYYY-MM-DD',
//minDate: $.nowDate(0), //设定最小日期为当前日期
festival:true,
//isinitVal:true,
maxDate: '2099-06-16 23:59:59', //最大日期
choosefun: function(elem,datas){
start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
}
};
$("#inpstart").jeDate(start);
$("#inpend").jeDate(end);*/
//初始化切换
$(".animsition").animsition({
inClass : 'fade-in-right',
outClass : 'fade-out',
inDuration : 1500,
outDuration : 800,
linkElement : '.animsition-link',
// e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])'
loading : true,
loadingParentElement : 'body', //animsition wrapper element
loadingClass : 'animsition-loading',
unSupportCss : [ 'animation-duration',
'-webkit-animation-duration',
'-o-animation-duration'
],
//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body'
});
function my_data(){
var data = [];
for( var i =0; i<30; i++){
data.push(Math.round(Math.random() * (500 - 100) + 100));
};
return data;
}
//省份信息
var sf_data = [
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)},
{name: '南海诸岛',value: 0,
itemStyle: {
normal: {
color: '#e4f9fb',
label: {
show: false
}
},
emphasis: { // 也是选中样式
color: '#e4f9fb',
label: {
show: false,
textStyle: {
color: '#fff'
}
}
}
},
}//去掉南海诸岛
]
//排名前十前10的数据
var sf_data10
var sf10_value
var sf10_name
var zw_json = {name :'-',value : 0};
var len
Sort_10(sf_data)
function Sort_10(data){
sf_data10 = [];
sf10_value = [];
sf10_name = [];
len = data.length;
for(var i=0; i<len; i++){
sf_data10[i] = $.extend(true,{}, data[i]);
}
console.log(sf_data10.length)
if(len < 10){
for(var i=0; i<(10 - len); i++){
sf_data10.push(zw_json);
}
}
function size(){
var j = sf_data10[0].value;
var n = sf_data10[0];
var iNow = 0;
for (var i=1;i<sf_data10.length ;i++ ){
if(sf_data10[i].value>j){
j = sf_data10[i].value;
iNow = i;
}
}
return sf_data10.splice(iNow,1);
}
for(var i=0; i<10; i++){
sf10_value.unshift(size()[0]);
sf10_name.unshift(sf10_value[0].name);
}
//console.log(sf_data10)
}
//下拉省份选择
var sf_length = sf_data.length - 1;
var sf_options = '';
for(var i=0; i<sf_length; i++){
sf_options += '<option value="'+ sf_data[i].name +'">'+ sf_data[i].name +'</option>'
}
$('#sf_select').html($('#sf_select').html() + sf_options);
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie',
'echarts/chart/map',// 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main1'),'macarons');
var myChart2 = ec.init(document.getElementById('main2'),'macarons');
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var curIndx = 0;
$('#sf_select').on('change',function(){
var val = $(this).val();
var sf_mapTypeControl = {};
sf_mapTypeControl[val] = true;
if(val == 'china'){
Sort_10(sf_data);
myChart.setOption({
roamController: {
mapTypeControl: sf_mapTypeControl
},
series : [{
mapType: val,
data: sf_data
}]
});
myChart2.setOption({
yAxis : [
{
data : sf10_name
}
],
series : [{
data: sf10_value
}]
});
}
else{
Sort_10(sq_data[val]);
myChart.setOption({
roamController: {
mapTypeControl: sf_mapTypeControl
},
series : [{
mapType: val,
data: sq_data[val]
}]
});
myChart2.setOption({
yAxis : [
{
data : sf10_name
}
],
series : [{
data: sf10_value
}]
});
}
});
var option = {
backgroundColor : '#f3fffe',
tooltip : {
trigger: 'item',
//formatter: '滚轮切换或点击进入该省<br/>{b}'
},
legend: {
show : false,
orient: 'vertical',
x:'right',
data:['客户数量']
},
dataRange: {
min: 0,
max: 1000,
y:'top',
//color:['orange','yellow'],
text:['高','低'], // 文本,默认为数值文本
calculable : true
},
roamController: {
width : 60,
height : 90,
show: true,
x: 'left',
y:'bottom',
mapTypeControl: {
'china': true
}
},
series : [
{
name: '客户数量',
type: 'map',
mapType: 'china',
selectedMode : 'single',
scaleLimit : {
min : 0.5,
max : 2
},
mapLocation :{
x : 'right'
},
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:sf_data
},
]
};
var option2 = {
backgroundColor : 'white',
title:{
text : '排名前10',
x : 48,
y : 15,
textStyle : {
fontSize : 12
}
},
tooltip : {
trigger: 'axis',
},
grid :{
y: 55,
y2: 80
},
legend: {
show : true,
y : 'bottom',
borderWidth: 1,
padding: 8,
data:['项目数']
},
toolbox: {
show : true,
y: 15,
itemSize : 12,
feature : {
//mark : {show: true},
dataView : {show: true},
//magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : sf10_name
}
],
series : [
{
name:'人数',
type:'bar',
barMaxWidth : 10,
itemStyle: {
normal: {
color : '#36a2ef'
}
},
data:sf10_value
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
myChart2.setOption(option2);
}
);
//关闭提示
$('.xsfx_tips i').on('click',function(){
$(this).parent().slideUp();
})
});