使用jQuery实现echars智能图表面板（附代码）

最新推荐文章于 2024-04-26 16:47:03 发布

柒月VII

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.3k

点赞数 1

分类专栏：前端学习文章标签： jquery javascript css echarts

本文链接：https://blog.csdn.net/weixin_43205774/article/details/126922601

版权

前端学习专栏收录该内容

13 篇文章 5 订阅

订阅专栏

1、实现效果

echars

2、核心思路

主要使用echars.js的库来实现所有图表
布局采用display:flex布局，通过px to rem将px转换为rem单位，让页面变化时，字体大小，盒子大小也跟随变化
地图引用了china.js，不过都是基于echars.js来做的动画
echars.js使用参考官网文档
盒子使用border-image，边框图片，通过切图将其拉伸

3、文档结构

附录
HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bigDate</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/bigdate.css">
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/flexible.js"></script>
    <script src="./js/china.js"></script>



</head>

<body>
    <div class="main">

        <div class="main_left">

            <div class="dateSum panel">
                <div class="dateSumtext">
                    <ul>
                        <li>
                            <span>消费金额(万)</span>
                            <h4>5,124</h4>
                        </li>
                        <li>
                            <span>充值金额(万)</span>
                            <h4>5,434</h4>
                        </li>
                        <li>
                            <span>充值人次(万)</span>
                            <h4>1,209</h4>
                        </li>
                        <li>
                            <span>消费人次(万)</span>
                            <h4>35</h4>
                        </li>
                    </ul>

                </div>


            </div>

            <div class="dateMonitor panel">
                <div class="dateMonitortext">
                    <h4>今日餐饮人群分析</h4>
                    <div class="charsUser"></div>


                </div>

            </div>

            <div class="dateBitmap panel">
                <div class="dateBitmaptext">
                    <h4>消费排行榜</h4>
                    <div class="dateBit">
                        <div class="dateBitheader">
                            <ul>
                                <li class="datebitcurrent">开水排行</li>
                                <li>超市排行</li>
                                <li style="border: none">淋浴排行</li>
                            </ul>
                        </div>
                        <div class="dateBitcontain">
                            <div class="contain">
                                <div class="row1">
                                    <ul>
                                        <li class="col">五食堂一组</li>
                                        <li class="col">3750人次</li>
                                        <li class="col">人均9.1元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">五食堂二组</li>
                                        <li class="col">2542人次</li>
                                        <li class="col">人均15.2元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">四食堂一组</li>
                                        <li class="col">1956人次</li>
                                        <li class="col">人均10.9元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">三食堂一组</li>
                                        <li class="col">1562人次</li>
                                        <li class="col">人均10.5元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">一食堂一组</li>
                                        <li class="col">1250人次</li>
                                        <li class="col">人均6.5元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">二食堂一组</li>
                                        <li class="col">365人次</li>
                                        <li class="col">人均16.8元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">三食堂一组</li>
                                        <li class="col">375人次</li>
                                        <li class="col">人均15.3元</li>
                                    </ul>

                                </div>
                                <div class="row2" style="display: none">
                                    <ul>
                                        <li class="col">汇源超市</li>
                                        <li class="col">3750人次</li>
                                        <li class="col">人均9.1元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">东方超市</li>
                                        <li class="col">2542人次</li>
                                        <li class="col">人均15.2元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">北山超市</li>
                                        <li class="col">1956人次</li>
                                        <li class="col">人均10.9元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">翠园超市</li>
                                        <li class="col">1562人次</li>
                                        <li class="col">人均10.5元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">筱苑超市</li>
                                        <li class="col">1250人次</li>
                                        <li class="col">人均6.5元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">南山超市</li>
                                        <li class="col">365人次</li>
                                        <li class="col">人均16.8元</li>
                                    </ul>


                                </div>
                                <div class="row3" style="display: none">
                                    <ul>
                                        <li class="col">一栋浴室</li>
                                        <li class="col">3750人次</li>
                                        <li class="col">人均9.1元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">二栋浴室</li>
                                        <li class="col">2542人次</li>
                                        <li class="col">人均15.2元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">五栋浴室</li>
                                        <li class="col">1956人次</li>
                                        <li class="col">人均10.9元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">七栋浴室</li>
                                        <li class="col">1562人次</li>
                                        <li class="col">人均10.5元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">十栋浴室</li>
                                        <li class="col">1250人次</li>
                                        <li class="col">人均6.5元</li>
                                    </ul>
                                    <ul>
                                        <li class="col">八栋浴室</li>
                                        <li class="col">365人次</li>
                                        <li class="col">人均16.8元</li>
                                    </ul>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="main_centre">

            <div class="dateMap ">
                <div class="dateMaptext">

                </div>

            </div>
            <div class="dateUser panel">
                <div class="dateUsertext">
                    <h3>校园消费额</h3>
                    <div class="dateUsermap">
                    </div>
                </div>
            </div>
        </div>

        <div class="main_right">
            <div class="dateOrdertime panel">
                <div class="tabs">
                    <a href="#" class="tabscurrent">365天</a>
                    <a href="#">90天</a>
                    <a href="#">30天</a>
                    <a href="#">24小时</a>
                </div>

                <div class="dateOrdercontain">
                    <div class="dateOrdertimetext">
                    </div>
                    <div class="dateOrdertimetext1" style="display: none;">
                    </div>
                    <div class="dateOrdertimetext2" style="display: none;">
                    </div>
                    <div class="dateOrdertimetext3" style="display: none;">

                    </div>
                </div>
            </div>

            <div class="dateDistration panel">
                <h3 style="color:white">年度消费额</h3>
                <div class="dateDistrationtext">
                </div>
            </div>
            <div class="dateList panel">
                <div class="dateListtext">
                    <div class="datelisthot">
                        <h3>校园热榜</h3>
                        <ul>
                            <img src="./img/first.png" alt="">
                            <li> 五食堂</li>
                            <img src="./img/second.png" alt="">
                            <li>一食堂</li>
                            <img src="./img/third.png" alt="">
                            <li>三食堂</li>
                        </ul>
                    </div>
                    <div class="datelistMap">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./js/bigdate.js"></script>
