You are here
js 数组增加数据 push 推送元素到数组 数组大小排序 echarts
/**
* Created by Administrator on 2017/11/11.
*/
var shangjia_zhu_colors =['#fd7a2f', '#2d97e4', '#2bbf47', '#feb031', '#615fa4', '#72d2be', '#ff91bd', '#f5c400', '#0197b7', '#8cc63f'];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
//console.log(res)
return res;
};
//var convertFirstData = function (data) {
// var res = [];
// for (var i = 0; i < data.length; i++) {
// var geoCoord = geoCoordMap[data[i].name];
// if (geoCoord) {
// res.push({
// name: data[i].name,
// value: geoCoord.concat(data[i].value)
// });
// }
// }
// console.log(res)
// return res;
//};
var convertSecondData = function (data) {
var res_name = [];
var res_value = [];
for (var i = 0; i < data.length; i++) {
data[i].name = data[i].name.replace(/市市辖区/, "");
res_name.push(data[i].name);
res_value.push(data[i].value);
};
var res = new Object();
res.name = res_name;
res.value = res_value;
//console.log(res);
return res;
};
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
//backgroundColor: '#404a59',
title: {
text: '',
left: 'center',
textStyle: {
color: '#e1e0ff',
fontSize: 22,
fontFamily: 'Courier New',
},
padding: 20
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
// renderAsImage: "/assets/front/images/bg.jpg",
geo: {
map: 'china',
center: [105.114129, 35.350339],
zoom: 1.20,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#3ca1ed',
borderColor: '#111'
},
emphasis: {
areaColor: '#3ca1ed'
}
}
},
// bmap: {
// center: [120.114129, 42.550339],
// zoom: 5,
// roam: false,
// mapStyle: {
// styleJson: styleJson
// }
// },
series: [
{
//name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [],
symbolSize: function (val) {
var sy_si = parseInt(val[2] / 20);
sy_si = sy_si + 7;
if (sy_si > 15) {
sy_si = 10;
}
return sy_si;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
<script type="text/javascript">
var shangjia_dom = document.getElementById("shangjia_container");
var shangjia_myChart = echarts.init(shangjia_dom);
option1 = null;
option1 = {
title: {
text: '全 国 商 家 排 名',
left: 'center',
textStyle: {
color: '#ffffff',
// align: 'right',
fontSize: 22,
fontWeight: 'normal',
},
top: 10
},
// color: ['#1e72b2','#1f7ece','#369bed','#35acf0','#31c1f5','#3ab6ec','#80d1fc','#a4e2fb','#b3e5fe','#b4f3fa',],
// backgroundColor:'#044061',
textStyle: {
color: '#ffffff'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
}
},
// legend: {
// data: ['2011年', '2012年']
// },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
show: true,
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: '#3d618d',
}
},
splitLine:{
show:true,
lineStyle:{
color:['#3d618d']
}
}
},
yAxis: {
show: true,
type: 'category',
data: [],
axisLine: {
lineStyle: {
color: '#3d618d',
}
},
},
series: [
{
name: '',
type: 'bar',
barWidth: 20,
itemStyle: {
normal: {
color: '#1e72b2',
},
},
data: []
// data: [10,11,12,13,14, 15, 16, 17, 18, 19],
// color: ['#1e72b2','#1f7ece','#369bed','#35acf0','#31c1f5','#3ab6ec','#80d1fc','#a4e2fb','#b3e5fe','#b4f3fa',],
}
]
};
if (option1 && typeof option1 === "object") {
shangjia_myChart.setOption(option1, true);
}
</script>
<script>
// //异步加载数据
$.get('/api/homes/index').done(function (data) {
// data = eval('('+data+')');
var shangjia_data = convertSecondData(data);
console.log(data);
shangjia_data.name = shangjia_data.name.slice(0, 10);
shangjia_data.value = shangjia_data.value.slice(0, 10);
console.log(shangjia_data);
myChart.setOption({
series: [
{
//根据名字对应到相应的系列
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 80))
}
]
});
var shangjia_series = [];
for (var i = 0; i < shangjia_data.value.length; i++) {
shangjia_series.push({
value: shangjia_data.value[i],
itemStyle: {
normal: {
color: shangjia_zhu_colors[i],
},
}
})
}
shangjia_myChart.setOption({
yAxis: {
data: shangjia_data.name
},
series: [{
data: shangjia_series
}
]
})
})
</script>