web前端可视化项目

目录

一、什么是可视化

二、可视化项目的详解

1.可视化项目图片

2.左边部分

1.监控部分

2.点位部分

3.中间部分

1.地图部分

2.统计部分

4.右边部分

1.销售统计

2.折线图部分

3.渠道部分

4.热榜部分

---

一、什么是可视化

        可视化是利用计算机图形学和 图像处理 技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的理论、方法和技术。

        可视化能够通过图像图像来更好的查看数据。

        可视化项目通常在业务报告，地铁线路图，医院的大屏，气象地图，金融投资等等一些地方可以看到。

二、可视化项目的详解

1.可视化项目图片

        该项目用到了一个ECharts开源可视化库，底层依赖矢量图形库，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

        ECharts教程：快速上手 - 使用手册 - Apache ECharts

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

 还有开源可视化图库网站：https://www.isqqw.com/

这里适配了三种屏幕尺寸：

1024px适配小屏幕

1024px~1920px适配pc端

1920px适配大屏幕

项目的布局分为上下两部分，上为logo标题，下位可视化主体部分

可视化主体部分又分为左中右三部分

2.左边部分

左边部分分为三个盒子，其中重点是监控区域和点位分布图区域

1.监控部分

<style>
    .myfaultlist {
                            margin-left: 1vw;
                            margin-top: -1vw;
                            height: 20vw;
                            overflow: hidden;
                            .faultmar {
                                animation: animat 15s linear infinite;
                                &:hover{
                                    animation-play-state: paused;
                                }
                                
                                .row {
                                    display: flex;
                                    padding: 0.7vw 1vw;

                                    .col {
                                        font-size: 0.08rem;
                                    }
                                }
                            }
                        }
    @keyframes animat {
    0%{
        transform:translateY(0);
    }
    100%{
        transform: translateY(-50%);
    }
}
<style>
<div class="fault">
                    <div class="faultbtn">
                        <a href="javascript:;" class="active">故障设备监控</a>
                        <a href="javascript:;">异常设备监控</a>
                    </div>
                    <div class="faultlist" style="display: block;">
                        <div class="faulttitlebg"></div>
                        <div class="faulttitle">
                            <div class="col">故障时间</div>
                            <div class="col">设备地址</div>
                            <div class="col">异常代码</div>
                        </div>
                        <div class="myfaultlist">
                            <div class="faultmar">
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">11北京市昌平西路金燕龙写字楼</div>
                                    <div class="col">1000001</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190601</div>
                                    <div class="col">北京市昌平区城西路金燕龙写字楼</div>
                                    <div class="col">1000002</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190704</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000003</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建路金燕龙写字楼</div>
                                    <div class="col">1000004</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000005</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000006</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建西路金燕龙写字楼</div>
                                    <div class="col">1000007</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000008</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000009</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180710</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000010</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="faultlist">
                        <div class="faulttitlebg"></div>
                        <div class="faulttitle">
                            <div class="col">异常时间</div>
                            <div class="col">设备地址</div>
                            <div class="col">异常代码</div>
                        </div>
                        <div class="myfaultlist">
                            <div class="faultmar">
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">11北京市昌平西路金燕龙写字楼</div>
                                    <div class="col">1000001</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190601</div>
                                    <div class="col">北京市昌平区城西路金燕龙写字楼</div>
                                    <div class="col">1000002</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190704</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000003</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建路金燕龙写字楼</div>
                                    <div class="col">1000004</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000005</div>
                                </div>
                                <div class="row">
                                    <div class="col">20190701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000006</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建西路金燕龙写字楼</div>
                                    <div class="col">1000007</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000008</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180701</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000009</div>
                                </div>
                                <div class="row">
                                    <div class="col">20180710</div>
                                    <div class="col">北京市昌平区建材城西路金燕龙写字楼</div>
                                    <div class="col">1000010</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<script>
$(function () {
    $(".fault .faultbtn").on("click", "a", function () {
        $(this).addClass("active").siblings("a").removeClass("active");
        console.log($(this).index());
        // 选取对应索引号的faultlist
        console.log($(".faultlist").index());
        $(".faultlist").eq($(this).index()).show().siblings(".faultlist").hide();
    });
    $(".faultmar").each(function () {
        console.log($(this));
        var rows = $(this).children().clone();
        $(this).append(rows);
    });
    
})
</script>