<script src="./js/myMap.js"></script>

</html>

CSS：

* {
    margin: 0 auto;
    padding: 0 auto;
    box-sizing: border-box;
}

body {
    background: url("../img/bg.jpg") no-repeat;
    background-size: cover;
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 42.66px!important;
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 80px!important;
    }
}

ul li {
    list-style: none;
    color: white;
}

.main {
    display: flex;
    background: url("../img/logo.png") no-repeat;
    background-size: contain;
    min-width: 1024px;
    max-width: 1920px;
    padding: 1.2rem .25rem 0;
    /* min-height: 800px; */
}


/* 公共样式 */

.panel {
    border: 15px solid red;
    border-image-source: url(../img/border.png);
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image-slice: 51 38 20 132;
    margin: .25rem;
    padding: .3rem;
}


/* left左侧样式 */

.main .main_left {
    flex: 3;
}

.main .dateSum {
    position: relative;
    /* height: auto; */
}

.main .dateSumtext {
    /* border: 50px solid red; */
    position: absolute;
    top: -.32rem;
    left: -2rem;
}

.main .dateSum ul {
    display: flex;
}

.main .dateSum ul li {
    margin-left: .25rem;
    width: 1.2rem;
    text-align: center;
}

.main .dateSum h4 {
    font-size: .35rem;
    margin-top: .1rem;
}

.main .dateSum span {
    color: #0dcdee;
    font-size: .2rem;
}


/* dateMonitor */

.main .dateMonitor {
    position: relative;
    height: 4rem;
}

.main .dateMonitortext {
    position: absolute;
    top: -.5rem;
    left: -1.3rem;
}

.main .dateMonitortext h4 {
    color: white;
    font-size: .3rem;
}

.main .dateMonitortext .charsUser {
    width: 5rem;
    height: 3rem;
    /* background-color: #0dcdee; */
    margin-left: .1rem;
}


/* dateBitmap */

.main .dateBitmap {
    position: relative;
    height: 4rem;
}

.main .dateBitmap .dateBitmaptext {
    position: absolute;
    top: -.4rem;
    left: -1.2rem;
}

.main .dateBitmap h4 {
    color: white;
    font-size: .3rem;
}

.main .dateBitheader {
    display: flex;
    margin-top: .2rem;
}

.main .dateBitheader ul {
    padding: 0;
}

