js实现把一组数据根据指定模板的顺序排序

需求 有一组全国各省份的数据如下,现在需要把下面数据按照国标排序，并且name要使用简称（比如：上海市就是上海）

{name:	'上海市',	value:	70,	},
{name:	'甘肃省',	value:	51,	},
......
{name:	'山东省',	value:	81,	},

思路

1，先按照国标排序整理出模板如下

var finalArea = [
    '北京',
    '天津',
    '河北',
    '山西',
    '内蒙古',
    '辽宁',
    '吉林',
    '黑龙江',
    '上海',
    '江苏',
    '浙江',
    '安徽',
    '福建',
    '江西',
    '山东',
    '河南',
    '湖北',
    '湖南',
    '广东',
    '重庆',
    '四川',
    '贵州',
    '云南',
    '西藏',
    '陕西',
    '甘肃',
    '青海',
    '宁夏',
    '新疆',
    '广西',
    '海南',
]

2，遍历模板的每一项去和数据比对，如果模板中的某一项能在数据中查找到（这里在比对时要使用模糊查询）就取出这一项并重新赋值新对象并push到新数组里。

代码（这里拆成了两部分）：

function getNameValueArr(data) {
    var arr = [];
    // 遍历模板，按照模板顺序依次进行查询    
    finalArea.forEach((item, index) => {
        fuzzyQuery(data, item, arr)
    });
    return arr
}
// 模糊查询重组数据
function fuzzyQuery(data, keyWord, arr) {
    var o = {};
    for (var i = 0; i < data.length; i++) {
        if (data[i].name.indexOf(keyWord) >= 0) {
            o.name = keyWord;
            o.value = data[i].value;
            arr.push(o);
        }
    }
}

如果需要做成echarts柱状图则再加一个方法

// echarts  data转换
function getChartsArr(data) {
    // 这里是把x，y轴data放在一个数组里面，也可以放对象里面   
    var echartsArr = [];
    var arrX = [];
    var arrY = [];
    data.forEach((item, index) => {
        arrX.push(item.name);
        arrY.push(item.value)
    })
    echartsArr.push(arrX);
    echartsArr.push(arrY);
    return echartsArr
}

最终代码

function getNameValueArr(data) {
    var arr = [];
    // 遍历模板，按照模板顺序依次进行查询    
    finalArea.forEach((item, index) => {
        fuzzyQuery(data, item, arr)
    });
    return getChartsArr(arr)
}
// 模糊查询重组数据
function fuzzyQuery(data, keyWord, arr) {
    var o = {};
    for (var i = 0; i < data.length; i++) {
        if (data[i].name.indexOf(keyWord) >= 0) {
            o.name = keyWord;
            o.value = data[i].value;
            arr.push(o);
        }
    }
}
// echarts  data转换
function getChartsArr(data) {
    // 这里是把x，y轴data放在一个数组里面，也可以放对象里面   
    var echartsArr = [];
    var arrX = [];
    var arrY = [];
    data.forEach((item, index) => {
        arrX.push(item.name);
        arrY.push(item.value)
    })
    echartsArr.push(arrX);
    echartsArr.push(arrY);
    return echartsArr
}

使用

        xAxis: [
            {
                type: 'category',
                data: getNameValueArr(data)[0],
                axisTick: {
                    alignWithLabel: true
                },
            }
        ],
       series: [
            {
                name: 'youname',
                type: 'bar',
                barWidth: '30%',
                data: getNameValueArr(data)[1],
            },
        ]