alpine+tailwind实现柱状图表效果-html代码-BFW代码库

alpine+tailwind实现柱状图表效果

代码语言：html

所属分类：图表

代码描述：alpine+tailwind实现柱状图表效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/alpine.min.js"></script>
<style>
			body {
				font-family: 'IBM Plex Mono', sans-serif;
			}
            [x-cloak] {
                display: none;
            }

            .line {
                background: repeating-linear-gradient(
                    to bottom,
                    #eee,
                    #eee 1px,
                    #fff 1px,
                    #fff 8%
                );
            }
			.tick {
                background: repeating-linear-gradient(
                    to right,
                    #eee,
                    #eee 1px,
                    #fff 1px,
                    #fff 5%
                );
            }
        </style>

</head>

<body class="antialiased sans-serif bg-gray-200">
<div x-data="app()" x-cloak class="px-4">
<div class="max-w-lg mx-auto py-24">
<div class="shadow p-6 rounded-lg bg-white">
<div class="md:flex md:justify-between md:items-center">
<div>
<h2 class="text-xl text-gray-800 font-bold leading-tight">Product Sales</h2>
<p class="mb-2 text-gray-600 text-sm">Monthly Average</p>
</div>

<div class="mb-4">
<div class="flex items-center">
<div class="w-2 h-2 bg-blue-600 mr-2 rounded-full"></div>
<div class="text-sm text-gray-700">Sales</div>
</div>
</div>
</div>
<div class="line my-8 relative">

<template x-if="tooltipOpen == true">
<div x-ref="tooltipContainer" class="p-0 m-0 z-10 shadow-lg rounded-lg absolute h-auto block" :style="`bottom: ${tooltipY}px; left: ${tooltipX}px`">
<div class="shadow-xs rounded-lg bg-white p-2">
<div class="flex items-center justify-between text-sm">
<div>Sales:</div>
<div class="font-bold ml-2&quo.........完整代码请登录后点击上方下载按钮下载查看