2.点位部分

$(function () {
    var myChart = echarts.init(document.querySelector('.distributionimg'))
    // 2. 指定配置项和数据
    var option = {
        tooltip: {
            // trigger 触发方式。 非轴图形，使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表series系列图表名称
            // b 代表series数据名称 data 里面的name
            // c 代表series数据值 data 里面的value
            // d代表 当前数据/总数据的比例
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 注意颜色写的位置
        color: [
            '#006cff',
            '#60cda0',
            '#ed8884',
            '#ff9f7f',
            '#0096ff',
            '#9fe6b8',
            '#32c5e9',
            '#1d9dff'
        ],
        series: [
            {
                // 图表名称
                name: '点位统计',
                // 图表类型
                type: 'pie',
                // 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
                // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
                // 如果radius是百分比则必须加引号
                radius: ['10%', '70%'],
                // 图表中心位置 left 50% top 50% 距离图表DOM容器
                center: ['50%', '50%'],
                // radius 半径模式，另外一种是 area 面积模式
                roseType: 'radius',
                // 数据集 value 数据的值 name 数据的名称
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 6,
                    // 连接到文字的线长度
                    length2: 8
                }
            }
        ]
    }
    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option)
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize()
    })
})

3.中间部分

中间部分分为地图部分和统计部分。

中间部分的中国地图还要用到一个插件：https://www.isqqw.com/dep/echarts/map/js/china.js

1.地图部分

