function N3() {
var n3 = echarts.init(document.getElementById('n2'));
var datas = {
"result": [
{
"cid": 1,
"name": "aaa",
"price": 1000
}, {
"cid": 2,
"name": "bbb",
"price": 150
}, {
"cid": 3,
"name": "ccc",
"price": 200
}, {
"cid": 4,
"name": "ddd",
"price": 1500
}, {
"cid": 5,
"name": "eee",
"price": 1100
}
],
"totalCount": 5
}
var newdata = datas.result;
var xdata = [];
var ydata = [];
function sortprice(a, b) {
return a.price - b.price
}
newdata.sort(sortprice);
console.log(newdata);
$.each(newdata,function(k,v){
xdata.push(v.name);
ydata.push(v.price)
});
console.log('*************xdata**********');
console.log(xdata);
console.log('*************ydata**********');
console.log(ydata);
var option = {
tooltip: {
show: false, //鼠标放上去显示悬浮数据
},
title: {
text: '子公司数据更新次数 TOP10',
x: 'center',
top: 0,
textStyle: {
fontSize: 14,
fontWeight: "normal",
color: '#fff'
}
},
color: [new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#00FFE3"
}, {
offset: 1,
color: "#4693EC"
}], false)],
grid: {
left: '2%',
right: '10%',
top: '5%',
bottom: '2%',
containLabel: true
},
tooltip: {
show: "true",
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
yAxis: {
data: xdata,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 12
},
},
xAxis: [{
axisTick: {
show: false
},
type: 'value',
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}],
series: [{
name: '更新次数',
type: 'bar',
barWidth: 15,
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: "#9fceff",
fontSize: 12
}
}
},
data: ydata
}]
};
n3.setOption(option);
}
json数据根据value排序后重组(echarts组件常用)
最新推荐文章于 2023-08-09 17:09:23 发布