.main .dateBitheader li {
    float: left;
    width: 1.5rem;
    height: .3rem;
    /* background-color: red; */
    border-right: 2px solid #68d8fe;
    /* margin-left: .2rem; */
    text-align: center;
    line-height: .3rem;
    font-size: .22rem;
    color: #0dcdee;
    font-weight: 800;
    cursor: pointer;
}

.datebitcurrent {
    color: white !important;
}

.main .dateBitheader a {
    text-decoration: none;
}

.main .dateBitcontain {
    margin-top: .1rem;
}

.main .dateBitcontain ul {
    padding: 0;
    width: 5.2rem;
    height: .4rem;
    margin: 0;
    cursor: pointer;
    line-height: .2rem;
}

.main .dateBitcontain ul:hover {
    background-color: #00507d;
}

.main .dateBit .contain {
    width: 5rem;
    height: 2.3rem;
    overflow: hidden;
    margin-top: .2rem;
    /* background-color: black; */
}


/* 滚动动画 */

.main .dateBit .row1,
.main .dateBit .row2,
.main .dateBit .row3 {
    width: 5rem;
    height: 2.3rem;
    /* border: 1px solid red; */
    /* overflow: hidden; */
    animation: move 10s linear infinite;
}

@keyframes move {
    0% {}
    100% {
        transform: translateY(-50%);
    }
}

.main .dateBit .row1:hover {
    animation-play-state: paused;
}

.main .dateBit .row2:hover {
    animation-play-state: paused;
}

.main .dateBit .row3:hover {
    animation-play-state: paused;
}

.main .dateBit .col {
    color: #61a8ff;
    font-size: .2rem;
    /* display: block; */
    float: left;
    width: 1.4rem;
    margin-left: .3rem;
    margin-top: .1rem;
}


/* centre */

.main .main_centre {
    flex: 4;
}

.main .dateMap {
    position: relative;
    height: 5.2rem;
    margin-top: .8rem;
}

.main .main_centre .dateMaptext {
    height: 5rem;
    width: 10rem;
    /* border: 1px solid red; */
}

.main .dateUser {
    position: relative;
    height: 4rem;
    position: relative;
}

.main .dateUser h3 {
    color: white;
    font-size: .25rem;
    position: absolute;
    left: -1.3rem;
    top: -.4rem;
}

.main .dateUser .dateUsermap {
    width: 110%;
    height: 110%;
    /* border: 1px solid red; */
    position: absolute;
    left: -1rem;
    top: 0rem;
}


/* right */

.main .main_right {
    flex: 3;
}

.main_right .dateOrdertime {
    position: relative;
}

.main_right .tabs {
    position: absolute;
    top: -.4rem;
    left: -.7rem;
}

.main_right .tabs a {
    color: #68d8fe;
    text-decoration: none;
    font-size: .22rem;
    /* margin-left: .25rem; */
    /* background-color: white; */
    display: block;
    float: left;
    width: 1rem;
    text-align: center;
}

.tabscurrent {
    color: white !important;
    font-weight: 800;
}

.main_right .tabs a:nth-child(-n+3) {
    border-right: 1px solid #68d8fe;
}

.main_right .dateOrdertimetext,
.dateOrdertimetext1,
.dateOrdertimetext2,
.dateOrdertimetext3 {
    width: 5rem;
    height: 3rem;
    position: absolute;
    /* border: 1px solid red; */
    top: -0.2rem;
    left: -1.15rem;
}

.main .main_right .dateOrdertime {
    position: relative;
    height: 3rem;
}

.main .main_right .dateDistration {
    position: relative;
    height: 3rem;
}

.main .main_right .dateDistrationtext {
    position: absolute;
    top: 0rem;
    left: -1.4rem;
    height: 3rem;
    width: 5.4rem;
    height: 2rem;
    /* border: 1px solid red; */
}

.main .main_right .dateDistration h3 {
    font-size: .25rem;
    position: absolute;
    left: -1.3rem;
    top: -.5rem;
}

.main .main_right .dateList {
    position: relative;
    height: 3.5rem;
}

.main .main_right .dateListtext {
    position: absolute;
    top: -.4rem;
    left: -1.3rem;
    width: 2.0rem;
    height: 3rem;
    /* border: 1px solid red; */
}

.main .main_right .dateListtext ul {
    padding: 0;
}

.main .main_right .dateListtext ul li {
    height: .8rem;
    /* padding-bottom: 1rem; */
    font-size: .22rem;
    line-height: 1rem;
    color: #68d8fe;
}