$(function () {
    var myChart = echarts.init(document.querySelector('.map'))
    const 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';
    const points = [
        { value: [116.405285, 39.904989], itemStyle: { color: '#46BEE9' } },//北京
        { value: [113.54909, 23.198951], itemStyle: { color: '#FFA022' } },//广东
        { value: [91.132212, 29.660361], itemStyle: { color: '#A6C84C' } },//西藏
        { value: [126.642464, 45.756967], itemStyle: { color: '#46BEE9' } },//黑龙江
        { value: [120.617733, 31.792818], itemStyle: { color: '#FFA022' } },//上海
        { value: [101.617733, 35.792818], itemStyle: { color: '#A6C84C' } },//青海
        { value: [106.317733, 37.792818], itemStyle: { color: '#FFA022' } },//宁夏
        { value: [108.317733, 33.792818], itemStyle: { color: '#FFA022' } },//陕西
        { value: [119.317733, 36.792818], itemStyle: { color: '#46BEE9' } },//山东
    ]
    option = {
        geo: {
            map: 'china',
            roam: true, // 是否开启放大缩小/拖拽功能
            zoom: 1.2, // 缩放比列
            layoutCenter: ['50%', '50%'], // 地图中心点位置
            layoutSize: '100%',
            label: {
                show: true,
                color: '#fff'
            },
            itemStyle: {
                areaColor: '#12235c',
                borderColor: '#2ab8ff',
                borderWidth: .5,
                shadowColor: 'rgba(0,54,255, 0.4)',
                shadowBlur: 100
            },
            emphasis: { //区域激活时的样式
                itemStyle: {
                    areaColor: '#02102b',
                },
                label: {
                    color: "#fff"
                }
            }
        },
        series: [ // 添加迁移线数据
            {
                type: 'lines',
                data: [ // 配置多个点的数据
                    {
                        coords: [
                            [106.317733, 37.792818],
                            [116.405285, 39.904989]
                        ]
                    },
                    {
                        coords: [
                            [108.317733, 33.792818],
                            [113.54909, 23.198951]
                        ]
                    },
                    {
                        coords: [
                            [108.317733, 33.792818],
                            [120.617733, 31.792818]
                        ]
                    },
                    {
                        coords: [
                            [108.317733, 33.792818],
                            [101.617733, 35.792818]
                        ]
                    },
                    {
                        coords: [
                            [108.317733, 33.792818],
                            [91.132212, 29.660361]
                        ]
                    },
                    {
                        coords: [
                            [108.317733, 33.792818],
                            [116.405285, 39.904989]
                        ]
                    },
                    {
                        coords: [
                            [91.132212, 29.660361],
                            [126.642464, 45.756967]
                        ]
                    },
                    {
                        coords: [
                            [91.132212, 29.660361],
                            [101.617733, 35.792818]
                        ]
                    },
                    {
                        coords: [
                            [91.132212, 29.660361],
                            [119.317733, 36.792818]
                        ]
                    },
                    {
                        coords: [
                            [101.617733, 35.792818],
                            [116.405285, 39.904989]
                        ]
                    },
                    {
                        coords: [
                            [101.617733, 35.792818],
                            [106.317733, 37.792818]
                        ]
                    },
                    {
                        coords: [
                            [101.617733, 35.792818],
                            [120.617733, 31.792818]
                        ]
                    },
                    {
                        coords: [
                            [101.617733, 35.792818],
                            [113.54909, 23.198951]
                        ]
                    },
                    {
                        coords: [
                            [101.617733, 35.792818],
                            [108.317733, 33.792818]
                        ]
                    }
                ],
                effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    // symbol: 'arrow', //箭头图标
                    symbol: planePath,
                    // 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjg5NzY1NjcyMTMyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU0MTkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTE4NC4yMTU1MzggNjc5LjEzNTg4NGwxNjEuNDM1OTAyIDE2MC42MzY0MDNjOC43OTA0MzEgOC43OTA0MzEgMjQuNzc0MzI0IDEzNS44NjIwNzkgMTUuOTgzODkzIDE0NC42NTI1MWwtMzEuOTY3Nzg2IDMxLjk2Nzc4N2MtOC43OTA0MzEgOC43OTA0MzEtMjMuMTc3MzU2IDguNzkwNDMxLTMxLjk2Nzc4NyAwbC0xNi43ODMzOTMtMTYuNzgzMzkyLTEyNy44NjkxMTctMTI3Ljg2OTExOGMtNTEuOTQ3MTQ2LTUxLjk0NzE0Ni0xMDQuNjkzNzkxLTEwMy44OTQyOTItMTI5LjQ2ODExNi0xMjkuNDY4MTE2bC0xNS45ODM4OTMtMTUuOTgzODkzYy04Ljc5MDQzMS04Ljc5MDQzMS04Ljc5MDQzMS0yMy4xNzczNTYgMC0zMS45Njc3ODdsMzEuOTY3Nzg3LTMxLjk2Nzc4NmM4Ljc5MDQzMS04Ljc5MDQzMSAxMzUuODYwMDUgNy45OTI5NjEgMTQ0LjY1MjUxIDE2Ljc4MzM5MnoiIGZpbGw9IiNEOERCREIiIHAtaWQ9IjU0MjAiPjwvcGF0aD48cGF0aCBkPSJNMjQ0LjE1MzYxNiA5Ni41MzAzNzhjLTIzLjk3NDgyNSAwLTQzLjk1NjIxNCAxOS45NzkzNTktNDMuOTU2MjE0IDQzLjk1NjIxNHMxOS45NzkzNTkgNDMuOTU2MjE0IDQzLjk1NjIxNCA0My45NTYyMTQgNDMuOTU2MjE0LTE5Ljk3OTM1OSA0My45NTYyMTQtNDMuOTU2MjE0LTE5Ljk4MTM4OS00My45NTYyMTQtNDMuOTU2MjE0LTQzLjk1NjIxNHogbTEzNS44NjIwNzggNDcuOTQ5NjUxYy0yMy45NzQ4MjUgMC00My45NTYyMTQgMTkuOTc5MzU5LTQzLjk1NjIxNCA0My45NTYyMTRzMTkuOTc5MzU5IDQzLjk1NjIxNCA0My45NTYyMTQgNDMuOTU2MjE0IDQzLjk1NjIxNC0xOS45NzkzNTkgNDMuOTU2MjE0LTQzLjk1NjIxNC0xOS45ODEzODktNDMuOTU2MjE0LTQzLjk1NjIxNC00My45NTYyMTR6IG00OTkuNDkyMTAyIDQ5MS41MDExNjljMC0yMy45NzQ4MjUtMTkuOTc5MzU5LTQzLjk1NjIxNC00My45NTYyMTQtNDMuOTU2MjE0cy00My45NTYyMTQgMTkuOTc5MzU5LTQzLjk1NjIxNCA0My45NTYyMTRjMCAyMy45NzQ4MjUgMTkuOTc5MzU5IDQzLjk1NjIxNCA0My45NTYyMTQgNDMuOTU2MjE0czQzLjk1NjIxNC0xOS4xODE4OSA0My45NTYyMTQtNDMuOTU2MjE0eiBtMy45OTU0NjYgOTEuOTA1ODY1Yy0yMy45NzQ4MjUgMC00My45NTYyMTQgMTkuOTc5MzU5LTQzLjk1NjIxNCA0My45NTYyMTQgMCAyMy45NzQ4MjUgMTkuOTc5MzU5IDQzLjk1NjIxNCA0My45NTYyMTQgNDMuOTU2MjE0IDIzLjk3NDgyNSAwIDQzLjk1NjIxNC0xOS45NzkzNTkgNDMuOTU2MjE0LTQzLjk1NjIxNC0wLjAwMjAyOS0yMy45NzY4NTUtMTkuOTgxMzg5LTQzLjk1NjIxNC00My45NTYyMTQtNDMuOTU2MjE0eiIgZmlsbD0iIzY3Njc2NyIgcC1pZD0iNTQyMSI+PC9wYXRoPjxwYXRoIGQ9Ik01OTguOTkzMjA3IDI2Ny41NTYyMTFsMTU4LjIzOTkzNSAxNTguMjM5OTM1YzE3LjU4Mjg5MSAxNy41ODI4OTEgMTkxLjgwNDY5MSA1MDQuMjg3MDY2IDE3NC4yMjE4IDUyMS44Njk5NThsLTYzLjEzNjA3NSA2My4xMzYwNzRjLTE3LjU4Mjg5MSAxNy41ODI4OTEtNDUuNTUzMTgzIDE3LjU4Mjg5MS02My4xMzYwNzQgMEw0NTUuOTM3NjY2IDU2Ny4yNTA2NiAxMy4xODc2NzYgMjE5LjYwNDUzMWMtMTcuNTgyODkxLTE3LjU4Mjg5MS0xNy41ODI4OTEtNDUuNTUzMTgzIDAtNjMuMTM2MDc1bDYzLjEzNjA3NC02My4xMzYwNzRjMTcuNTgyODkxLTE3LjU4MDg2MiA1MDUuMDg2NTY1IDE1Ni42NDA5MzcgNTIyLjY2OTQ1NyAxNzQuMjIzODI5eiIgZmlsbD0iI0Q4REJEQiIgcC1pZD0iNTQyMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMDA0Ljk4MDQ0NSAxOS44MDY4NzljNDMuOTU2MjE0IDQzLjk1NjIxNCA0Ljc5NDk2NSAxNTMuNDQyOTQxLTQ3LjE1MjE4MSAyMDYuMTg5NTg2bC01NzEuNDE4NjA2IDU3MC42MTkxMDdjLTUyLjc0NjY0NSA1Mi43NDY2NDUtMjQxLjM1NTM2OSAxNzEuMDI1ODMyLTI4NS4zMDk1NTQgMTI3LjA3MTY0OHM3NC4zMjUwMDMtMjMyLjU2MjkwOSAxMjcuMDcxNjQ4LTI4NS4zMDk1NTRsNTcwLjYxOTEwNy01NzEuNDE4NjA2Qzg1MS41MzU0NzUgMTQuMjEyNDE0IDk2MS4wMjQyMzEtMjQuMTQ3MzA2IDEwMDQuOTgwNDQ1IDE5LjgwNjg3OXoiIGZpbGw9IiNFNEU3RTciIHAtaWQ9IjU0MjMiPjwvcGF0aD48cGF0aCBkPSJNMjY3LjMzMDk3MSA2NzYuNzM5NDE2TDgzNy45NTAwNzkgMTA2LjEyMDMwOGM0NC43NTM2ODQtNDQuNzUzNjg0IDEzMC4yNjc2MTUtNzkuMTE5OTY4IDE4MS40MTUyNjItNjIuMzM2NTc1LTMuMTk1OTY3LTkuNTg5OTMtNy45OTA5MzItMTcuNTgyODkxLTE0LjM4NDg5Ni0yNC43NzQzMjQtNDMuOTU2MjE0LTQzLjk1NjIxNC0xNTMuNDQ0OTctNC43OTY5OTQtMjA2LjE5MTYxNSA0Ny45NDk2NTFMMjI4LjE2OTcyMiA2MzcuNTc4MTY3QzE3NS40MjMwNzcgNjkwLjMyNDgxMiA1Ny45NDMzODkgODc4LjkzMTUwNyAxMDEuMDk4MDc1IDkyMi44ODc3MjFjNi4zOTM5NjMgNi4zOTM5NjMgMTYuNzgzMzkyIDkuNTg5OTMgMjkuNTY5Mjg5IDkuNTg5OTMgMC44MDE1MjgtNjguNzI4NTA5IDkxLjkwNzg5NC0yMTAuOTg0NTUxIDEzNi42NjM2MDctMjU1LjczODIzNXoiIGZpbGw9IiNEREUwRTAiIHAtaWQ9IjU0MjQiPjwvcGF0aD48cGF0aCBkPSJNMjgwLjExNjg2OCA0MjguOTkyMTEzbDkwLjMwODg5NiA3MC4zMjc1MDcgMjMwLjk2NTk0LTIzMC45NjU5MzktMi4zOTg0OTctMi4zOTg0OTdjLTQuNzk0OTY1LTQuNzk0OTY1LTQ5LjU0ODY0OS0yMy4xNzczNTYtMTEwLjI4ODI1NS00Ni4zNTI2ODJMMjgwLjExNjg2OCA0MjguOTkyMTEzeiIgZmlsbD0iI0M3Q0FDQSIgcC1pZD0iNTQyNSI+PC9wYXRoPjxwYXRoIGQ9Ik01MjYuMjY3MjAyIDY1Ni43NjAwNTdsMjc4LjExNjA5MiAzNTQuMDQwMDkyYzE1Ljk4Mzg5MyAxNS45ODM4OTMgNDEuNTU3NzE3IDE2Ljc4MzM5MiA1OS4xNDA2MDggMy4xOTU5NjdMNTU2LjYzNTk5MSA2MjYuMzkxMjY4bC0zMC4zNjg3ODkgMzAuMzY4Nzg5eiBtLTEyNy44NzExNDYtMTg4LjYwODcyNEw4LjM5MjcxMSAxNjIuODYyNDJjLTExLjk4ODQyNyAxNy41ODI4OTEtMTAuMzg5NDI5IDQxLjU1NzcxNyA0Ljc5NDk2NSA1Ni43NDIxMTFsMzU0LjgzOTU5MSAyNzguMTE2MDkxIDMwLjM2ODc4OS0yOS41NjkyODl6IiBmaWxsPSIjM0RCMzlFIiBwLWlkPSI1NDI2Ij48L3BhdGg+PHBhdGggZD0iTTM2OC4wMjcyNjcgNDk3LjcyMDYyMmwzMC4zNjg3ODktMjkuNTY5Mjg5LTg3LjkxMDM5OS02OC43MzA1MzktMzAuMzY4Nzg5IDI5LjU2OTI5IDg3LjkxMDM5OSA2OC43MzA1Mzh6IiBmaWxsPSIjMzhBNTkyIiBwLWlkPSI1NDI3Ij48L3BhdGg+PC9zdmc+',
                    symbolSize: 15, //图标大小
                },
                lineStyle: {
                    color: '#00eaff',
                    width: 1, //尾迹线条宽度
                    opacity: .7, //尾迹线条透明度
                    curveness: .3, //尾迹线条曲直度
                },
            },
            { // 带有涟漪特效动画的散点（气泡）图
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 1,
                rippleEffect: {
                    number: 3, // 波纹的数量。
                    period: 5, // 动画的周期，秒数。
                    scale: 17, // 动画中波纹的最大缩放比例。
                    brushType: 'fill', // 波纹的绘制方式，可选 'stroke' 和 'fill'。
                },
                symbolSize: 2,
                data: points,
            }
        ]
    };
    myChart.setOption(option)
})

