数据可视化Echart写的一个小项目

最新推荐文章于 2024-10-30 15:22:22 发布

Yee（️）20

最新推荐文章于 2024-10-30 15:22:22 发布

阅读量152

点赞数

文章标签：信息可视化 echarts 前端

本文链接：https://blog.csdn.net/qq_53682646/article/details/131271104

版权

介绍：这个小项目是用来echart以及jQuery

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>Echart可视化</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header>
        <h1>可视化展板-ECharts</h1>
        <div class="showTime">当前时间为：2020年3月17-0时54分14秒</div>
    </header>
    <section class="minbox">
        <div class="column">
            <div class="panel">
                <div class="bar">
                    <h2>柱状图-就业行业</h2>
                    <div class="chart"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <div class="line1">
                    <h2>折线图-就业行业<a id="" href="javascript:;">2020</a><a href="javascript:;">2023</a></h2>

                    <div class="chart"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <div class="pie1">
                    <h2>饼状图-就业行业</h2>
                    <div class="chart"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <!-- no模块 -->
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>12</li>
                        <li>13</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <!-- 地图模块 -->
            <div class="map">
                <div class="map-img"></div>
                <div class="mapbg1"></div>
                <div class="mapbg2"></div>
                .
            </div>

        </div>
        <div class="column">
            <div class="panel">
                <div class="bar2">
                    <h2>柱状图-就业行业</h2>
                    <div class="chart"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <div class="line2">
                    <h2>折线图-就业行业</h2>
                    <div class="chart"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <div class="pie2">
                    <h2>饼状图-就业行业</h2>
                    <div class="chart"></div>
                </div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
</body>
<script>
    var t = null;
    t = setTimeout(time, 1000);//開始运行
    function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行     
    }
</script>
<script src="./js/flexible.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/index.js"></script>

</html>

// 利用立即执行函数，这样可以解决命名冲突的问题
(function () {
    var myEchart = echarts.init(document.querySelector(".bar .chart"))
    var option = {
        color: ["rgb(47,137,207)"],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0%',
            top: "10px",
            right: '0%',
            bottom: '4%',
            // 刻度标签
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['旅游行业', '教育培训', '游戏行业', '医疗行业', '电商行业', '社交行业', '金融行业'],
                axisTick: {
                    alignWithLabel: true
                },
                // 修改刻度标签样式
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                // 不显示x轴样式
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12'
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        // 修改y轴大小
                        width: 2
                    }
                },
                // y轴分割线样式设置
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            },

        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                // 柱子宽度
                barWidth: '35%',
                data: [200, 300, 300, 900, 1500, 1200, 220],
                // 修改柱子样式
                itemStyle: {
                    // 给他设置圆角
                    barBorderRadius: 5
                }
            }
        ]
    };
    myEchart.setOption(option);
    // 添加一个监听器，屏幕发生变化，则柱形图也变化
    window.addEventListener("resize", function () {
        myEchart.resize();
    })
})();