.main .main_right .dateListtext h3 {
    color: white;
    font-size: .25rem;
}

.main .main_right .dateListtext .datelisthot img {
    width: .55rem;
    height: .55rem;
    margin-top: .18rem;
    margin-right: .1rem;
    float: left;
}

.main .main_right .dateListtext .datelistMap {
    width: 4rem;
    height: 3rem;
    /* border: 1px solid red; */
    position: absolute;
    top: 0rem;
    left: 1.8rem;
}

JS：
bigdate.js

// 禁止选中
(function() {
    // 禁止选中
    // console.log(111);
    // 2.禁止选中文字
    document.addEventListener('selectstart', function(e) {
        e.preventDefault();
    });

})();

// 分布点位图
(function() {
    let chartDom = document.querySelector(".charsUser");
    // console.log(chartDom);
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        series: [{
            name: '餐饮人群',
            type: 'pie',
            radius: [10, 90],
            center: ['50%', '60%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: [0, 0, 4, 4],
            },

            data: [
                { value: 6854, name: '本科生' },
                { value: 3265, name: '教工' },
                { value: 1053, name: '家属' },
                { value: 953, name: '临时' },
                { value: 523, name: '其他' },
                { value: 3561, name: '研究生' },

            ],
            color: ['#5c7bd9', '#91cc75', '#fac858', '#ee6666', '#0096ff', '#7ed3f4'],
            label: {
                fontsSize: 20
            },
            labelLine: {
                length: 10,
                length2: 10
            }
        }]
    };

    option && myChart.setOption(option);

})();

// 消费排行榜
(function() {
    $(".dateBitheader li").on("click", function() {
        let index = $(this).index();
        $(".contain div").eq(index).show().siblings("div").hide();
        $(this).addClass("datebitcurrent").siblings("li").removeClass("datebitcurrent");

    });

    $(".dateBitcontain .row1").each(function() {
        let rows = $(this).children().clone();
        $(this).append(rows);
    });
    $(".dateBitcontain .row2").each(function() {
        let rows = $(this).children().clone();
        $(this).append(rows);
    });
    $(".dateBitcontain .row3").each(function() {
        let rows = $(this).children().clone();
        $(this).append(rows);
    });


})();

// 柱状折线图
(function() {
    let chartDom = document.querySelector(".dateUsermap");
    let myChart = echarts.init(chartDom);
    let option;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['人次', '金额'],
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            }
        },
        grid: {
            width: 'auto',
            height: 'auto'
        },
        xAxis: [{
            type: 'category',
            data: [
                '05-01',
                '5-02',
                '05-03',
                '05-04',
                '05-05',
                '05-06',
                '05-07',
                '05-08',
                '05-09',
                '05-10'
            ],
            axisPointer: {
                type: 'shadow'
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }

        }],
        yAxis: [{
                type: 'value',
                name: '人次',
                min: 0,
                max: 20000,
                interval: 4000,
                axisLabel: {
                    formatter: '{value} '
                },
                nameTextStyle: {
                    color: "#fff"
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }

            },

            {
                type: 'value',
                name: '金额',
                min: 0,
                max: 200000,
                interval: 40000,
                axisLabel: {
                    formatter: '{value} ￥'
                },
                nameTextStyle: {
                    color: "#fff"
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }

            }
        ],
        series: [{
                name: '人次',
                type: 'bar',
                tooltip: {
                    valueFormatter: function(value) {
                        return value + '/人';
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#5470c6'
                    }
                },
                data: [10068, 5250, 9040, 5050, 7051, 7685, 13560, 16220, 8266, 9008]
            },

            {
                name: '金额',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function(value) {
                        return value + '元';
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#97d46d'
                    }
                },
                data: [
                    50000, 25124, 98756, 54658, 65894, 69521, 153658, 186542, 68542, 99215
                ],
                label: {
                    color: '#fff'
                }




            }
        ]
    };

    option && myChart.setOption(option);

})();