2.统计部分

$(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".Charts"));
    // 2. 指定配置和数据
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }
    var option = {
        // 工具提示
        tooltip: {
            // 触发类型 经过轴触发axis 经过轴触发item
            trigger: 'axis',
            // 轴触发提示才有效
            axisPointer: {
                // 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
                type: 'shadow'
            }
        },
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1,
            [
                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                { offset: 1, color: '#0061ce' } // 1 结束颜色
            ]
        ),
        // 修改线性渐变色方式 2
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'red' // 0% 处的颜色
            }, {
                offset: 1, color: 'blue' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        },
        tooltip: {
            trigger: 'item',
            // axisPointer: { // 坐标轴指示器，坐标轴触发有效 这个模块我们此时不需要删掉即可
            // type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            // }
        },
        // 图表边界控制
        grid: {
            top: '3%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            // 图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        // 控制x轴
        xAxis: [
            {
                // 使用类目，必须有data属性
                type: 'category',
                // 使用 data 中的数据设为刻度文字
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                // 刻度设置
                axisTick: {
                    // true意思：图形和刻度居中中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false
                },
                // x坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // x坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                        // width:8, x轴线的粗细
                        // opcity: 0, 如果不想显示x轴线 则改为 0
                    }
                }
            }
        ],
        // 控制y轴
        yAxis: [
            {
                type: "value",
                axisTick: {
                    alignWithLabel: false,
                    // 把y轴的刻度隐藏起来
                    show: false
                },
                axisLabel: {
                    color: "#4c9bfd"
                },
                // y轴这条线的颜色样式
                axisLine: {
                    lineStyle: {
                        color: "rgba(0, 240, 255, 0.3)"
                        // width: 3
                    }
                },
                // y轴分割线的颜色样式
                splitLine: {
                    lineStyle: {
                        color: "rgba(0, 240, 255, 0.3)"
                    }
                }
            }
        ],
        // 控制x轴
        series: [
            {
                // 图表数据名称
                name: '用户统计',
                // 图表类型
                type: 'bar',
                // 柱子宽度
                barWidth: '60%',
                // 数据
                data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
            }
        ]
    };
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
    // 3. 把配置给实例对象
    myChart.setOption(option);
})

