{code: "0", msg: "success",…}
code: "0"
data: {list: [{IndustryInvestAmount: 880, name: "城市更新", IndustryInvestAmountNumber: 9},…]}
list: [{IndustryInvestAmount: 880, name: "城市更新", IndustryInvestAmountNumber: 9},…]
0: {IndustryInvestAmount: 880, name: "城市更新", IndustryInvestAmountNumber: 9}
1: {IndustryInvestAmount: 200, name: "社会民生", IndustryInvestAmountNumber: 2}
2: {IndustryInvestAmount: 212, name: "战略性新兴产业", IndustryInvestAmountNumber: 4}
3: {IndustryInvestAmount: 300, name: "现代服务业", IndustryInvestAmountNumber: 5}
4: {IndustryInvestAmount: 100, name: "先进制造和优势传统行业", IndustryInvestAmountNumber: 1}
5: {IndustryInvestAmount: 65, name: "轨道交通", IndustryInvestAmountNumber: 2}
6: {IndustryInvestAmount: 120, name: "城市安全环境资源", IndustryInvestAmountNumber: 2}
7: {IndustryInvestAmount: 120, name: "道路机场港口", IndustryInvestAmountNumber: 2}
msg: "success"
按照IndustryInvestAmount从大到小排序
如果图示显示按照个数显示,则就是个数显示
如果是按照亿元显示,则就按着亿元显示
function EchartThreeLoadData(el) {
console.log(el,"el");
$.ajax({
url: baseURL + '/zdxmjhbz/getHomePageIndustryDivision?type=' + el,
type: 'get',
async: false,
datatype: 'json',
success: function (res) {
// 声明一个空数组
var obj = [], countNum = 0;
// 创建一个空对象,把数组存放进去
var charObj = {
yAxis: [],
seriesData: []
}
var flag = el === 2 ? 'IndustryInvestAmountNumber' : 'IndustryInvestAmount'
var val = el === 2 ? 'IndustryInvestAmount' : 'IndustryInvestAmountNumber'
// res && res.data && res.data.list 判断有没有数据
if(res && res.data && res.data.list) {
res.data.list.sort(function (a, b) {
return a[flag] - b[flag];
});
res.data.list.map(function(item){
obj.push({
name: item.name,
money: item.IndustryInvestAmount,
number: item.IndustryInvestAmountNumber
})
charObj.yAxis.push(item.name)
charObj.seriesData.push({value: item[flag], number: item[val]})
console.log(charObj,"seriesData");
countNum += item[flag]
})
hyChart.setOption(EchartThreeOption(charObj, _el, countNum));
}
}
})
}
function EchartThreeOption(config, _el, countNum) {
console.log(config,"config");
var dataList = config.seriesData;
var totals = _dts; // 数据总数
var unitTxt = _index === 2 ? '个数(个)' : '金额(亿元)'
var unitTxtNumber = _index === 2 ? '(个)' : '(亿元)'
return {
backgroundColor: 'transparent',
xAxis: {
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
color: '#fff',
fontSize: 16
},
axisTick: {
show: false
},
max: function (value) {
return value.max - 0
}
},
grid: {
left: '2%',
right: '3%',
bottom: '3%',
width: "90%",
containLabel: true
},
yAxis: [{
name: unitTxt,
nameTextStyle: {
padding: [0, 0, 0, 720],
fontSize: 16,
color: '#0af8fa'
},
splitLine: {
show: false
},
axisLine: { //y轴
show: false
},
type: 'category',
axisTick: {
show: false
},
data: config.yAxis,
axisLabel: {
color: '#fff',
fontSize: 14
}
}],
tooltip:{
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
borderWidth: 1,
borderColor: '#004184',
label: {
color: '#ffffff'
},
backgroundColor: 'rgba(2, 22, 71, 0.7)',
formatter: function (v) {
var txt = '', unit = ''
if(_el === 2) {
txt = '年度投资总金额'
unit = '(亿元)'
} else{
txt = '项目个数'
unit = '(个)'
}
var num = (v[0].data.value / countNum) * 100;
return "<span class=\'min-font\'>"+v[0].axisValue + "</span><span class=\'max-font\'>"+ v[0].data.value + " " +unitTxtNumber+ " ("+ num.toFixed(1) +'%)'+"</span><span class=\'max-font\'>"+ txt + " "+ v[0].data.number + unit +"</span>"
}
},
series: [
{
// 内
type: "bar",
barWidth: 18,
legendHoverLink: false,
silent: true,
itemStyle: {
emphasis: {
barBorderRadius: 30
},
normal: {
// color: "#0099ff",
//柱形图圆角,初始化效果
barBorderRadius:[10, 10, 10, 10],
// label: {
// show: true,//是否展示
// textStyle: {
// fontWeight:'bolder',
// fontSize : '12',
// fontFamily : '微软雅黑',
// }
// }
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
'rgba(0,122,254,1)', 'rgba(9,247,204,1)'
].map((color, offset) => ({
color,
offset
}))), // 渐变
},
},
label: {
show: true,
position: 'right', // 位置
color: '#0af8fa',
fontSize: 14,
fontWeight: 'Regular', // 加粗
distance: 0 // 距离
}, // 柱子上方的数值
data: config.seriesData,
z: 1,
animationEasing: "elasticOut"
},
{
// 外边框
type: "pictorialBar",
symbol: "rect",
symbolBoundingData: totals,
itemStyle: {
normal: {
color: "none"
}
},
label: {
normal: {
formatter: (params) => {
var text;
if (params.dataIndex == 1) {
text = '{f| ' + params.data + '}';
} else if (params.dataIndex == 2) {
text = '{f| ' + params.data + '}';
} else if (params.dataIndex == 3) {
text = '{f| ' + params.data + '}';
} else {
text = '{f| ' + params.data + '}';
}
return text;
},
rich: {
f: {
color: "#ffffff"
}
},
position: 'right',
distance: 0, // 向右偏移位置
show: true
}
},
z: 0,
animationEasing: "elasticOut"
}
]
}
}
前端对后端数据的处理
最新推荐文章于 2023-07-20 09:22:51 发布