// 餐别饼状分布图  切换
(function() {
    $('.main_right .tabs').on('click', 'a', function() {
        $(this).addClass('tabscurrent').siblings().removeClass('tabscurrent');
        let index = $(this).index();
        console.log(index);
        console.log($(".main_right .dateOrdercontain div[class^=dateOrdertimetext]"));
        $(".main_right .dateOrdercontain div[class^=dateOrdertimetext]").eq(index).show().siblings("div").hide();

    })
})();
(function() {
    let chartDom = document.querySelector(".dateOrdertimetext");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center',
            textStyle: {
                color: "inherit"
            }

        },
        series: [{
            name: '餐别',
            type: 'pie',
            top: '0%',
            width: 'auto',
            height: 'auto',
            // bottom: '10%',
            radius: ['0%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 4,
                // borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 2356326442542, name: '早餐' },
                { value: 8520115481454, name: '午餐' },
                { value: 3358612548154, name: '晚餐' },
                { value: 1568154845121, name: '夜宵' }
            ],
            color: ['#9fe080', '#ee6666', '#ffdc60', '#5470c6'],
            label: {
                color: "inherit"
            },
            labelLine: {
                length: 8,
                length: 2
            }


        }]
    };

    option && myChart.setOption(option);

})();
(function() {
    let chartDom = document.querySelector(".dateOrdertimetext1");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center',
            textStyle: {
                color: "inherit"
            }

        },
        series: [{
            name: '餐别',
            type: 'pie',
            top: '0%',
            width: 'auto',
            height: 'auto',
            // bottom: '10%',
            radius: ['0%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 4,
                // borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 235632644254, name: '早餐' },
                { value: 552011548145, name: '午餐' },
                { value: 435861254814, name: '晚餐' },
                { value: 256815484521, name: '夜宵' }
            ],
            color: ['#9fe080', '#ee6666', '#ffdc60', '#5470c6'],
            label: {
                color: "inherit"
            },
            labelLine: {
                length: 8,
                length: 2
            }


        }]
    };

    option && myChart.setOption(option);

})();
(function() {
    let chartDom = document.querySelector(".dateOrdertimetext2");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center',
            textStyle: {
                color: "inherit"
            }

        },
        series: [{
            name: '餐别',
            type: 'pie',
            top: '0%',
            width: 'auto',
            height: 'auto',
            // bottom: '10%',
            radius: ['0%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 4,
                // borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 23563264425, name: '早餐' },
                { value: 95201154814, name: '午餐' },
                { value: 63586125154, name: '晚餐' },
                { value: 25681545121, name: '夜宵' }
            ],
            color: ['#9fe080', '#ee6666', '#ffdc60', '#5470c6'],
            label: {
                color: "inherit"
            },
            labelLine: {
                length: 8,
                length: 2
            }


        }]
    };

    option && myChart.setOption(option);

})();
(function() {
    let chartDom = document.querySelector(".dateOrdertimetext3");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center',
            textStyle: {
                color: "inherit"
            }

        },
        series: [{
            name: '餐别',
            type: 'pie',
            top: '0%',
            width: 'auto',
            height: 'auto',
            // bottom: '10%',
            radius: ['0%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 4,
                // borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 2632642, name: '早餐' },
                { value: 8581454, name: '午餐' },
                { value: 6548154, name: '晚餐' },
                { value: 1845121, name: '夜宵' }
            ],
            color: ['#9fe080', '#ee6666', '#ffdc60', '#5470c6'],
            label: {
                color: "inherit"
            },
            labelLine: {
                length: 8,
                length: 2
            }


        }]
    };

    option && myChart.setOption(option);

})();


// 各行排行榜折线图
(function() {
    let chartDom = document.querySelector('.dateDistrationtext');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: '0%',
            data: ['食堂', '超市', '开水', '淋浴'],
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            }
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '20%',
            containLabel: true
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
                name: '食堂',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: [120, 132, 101, 134, 90, 230, 210, 120, 192, 201, 434, 290, 330, 310]
            },
            {
                name: '超市',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: [
                    220, 182, 191, 234, 290, 330, 310, 220, 332, 201, 234, 245, 330, 210
                ]
            },
            {
                name: '开水',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: [
                    150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230, 210
                ]
            },
            {
                name: '淋浴',
                type: 'line',
                // stack: 'Total',
                smooth: true,
                data: [
                    320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210
                ]
            }
        ]
    };

    option && myChart.setOption(option);

})();