4.右边部分

右边部分分为四个盒子，其中分别是销售统计部分，折线图部分，渠道部分和热榜部分

1.销售统计

<div class="mylines order">
                    <div class="days">
                        <a href="#" class="active" data-key="day365">365天</a><span>|</span>
                        <a href="#" data-key="day90">90天</a><span>|</span>
                        <a href="#" data-key="day30">30天</a><span>|</span>
                        <a href="#" data-key="day1">1天</a>
                    </div>
                    <div class="data">
                        <div class="item">
                            <h4 class="h4">20,301,987</h4>
                            <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                订单量
                            </span>
                        </div>
                        <div class="item">
                            <h4 class="h4">99834</h4>
                            <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                销售额（万元）
                            </span>
                        </div>
                    </div>
                </div>
<script>
    $(function () {
    // 1. 准备数据
    var data = {
        day365: { orders: '20,301,987', amount: '99834' },
        day90: { orders: '301,987', amount: '9834' },
        day30: { orders: '1,987', amount: '3834' },
        day1: { orders: '987', amount: '834' }
    }
    // 获取显示 订单数量 容器
    var $h4Orders = $('.order h4:eq(0)')
    // 获取显示 金额数量 容器
    var $h4Amount = $('.order h4:eq(1)')
    $('.order').on('click', '.days a', function () {
        // 2. 点击切换激活样式
        $(this).addClass('active').siblings().removeClass('active')
        // 3. 点击切换数据
        var currdata = data[this.dataset.key]
        $h4Orders.html(currdata.orders)
        $h4Amount.html(currdata.amount)
    })
    // 4. 开启定时器切换数据
    var index = 0
    var $allTab = $('.order .days a')
    setInterval(function () {
        index++
        if (index >= 4) index = 0
        $allTab.eq(index).click()
    }, 5000)
})
</script>

