前端样式相关内容整理

$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
 
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});

示例二：

<!-- Flot -->
<script src="/static/js/plugins/flot/jquery.flot.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="/static/js/plugins/flot/jquery.flot.resize.js"></script>

<!-- ChartJS-->
<script src="/static/js/plugins/chartJs/Chart.min.js"></script>

<!-- Peity -->
<script src="/static/js/plugins/peity/jquery.peity.min.js"></script>

<style type="text/css">
.peity{
    cursor: pointer;
}
</style>

<span class="line" data-id="{$value1}"  style="display: none;width: 200px;">{$data1}</span>

 <div>
    <div class="flot-chart dashboard-chart" style="margin-top:0px;height:100px">
        <div class="flot-chart-content" id="container1"></div>
    </div>
</div>

<script>
// $data1 = 'stat_time_0,stat_time_1,stat_time_2,stat_time_3,stat_time_4,stat_time_5,stat_time_6,stat_time_7,stat_time_8,stat_time_9,stat_time_10,stat_time_11,stat_time_12,stat_time_13,stat_time_14,stat_time_15'
// $value1 = 11
// 


$(function() {
    function advertiser_data(value1){
         layer.open({
            type: 2,
            title: false,
            offset: 'r',
            anim: 'slideLeft', // 从右往左
            area: ['70%', '100%'],
            shade: 0.1,
            shadeClose: true,
            id: 'ID-demo-layer-direction-r',
            content: '{:url("url1")}?advertiser_id='+value1
        });
    }

    $(".line").peity("line",{
        width:108
    });

    $(".peity").on('click', function() {
        var advertiser_id = $(this).prev().attr("data-id");
        advertiser_data(advertiser_id)
    });

    var barData = {
        label: "bar",
        data: [
            {$total_data.timecost}
        ]
    };
    var barOptions = {
        series: {
            lines: {
                show: true,
                lineWidth: 1,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 0.2
                    }, {
                        opacity: 0.2
                    }]
                }
            },
            points: { show: false },
            shadowSize: 0,
            splines: {
                tension: 1,
            },
        },
        xaxis: {
            tickDecimals: 0,
            //show:false
        },
        yaxis:{
            //show:false
        },
        colors: ["rgb(77, 137, 249)"],
        grid: {
            color: "#ffffff",
            hoverable: true,
            clickable: true,
            tickColor: "#D4D4D4",
            borderWidth:0,
            backgroundColor: {
                colors: ["#ffffff", "#ffffff"]
            }
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: "时段: %x 点, 消耗: %y"
        }
    };
    $.plot($('#container1'), [barData], barOptions);

    $("#container1").bind("plotclick", function (event, pos, item) {
        if (item) {
            // 点击事件发生在数据点上
            console.log('点击的数据点的值:', item.datapoint[0].toFixed(2), item.datapoint[1].toFixed(2));
        }
    });
});
</script>

引言

Bootstrap

LayUI

LayuiMini

Font Awesome

ECharts

Vue

Element UI

tailwindcss

Sass

Less

Chart.js

peity.js

Flot

参考资料