图表做麻了，写了一大堆模板代码，整合之后清爽如风

大风写全栈

发布于 2024-12-31 05:48:03

8600

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

可视化大屏

有点遗憾的是，不会PS。刚好又接到需要做大屏的任务。

硬着头皮上，找了一些模板（免费，公开）的。

不得不说，有些页面模板的代码质量真的好。

用的是H5标准标签，屏幕适配用的flex。

如果是我来写。。。我不会PS。

模板代码整合之后

在填充图表的过程中，封装了一下加载图表的js方法。

用法很简单，引入ECharts和jQuery的js依赖，然后定义HTML就可以。

假设HTML代码如下：

<div id="echarts1" style="width:400px;height:300px;"></div>

js代码如下：

可以通过增加chartOptions数组的元素来增加图表。有个调试小技巧：chartOptions数组中的options属性，可以从ECharts官网调试的地方复制过来直接用。

'use strict';

$(function() {

    $(window).on('load',
    function() {
        $(".loading").fadeOut();
    });

    function initECharts(id, options) {
        const myChart = echarts.init(document.getElementById(id));
        myChart.setOption(options);
        $(window).on('resize',
        function() {
            myChart.resize();
        });
    }

    function initAllCharts() {
        const chartOptions = [{
            id: 'echarts1',
            options: {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [{
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    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'
                    }]
                }]
            }
        }] chartOptions.forEach(option = >initECharts(option.id, option.options));
    }

    initAllCharts();
})