// 第二个柱状图
(function () {
    // 颜色数组
    var mycolor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    var myEchart = echarts.init(document.querySelector(".bar2 .chart"));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            top: '10%',
            left: '22%',
            bottom: '10%',
            // containLabel: true
        },
        xAxis: {
            show: false
        },
        yAxis: [{
            type: 'category',
            data: ['NODE', 'Vue', 'javascript', 'CSS3', 'HTML5'],
            axisLabel: {
                color: "white",
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        {
            type: 'category',
            data: ['664', '793', '610', '350', '702'],
            axisLabel: {
                color: "white",
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: [
            {
                type: 'bar',
                yAxisIndex: 0,
                data: [70, 35, 61, 79, 66],
                itemStyle: {
                    barBorderRadius: 20,
                    // barBorder: "2px solid blue"
                },
                barWidth: 10,
                yAxisIndex: 0,
                barCategoryGap: 50,
                label: {
                    show: true,
                    position: "inside",
                    formatter: "{c} %"
                },
                color: function (params) {
                    return mycolor[params.dataIndex]
                }
            },
            {
                type: 'bar',
                name: '框',
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                yAxisIndex: 1,
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    barBorderRadius: 20,
                    borderWidth: 3
                },

            }
        ]
    };

    myEchart.setOption(option);
    window.addEventListener("resize", function () {
        myEchart.resize();
    })
})();

// 第一个折线图
(function () {
    var yearData = [
        {
            year: '2020',
            data: [[120, 132, 101, 134, 90, 230, 210, 200, 190, 100, 90, 80], [220, 182, 191, 234, 290, 330, 310, 101, 134, 90, 230, 90]]
        },
        {
            year: '2023',
            data: [[100, 90, 80, 230, 130, 203, 201, 231, 201, 200, 199, 90], [120, 180, 200, 150, 100, 90, 80, 300, 200, 190, 100, 200]]
        }
    ];
    var MyEchart = echarts.init(document.querySelector(".line1 .chart"))
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        // 图例组件
        legend: {
            data: ['新增粉丝人数', '新增游客人数'],
            // 文字颜色
            textStyle: {
                color: '#4c9bfd'
            },
            right: '10%',
        },
        grid: {
            left: '0%',
            top: "30px",
            right: '4%',
            bottom: '4%',
            // 刻度标签
            containLabel: true,
            show: true,
            // 边框颜色
            borderColor: "#012f4a"
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLabel: {
                color: "rgba(255,255,255,.6)",
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: "rgba(255,255,255,.6)",
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: "#012f4a"
                }
            }
        },
        series: [
            {
                name: '新增粉丝人数',
                type: 'line',
                // stack: 'Total',stack为是否数据层叠
                // smooth设置是否为平滑显示
                smooth: true,
                data: yearData[0].data[0]
            },
            {
                name: '新增游客人数',
                type: 'line',
                smooth: true,
                // stack: 'Total',
                data: yearData[0].data[1],
                itemStyle: {
                    color: '#00c1de'
                }
            }
        ]
    };

    MyEchart.setOption(option);
    $(".panel .line1 h2").on("click", 'a', function () {
        $(this).siblings().css("color", "white");
        $(this).css("color", "red");
        option.series[0].data = yearData[$(this).index()].data[0];
        option.series[1].data = yearData[$(this).index()].data[1];
        // 要重新渲染一次
        MyEchart.setOption(option);
    });
    window.addEventListener("resize", function () {
        MyEchart.resize();
    })
})();

