几行代码搞定大屏可视化展示（附源码）

一起学代码

于 2024-09-05 11:06:51 发布

阅读量544

点赞数 8

文章标签：信息可视化

本文链接：https://blog.csdn.net/qq_41981237/article/details/141925676

版权

随着大数据的盛行，近年来数据可视化几乎成为大小企业必做的功能

说到底，数据可视化到底是什么？数据可视化是将各类数据以各类图表的形式展现出来，最为常见的，市政部门的年度/季度/月度财政数据、民意调查数据等展示，医院各类数据展示，他们都有个共同的特点，大屏，图表数据展示等，而对于企业或个人而言，也会做出此类图标，从而较为直观的观察数据，就像这样：
在这里插入图片描述
下面附代码：

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .warp {            width: 10vw;            position: fixed;            top: 20px;            left: 20px;            text-align: center;        }
        #list {            padding: 0;            background-color: rgba(0, 0, 0, 0.5);            color: #fff;            display: none;            max-height: 90vh;            overflow-y: scroll;        }
        .item {            padding: 20px 0;            list-style: none;            cursor: pointer;        }
        .item:hover {            background-color: orange;        }        .change {            position: fixed;            top: 20px;            right: 20px;        }</style></head>
<body>    <div>        <canvas id="myChart"></canvas>    </div>    <div class="warp">        <div onclick="selectTime()">选择时间</div>        <ul id="list"></ul>    </div>    <div class="change">切换图表类型    <select name="切换图表类型" id="typeData" onchange="change()">        <option value="bar">柱状图</option>        <option value="line">折线图</option>        <option value="doughnut">饼状图</option>        <option value="radar">雷达图</option>        <option value="polarArea">极面积图</option>    </select></div>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>    <script src="./data.js"></script>
    <script>        const list = document.getElementById('list');        const typeData = document.getElementById('typeData');        let type = true        let myBubbleChart = null        let date = new Date()        console.log(typeData.value);
        function chart(result) {            const ctx = document.getElementById('myChart');
            if(myBubbleChart instanceof Chart) {                myBubbleChart.destroy();            }            const plugin = {                id: 'customCanvasBackgroundColor',                beforeDraw: (chart, args, options) => {                    const { ctx } = chart;                    ctx.save();                    ctx.globalCompositeOperation = 'destination-over';                    ctx.fillStyle = options.color || '#99ffff';                    ctx.fillRect(0, 0, chart.width, chart.height);                    ctx.restore();                }            };            myBubbleChart = new Chart(ctx, {                type: typeData.value,                           //图表类型，line折线图，bar柱状图，bubble气泡图，doughnut饼状图，polarArea极面积图，radar雷达图，scatter散点图                data: {                    labels: ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"],                    datasets: [{                        label: '气温 ℃',                        data: result.data,                        borderWidth: 1                    }]                },                options: {                    animations: {                        tension: {                            duration: 1000,                            easing: 'linear',                            from: 1,                            to: 0,                            loop: true                        }                    },                    scales: {                        y: {                            beginAtZero: true                        }                    },                    plugins: {                        customCanvasBackgroundColor: {                            color: '#fff',                        },                        //标题                        title: {                            display: true,                            text: '重庆气温数据表',                            font: {                                size: 24                            }                        },                        //副标题                        subtitle: {                            display: true,                            text: result.time,                            font: {                                size: 20                            }                        },                        legend: {                            labels: {                                // This more specific font property overrides the global property
                            }                        }                    }                },                plugins: [plugin],            });        }        handle(date.getDate())
        listData.forEach(item => {            let li = document.createElement('li')            li.innerHTML = item.time            li.setAttribute('class', 'item')            li.setAttribute('onclick', `handle(${item.id})`)            list.appendChild(li)        })
        function selectTime() {            type = !type            type ? list.style.display = 'block' : list.style.display = 'none'        }
        function handle(e) {            e = e || date.getDate()            list.style.display = 'none'            type = false            let data = listData.find(item => e == item.id)            chart(data)
        }
        function change(e){            handle()        }</script>
</body>
</html>