2.折线图部分

$(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".saleimg"));
    // 2. 指定配置和数据
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }
    var option = {
        tooltip: {
            trigger: "axis"
        },
        legend: {
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月',
                '11月', '12月'],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // 文本颜色
            },
            axisLine: {
                show: false // 去除轴线
            },
            boundaryGap: false // 去除轴内间距
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        color: ['#00f2f1', '#ed3f35'],
        series: [{
            name: '预期销售额',
            data: data.year[0],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#00f2f1'
            }
        }, {
            name: '实际销售额',
            data: data.year[1],
            type: 'line',
            smooth: true,
            itemStyle: {
                color: '#ed3f35'
            }
        }]
    }
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);
    $('.sales').on('click', '.salecaption a', function () {
        // 样式
        $(this).addClass('active').siblings().removeClass('active')
        // currData 当前对应的数据
        // this.dataset.type 标签上的data-type属性值，对应data中的属性
        var currData = data[this.dataset.type]
        // 修改图表1的数据
        option.series[0].data = currData[0]
        // 修改图表2的数据
        option.series[1].data = currData[1]
        // 重新设置数据 让图标重新渲染
        myChart.setOption(option)
    })
    var as = $(".sales .salecaption a");
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index >= 4) index = 0;
        as.eq(index).click();
    }, 1000);
    // 鼠标经过sales，关闭定时器，离开开启定时器
    $(".sales").hover(
        function () {
            clearInterval(timer);
        },
        function () {
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                if (index >= 4) index = 0;
                as.eq(index).click();
            }, 1000);
        }
    );
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})

