前端对后端数据的处理

{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"
                }
            ]
        }
    }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值