// 第二个折线图
(function () {
    var myEchart = echarts.init(document.querySelector(".panel .line2 .chart"));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Email', 'Union Ads'],
            textStyle: {
                color: "rgba(255,255,255,.6)"
            }
        },
        grid: {
            left: '0%',
            top: "30px",
            right: '4%',
            bottom: '4%',
            // 刻度标签
            containLabel: true,
            show: true,
            // 边框颜色
            borderColor: "#012f4a"
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'],
                axisLabel: {
                    color: "rgba(255,255,255,.6)"
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    color: "rgba(255,255,255,.6)"
                },
                axisTick: {
                    show: false,
                }
            }
        ],
        series: [
            {
                name: 'Email',
                type: 'line',
                smooth: true,
                showSymbol: false,
                areaStyle: {

                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1,132,213,0.6)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1,132,213,0.4)"
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0,0,0,.1)"

                },
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: '#00c1de',
                    borderColor: "rgba(221, 220, 107, .1) ",
                    borderWidth: 12,
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210, 200, 180, 100]
            },
            {
                name: 'Union Ads',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                showSymbol: false,
                itemStyle: {
                    color: 'green',
                    borderColor: "rgba(221,220,107,.1)",
                    borderWidth: 12,
                },
                areaStyle: {

                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: "rgba(1,132,213,0.6)"
                            },
                            {
                                offset: 0.8,
                                color: "rgba(1,132,213,0.4)"
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0,0,0,.1)"

                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310, 400, 350, 300]
            }
        ]
    };
    myEchart.setOption(option);
    window.addEventListener("resize", function () {
        myEchart.resize();
    })
})();
(function () {
    var myEchart = echarts.init(document.querySelector(".pie1 .chart"));
    var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '0%',
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: '12'
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                // 内外圆半径
                radius: ['35%', '60%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'

                },
                // 修改位置
                center: ['50%', '40%'],
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: 40,
                //         fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };
    myEchart.setOption(option);
    window.addEventListener("resize", function () {
        myEchart.resize();
    })
})();
// 第二个饼图
(function () {
    var myEchart = echarts.init(document.querySelector(".panel .pie2 .chart"));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                fontSize: 12,
                color: "white",
            }
        },

        series: [

            {
                // 通过面积来表示占比大小
                name: 'Area Mode',
                type: 'pie',
                radius: [20, 50],
                center: ['50%', '40%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    { value: 30, name: 'rose 1' },
                    { value: 28, name: 'rose 2' },
                    { value: 26, name: 'rose 3' },
                    { value: 24, name: 'rose 4' },
                    { value: 22, name: 'rose 5' },
                    { value: 20, name: 'rose 6' },
                    { value: 18, name: 'rose 7' }
                ]
            }
        ]
    };
    myEchart.setOption(option);
})()

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: electronicFont;
  src: url('../font//DS-DIGIT.TTF');
}
body {
  background: url('../images/bg.jpg') no-repeat;
  line-height: 1.15;
}
header {
  height: 1.25rem;
  background: url('../images/head_bg.png') no-repeat;
  background-size: 100% 100%;
}
header h1 {
  color: white;
  text-align: center;
  line-height: 1rem;
  font-size: 0.475rem;
}
header .showTime {
  position: absolute;
  right: 0.375rem;
  top: 0;
  line-height: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.25rem;
}
.panel {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url('../images/line\(1\).png') no-repeat;
  padding: 0 0.1875rem 0.5rem 0.1875rem;
  margin-bottom: 0.1875rem;
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.125rem;
  height: 0.125rem;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  content: '';
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.125rem;
  height: 0.125rem;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  content: "";
}
.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.125rem;
  height: 0.125rem;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  content: '';
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.125rem;
  height: 0.125rem;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  content: "";
}
.panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  color: white;
  font-size: 0.25rem;
  text-align: center;
  font-weight: 400;
}
.panel .chart {
  height: 3rem;
  width: 100%;
}
.panel a {
  text-decoration: none;
  color: white;
  margin-left: 10px;
}
.minbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  padding: 0.125rem 0.125rem 0 0.125rem;
}
.minbox .column {
  flex: 3;
}
.minbox .column:nth-child(2) {
  flex: 5;
}
.minbox .column:nth-child(2) .no {
  padding: 0.125rem;
  background-color: rgba(101, 132, 226, 0.1);
  margin: 0 0.125rem 0.1875rem;
}
.minbox .column:nth-child(2) .no .no-hd {
  position: relative;
  width: 100%;
  border: 1px solid rgba(135, 206, 235, 0.3);
  height: 1rem;
  line-height: 1rem;
  color: #ffeb7b;
  font-family: electronicFont;
}
.minbox .column:nth-child(2) .no .no-hd::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0.3125rem;
  height: 10px;
  border-top: 1px solid skyblue;
  border-left: 1px solid skyblue;
}
.minbox .column:nth-child(2) .no .no-hd::after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 0;
  width: 0.3125rem;
  height: 10px;
  border-bottom: 1px solid skyblue;
  border-right: 1px solid skyblue;
}
.minbox .column:nth-child(2) .no .no-hd li {
  position: relative;
  float: left;
  list-style: none;
  width: 50%;
  text-align: center;
  font-size: 0.875rem;
}
.minbox .column:nth-child(2) .no .no-hd li:nth-child(1)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 0.3125rem;
  border-left: 1px solid rgba(135, 206, 235, 0.3);
}
.minbox .column:nth-child(2) .no .no-bd {
  color: rgba(255, 255, 255, 0.5);
  height: 0.5rem;
  line-height: 0.625rem;
}
.minbox .column:nth-child(2) .no .no-bd li {
  float: left;
  width: 50%;
  text-align: center;
  list-style: none;
}
.map {
  position: relative;
  height: 10.125rem;
  z-index: 0;
}
.map .map-img,
.map .mapbg1,
.map .mapbg2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.6;
}
.map .map-img {
  width: 6.475rem;
  height: 6.475rem;
  background: url(../images/map.png);
  background-size: contain;
  opacity: 0.3;
}
.map .mapbg1 {
  width: 8.0375rem;
  height: 8.0375rem;
  background: url('../images/lbx.png');
  background-size: contain;
  z-index: 10;
  animation: mbg1 15s linear infinite;
}
@keyframes mbg1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.map .mapbg2 {
  width: 7.075rem;
  height: 7.075rem;
  background: url('../images/jt.png');
  background-size: contain;
  animation: mbg2 15s linear infinite;
}
@keyframes mbg2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}