2021-6月

JS

1.遍历对象

for(i in x){
    console.log(i); //键
    console.log(x[i]);	//值
}

2.数组统计每个元素出现的数量

function  statisticalFieldNumber(arr) {
    return arr.reduce(function (prev, next) {
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    }, {});
};

3.for循环axios，同步请求，构建Echarts表格

构建Echarts时需要等数据全部获取完成再生成表格

这里数据需要从四个接口取

然后Echarts还涉及到顺序问题，不能直接axios这个读取的快的就先出来了。

故采用axios同步写法

axios用async包起来，注意要return，axios本身就是一个promise

async function getGDData(tuceng) {
    return await axios.get(`/dxgd/guandian/` + tuceng)
        .then(res => {
            dataArr.push(res.data);
            dataY.push(res.data.length);
        }).catch(err => {
            console.log(err);
        })
}

循环中await axios，然后再构表格

(async ()=> {
    for (i of tucengArr) {
        await getGDData(i)
    }
      t = echarts.init(document.getElementById("echartsView"), "dark");
        d = getOption();
    t.setOption(d);
    })();

4.合并数组

 	let arr1 = [1,2,3]
        let arr2 = [4,5,6]
        let arr3 = []
        arr3 = arr3.concat(arr1).concat(arr2)
        console.log(arr3);

        let arr4 = [1,2,3]
        let arr5 = [4,5,6]
        arr4 = arr4.concat(arr5)
        console.log(arr4);

Echarts

1. 根据宽度高度自适应

 t = echarts.init(document.getElementById("echartsView"), "dark"),

setTimeout(function (){
    window.onresize = function () {
        t.resize();
    }
},200);

2.series设置

series: [{

    type: 'bar',
    data: [dataY[0], dataY[1], dataY[2], dataY[3]],
    barWidth: '35%', //柱子宽度
    // barGap: 1, //柱子之间间距
    itemStyle: {
        normal: {
            color:  new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                ]
            ),
            opacity: 1,
            barBorderRadius: 5,
            label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: { //数值样式
                    fontSize: 16
                },
                formatter:'{c}个'
            }
        }
    }
}

]

图床

上传失败，手动上传

无法自动上传图片，看日志也没解决。

可以手动上传，这里可以看到地址是我本地的c盘。

这里在图片右键点击上传图片，看到地址显示网络地址就好了

或者点击上传全部图片

layui

如何在同一行显示多个元素

<div class="layui-form-item" style="width: 100%;height: 30px;background-color: #333333">
    <div class="layui-input-inline">
        <label class="layui-form-label" class="test" style="color: white">管道类型</label>
        <select name="line_type" id="line_type" lay-verify="required">
            <option value="gd_line" selected>管道线</option>
            <option value="xx_line">新型线</option>
            <option value="js_line">建设线</option>
            <option value="ld_line">路灯线</option>
        </select>
        <label class="layui-form-label" style="padding-left: 50px;color: white">管径类型</label>
        <select name="circleOrSquare" id="yuanOrFang" lay-verify="required">
            <option value="yuan" selected>圆形管</option>
            <option value="fang">方形管</option>
        </select>
        <input id="query" type="button" class="btn btn-primary" value="查询">
    </div>
</div>

最外层用

包裹

放在同一行的用

包裹

中间不要有换行的标签