// 动态排行柱状图
(function() {
    let chartDom = document.querySelector('.datelistMap');
    let myChart = echarts.init(chartDom);
    let option;

    const data = [];
    for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
    }
    option = {
        xAxis: {
            max: 'dataMax',

        },
        yAxis: {
            type: 'category',
            data: ['一食堂', '二食堂', '三食堂', '四食堂', '五食堂'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 2 // only the largest 3 bars will be displayed
        },
        grid: {
            left: '0%',
            right: '15%',
            bottom: '5%',
            top: '20%',
            containLabel: true
        },
        series: [{
            realtimeSort: true,
            name: '消费额',
            type: 'bar',
            data: data,
            label: {
                show: true,
                position: 'right',
                valueAnimation: true
            },

        }],
        legend: {
            show: true,
            textStyle: {
                color: "rgba(255, 255, 255, 1)"
            }

        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        textStyle: {
            color: "rgba(255, 255, 255, 1)"
        }
    };

    function run() {
        for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
                data[i] += Math.round(Math.random() * 200);
            } else {
                data[i] += Math.round(Math.random() * 200);
            }
        }
        myChart.setOption({
            series: [{
                type: 'bar',
                data
            }]
        });
    }
    setTimeout(function() {
        run();
    }, 0);
    setInterval(function() {
        run();
    }, 3000);

    option && myChart.setOption(option);

})()

mymap.js

(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".dateMaptext"));
    // 2. 指定配置和数据
    var geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028]
    };

    var XAData = [
        [{ name: "西安" }, { name: "北京", value: 100 }],
        [{ name: "西安" }, { name: "上海", value: 100 }],
        [{ name: "西安" }, { name: "广州", value: 100 }],
        [{ name: "西安" }, { name: "西宁", value: 100 }],
        [{ name: "西安" }, { name: "拉萨", value: 100 }]
    ];

    var XNData = [
        [{ name: "西宁" }, { name: "北京", value: 100 }],
        [{ name: "西宁" }, { name: "上海", value: 100 }],
        [{ name: "西宁" }, { name: "广州", value: 100 }],
        [{ name: "西宁" }, { name: "西安", value: 100 }],
        [{ name: "西宁" }, { name: "银川", value: 100 }]
    ];

    var YCData = [
        [{ name: "银川" }, { name: "北京", value: 100 }],
        [{ name: "银川" }, { name: "潍坊", value: 100 }],
        [{ name: "银川" }, { name: "哈尔滨", value: 100 }]
        // [{ name: "银川" }, { name: "新疆", value: 100 }]
    ];

    // var XJData = [
    //     [{ name: "新疆" }, { name: "北京", value: 100 }],
    //     [{ name: "新疆" }, { name: "潍坊", value: 100 }],
    //     [{ name: "新疆" }, { name: "西安", value: 100 }]
    // ];
    var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
    //var planePath = 'arrow';
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];

            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                    value: dataItem[1].value
                });
            }
        }
        return res;
    };

    var color = ["#a6c84c", "#ffa022", "#46bee9", "#46bee9"]; //航线的颜色
    var series = [];
    [
        ["西安", XAData],
        ["西宁", XNData],
        ["银川", YCData]
        // ["新疆", XJData]
    ].forEach(function(item, i) {
        series.push({
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: "red", //arrow箭头的颜色
                symbolSize: 3
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            name: item[0] + " Top3",
            type: "lines",
            zlevel: 2,
            symbol: ["none", "arrow"],
            symbolSize: 10,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        }, {
            name: item[0] + " Top3",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
                brushType: "stroke"
            },
            label: {
                normal: {
                    show: true,
                    position: "right",
                    formatter: "{b}"
                }
            },
            symbolSize: function(val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i]
                },
                emphasis: {
                    areaColor: "#2B91B7"
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
    });
    var option = {
        tooltip: {
            trigger: "item",
            formatter: function(params, ticket, callback) {
                if (params.seriesType == "effectScatter") {
                    return "线路：" + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return (
                        params.data.fromName +
                        ">" +
                        params.data.toName +
                        "<br />" +
                        params.data.value
                    );
                } else {
                    return params.name;
                }
            }
        },

        geo: {
            map: "china",
            label: {
                emphasis: {
                    show: true,
                    color: "#fff"
                }
            },
            roam: true,
            //   放大我们的地图
            zoom: 1.2,
            itemStyle: {
                normal: {
                    areaColor: "#142957",
                    borderColor: "#195BB9",
                    borderWidth: 1
                },
                emphasis: {
                    areaColor: "#2B91B7"
                }
            }
        },
        series: series
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
})();