3.渠道部分

渠道部分分两个小盒子，分别是渠道部分和进度部分

渠道部分：

$(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".rader"));
    // 2.指定配置
    var option = {
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置
            position: ["60%", "10%"]
        },
        radar: {
            indicator: [
                { name: "机场", max: 100 },
                { name: "商场", max: 100 },
                { name: "火车站", max: 100 },
                { name: "汽车站", max: 100 },
                { name: "地铁", max: 100 }
            ],
            // 修改雷达图的大小
            radius: "65%",
            shape: "circle",
            // 分割的圆圈个数
            splitNumber: 4,
            name: {
                // 修饰雷达图文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
            },
            // 分割的圆圈线条的样式
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255, 0.5)"
                }
            },
            splitArea: {
                show: false
            },
            // 坐标轴的线修改为白色半透明
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)"
                }
            }
        },
        series: [
            {
                name: "北京",
                type: "radar",
                // 填充区域的线条颜色
                lineStyle: {
                    normal: {
                        color: "#fff",
                        width: 1,
                        opacity: 0.5
                    }
                },
                data: [[90, 19, 56, 11, 34]],
                // 设置图形标记 （拐点）
                symbol: "circle",
                // 这个是设置小圆点大小
                symbolSize: 5,
                // 设置小圆点颜色
                itemStyle: {
                    color: "#fff"
                },
                // 让小圆点显示数据
                label: {
                    show: true,
                    fontSize: 10
                },
                // 修饰我们区域填充的背景颜色
                areaStyle: {
                    color: "rgba(238, 197, 102, 0.6)"
                }
            }
        ]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})

进度部分：

$(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
        series: [
            {
                type: 'pie',
                // 放大图形
                radius: ['130%', '150%'],
                // 移动下位置 套住50%文字
                center: ['48%', '80%'],
                label: {
                    normal: {
                        show: false
                    }
                },
                // 起始角度，支持范围[0, 360]
                startAngle: 180,
                hoverOffset: 0,
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: '#00B9DB' }, // 0 开始颜色
                                    { offset: 1, color: '#005fc1' } // 1 结束颜色
                                ]
                            )
                        }
                    },
                    { value: 100, itemStyle: { color: '#12274d' } },
                    { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
                ]
            }
        ],
    }
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
})

4.热榜部分

