2021-08-19黑马Jq+Echarts实战

效果图如上

在这里插入代码片
```$(function () {
    let name = $('.add .username')
    let score = $('.add .pf')
    let salary = $('.add .salary')
    let dataArr = JSON.parse(localStorage.getItem('todolist')) || []
    load()
    fn(dataArr)
    zhexian(dataArr)
    function load() {
        $('.tobdy').empty()
        dataArr.forEach(function (obj, index) {
            let theTr = $(`
            <tr>
            <td>
                <span class="span1 show">${obj.name}</span>
                <input type="text" class="hide" name="" id="" value='${obj.name}'>
            </td>
            <td>
                <span class="span1 show ">${obj.score}</span>
                <input class="hide" type="text" name="" id="" value='${obj.score}'>
            </td>
            <td>
                <span class="span1 show">${obj.salary}</span>
                <input type="text" class="hide" name="" id="" value='${obj.salary}'>
            </td>
            <td class="operation">
                <span class="opt1 show">
                    <a href="javascript:;" class="o1" idx='${index}'><img src="./images/upd.png"  alt="" width="18px"></a>
                    <a href="javascript:;"  class='delete' idx='${index}'><img src="./images/del.png" alt="" width="18px"></a>
                </span>
                <span class="opt2 hide">
                    <a href="javascript:;"  class="yes" idx='${index}'><img src="./images/yes.png"  alt="" width="18px"></a>
                    <a href="javascript:;" class='no' idx='${index}'><img src="./images/no.png"  alt="" width="18px"></a>
                </span>
            </td>
        </tr>
            `)
            $('.tobdy').prepend(theTr)
        })
    }
    let mode = false
    //点击发布
    $('.add .btn').on('click', function () {
        //判断是否为编辑模式
        if (mode) {
            return alert('请完成编辑')
        }
        if (name.val().trim().length === 0 || score.val().trim().length === 0 || salary.val().trim().length === 0) {
            return alert('请输入有效信息')
        }
        dataArr.push({ name: $('.add .username').val(), score: $('.add .pf').val(), salary: $('.add .salary').val() })
        $('.add .username').val('')
        $('.add .pf').val('')
        $('.add .salary').val('')
        localStorage.setItem('todolist', JSON.stringify(dataArr))
        load()
        fn(dataArr)
        zhexian(dataArr)
    })
    //回车发布
    $('input').on('keyup', function (e) {
        if (e.keyCode === 13) {
            $('.add .btn').click()
        }
    })
    // 点击删除
    $('.tobdy').on('click', '.opt1 .delete', function () {
        if (mode) {
            return alert('请完成编辑')
        }
        let index = $(this).attr('idx')
        dataArr.splice(index, 1)
        localStorage.setItem('todolist', JSON.stringify(dataArr))
        load()
        fn(dataArr)
        zhexian(dataArr)
    })
    //点击修改 注意一定要用事件委托
    $('.tobdy ').on('click', '.opt1 .o1', function () {
        if (mode) {
            return alert('请完成编辑')
        }
        $(this).parents('.operation').toggleClass('editMode').siblings().toggleClass('editMode')
        $(this).parents('tr').siblings().find('td').removeClass('editMode')
        mode = true
    })
    //点击完成
    $('.tobdy ').on('click', '.opt2 .yes', function () {
        $(this).parents('.operation').toggleClass('editMode').siblings().toggleClass('editMode')
        let index = $(this).attr('idx')
        //判断输入的信息
        if ($(this).parents('tr').find('td').eq(0).find('input').val().trim().length === 0
            || $(this).parents('tr').find('td').eq(1).find('input').val().trim().length === 0
            || $(this).parents('tr').find('td').eq(2).find('input').val().trim().length === 0) {
            return alert('请输入有效信息')
        }
        dataArr[index].name = $(this).parents('tr').find('td').eq(0).find('input').val()
        dataArr[index].score = $(this).parents('tr').find('td').eq(1).find('input').val()
        dataArr[index].salary = $(this).parents('tr').find('td').eq(2).find('input').val()
        localStorage.setItem('todolist', JSON.stringify(dataArr))
        load()
        fn(dataArr)
        zhexian(dataArr)
        mode = false
    })
    //点击取消
    $('.tobdy ').on('click', '.opt2 .no', function () {
        $(this).parents('.operation').toggleClass('editMode').siblings().toggleClass('editMode')
        mode = false
    })
    //柱状图-------------------------------------------------
    function fn(arr) {
        let name = arr.map(function (item, index) {
            return item.name
        })
        name = name.reverse()
        let score = arr.map(function (item, index) {
            return item.score
        })
        score = score.reverse()
        let myChart = echarts.init(document.querySelector('.zhucharts'))
        //  console.log(document.querySelector('.zhucharts'));
        //  console.log(myChart);
        let option = {
            color: ["#3398DB"],
            tooltip: {
                trigger: "item",
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                top: "2%",
                containLabel: true,
            },
            xAxis: [{
                type: "category",
                data: name,
                axisTick: {
                    alignWithLabel: true,
                },
                axisLine: {
                    lineStyle: {
                        color: "#ffff",
                    },
                },
            },],
            yAxis: [{
                type: "value",
                axisLine: {
                    lineStyle: {
                        color: "#ffff",
                    },
                },
                splitLine: {
                    show: false,
                },
            },],
            series: [{
                name: "直接访问",
                type: "bar",
                barWidth: "60%",
                data: score,
            },],
        };

        myChart.setOption(option)
        window.addEventListener('resize', function () {
            myChart.resize()
        })
    }
    // 折线图-------------------------------------------------
    function zhexian(arr) {
        let name = arr.map(function (item, index) {
            return item.name
        })
        name = name.reverse()
        // console.log(name);
        let salary = arr.map(function (item, index) {
            return item.salary
        })
        salary = salary.reverse()
        let myChart2 = echarts.init(document.querySelector('.linecharts'));
        let option = {
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                top: "3%",
                containLabel: true,
            },

            xAxis: {
                type: "category",
                data: name,
                axisLine: {
                    lineStyle: {
                        color: "#ffff",
                    },
                },
            },
            yAxis: {
                type: "value",
                splitLine: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: "#ffff",
                    },
                },
            },
            series: [{
                data: salary,
                type: "line",
                itemStyle: {
                    color: "blue",
                },
            },
            ],
        };
        myChart2.setOption(option);
        window.addEventListener('resize', function () {
            myChart2.resize()
        })
    }

})