<div class="tophot panel">
                    <div class="hotlist">
                        <div class="lefthot">
                            <h4 class="h4">全国热榜</h4>
                            <ul>
                                <li>
                                    <i class="icon-cup1"
                                        style="color: #d93f36; font-size: 0.25rem; padding: 0 0.5vw;"></i>
                                    可爱多
                                </li>
                                <li>
                                    <i class="icon-cup2"
                                        style="color: #68d8fe; font-size: 0.25rem; padding: 0 0.5vw;"></i>
                                    哇哈哈
                                </li>
                                <li>
                                    <i class="icon-cup3"
                                        style="color: #4c9bfd; font-size: 0.25rem; padding: 0 0.5vw;"></i>
                                    喜之郎
                                </li>
                            </ul>
                        </div>
                        <div class="province">
                            <h4 class="h4">各省热销<i class="days">// 近30日 //</i></h4>
                            <div class="data">
                                <ul class="sup">
                                    <li class="active">
                                        <span class="city">北京</span>
                                        <span>25,179<s class="icon-up"></s></span>
                                    </li>
                                    <li>
                                        <span class="city">河北</span>
                                        <span>23,252<s class="icon-down"></s></span>
                                    </li>
                                    <li>
                                        <span class="city">上海</span>
                                        <span>20,760<s class="icon-up"></s></span>
                                    </li>
                                    <li>
                                        <span class="city">江苏</span>
                                        <span>23,252<s class="icon-down"></s></span>
                                    </li>
                                    <li>
                                        <span class="city">山东</span>
                                        <span>20,760<s class="icon-up"></s></span>
                                    </li>
                                </ul>
                                <ul class="sub">

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
<script>
        
        var hotData = [
            {
                city: '北京', // 城市
                sales: '25, 179', // 销售额
                flag: true, // 上升还是下降
                brands: [ // 品牌种类数据
                    { name: '可爱多', num: '9,086', flag: true },
                    { name: '娃哈哈', num: '8,341', flag: true },
                    { name: '喜之郎', num: '7,407', flag: false },
                    { name: '八喜', num: '6,080', flag: false },
                    { name: '小洋人', num: '6,724', flag: false },
                    { name: '好多鱼', num: '2,170', flag: true },
                ]
            },
            {
                city: '河北',
                sales: '23,252',
                flag: false,
                brands: [
                    { name: '可爱多', num: '3,457', flag: false },
                    { name: '娃哈哈', num: '2,124', flag: true },
                    { name: '喜之郎', num: '8,907', flag: false },
                    { name: '八喜', num: '6,080', flag: true },
                    { name: '小洋人', num: '1,724', flag: false },
                    { name: '好多鱼', num: '1,170', flag: false },
                ]
            },
            {
                city: '上海',
                sales: '20,760',
                flag: true,
                brands: [
                    { name: '可爱多', num: '2,345', flag: true },
                    { name: '娃哈哈', num: '7,109', flag: true },
                    { name: '喜之郎', num: '3,701', flag: false },
                    { name: '八喜', num: '6,080', flag: false },
                    { name: '小洋人', num: '2,724', flag: false },
                    { name: '好多鱼', num: '2,998', flag: true },
                ]
            },
            {
                city: '江苏',
                sales: '23,252',
                flag: false,
                brands: [
                    { name: '可爱多', num: '2,156', flag: false },
                    { name: '娃哈哈', num: '2,456', flag: true },
                    { name: '喜之郎', num: '9,737', flag: true },
                    { name: '八喜', num: '2,080', flag: true },
                    { name: '小洋人', num: '8,724', flag: true },
                    { name: '好多鱼', num: '1,770', flag: false },
                ]
            },
            {
                city: '山东',
                sales: '20,760',
                flag: true,
                brands: [
                    { name: '可爱多', num: '9,567', flag: true },
                    { name: '娃哈哈', num: '2,345', flag: false },
                    { name: '喜之郎', num: '9,037', flag: false },
                    { name: '八喜', num: '1,080', flag: true },
                    { name: '小洋人', num: '4,724', flag: false },
                    { name: '好多鱼', num: '9,999', flag: true },
                ]
            }
        ]
        var supHTML = "";
        $.each(hotData, function (index, item) {
            // console.log(item);
            supHTML += `<li><span>${item.city}</span><span class='rightlist'> ${item.sales} <s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
        });
        $(".sup").html(supHTML);
        $('.province .sup').on('mouseenter', 'li', function () {
            index = $(this).index()
            render($(this))
        })
        function render(currentEle) {
            currentEle
                .addClass("active")
                .siblings()
                .removeClass();
            // 拿到当前城市的品牌对象
            // console.log($(this).index());
            // 可以通过hotData[$(this).index()] 得到当前的城市
            // console.log(hotData[$(this).index()]);
            // 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
            // console.log(hotData[$(this).index()].brands);
            // 开始遍历品牌数组
            var subHTML = "";
            $.each(hotData[currentEle.index()].brands, function (index, item) {
                // 是对应城市的每一个品牌对象
                // console.log(item);
                subHTML += `<li><span>${item.name}</span><span class='rightlist'> ${item.num}<s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
            });
            // 把生成的6个小li字符串给 sub dom盒子
            $(".sub").html(subHTML);
        }
        var $lis = $('.province .sup li')
        // 第一个默认激活
        $lis.eq(0).mouseenter()
        var index = 0;
        var timer = setInterval(function () {
            index++;
            if (index >= 5) index = 0;
            // lis.eq(index).mouseenter();
            render($lis.eq(index));
        }, 2000);
        $(".province .sup").hover(
            // 鼠标经过事件
            function () {
                clearInterval(timer);
            },
            // 鼠标离开事件
            function () {
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    if (index >= 5) index = 0;
                    // lis.eq(index).mouseenter();
                    render(lis.eq(index));
                }, 2000);
            }
        );
    </script>