移动端css实现柱状图

最新推荐文章于 2024-05-22 19:51:04 发布
最新推荐文章于 2024-05-22 19:51:04 发布
阅读量694 收藏 1
点赞数 2
分类专栏： 移动端 文章标签： h5 移动端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinchao_zhang/article/details/86692215
版权

1、效果图
在这里插入图片描述

2、代码

<body>
    <div class="contain">
        <div class="reline">
            <div class="line">
                <ul class="flex-row top-line">
                    <li>
                        <div></div>
                        <div>0</div>
                        <div></div>
                        <div class="focus-sign">V1</div>
                    </li>
                    <li>
                        <div></div>
                        <div>300</div>
                        <div class="focus-line"></div>
                        <div class="focus-sign">V2</div>
                    </li>
                    <li>
                        <div></div>
                        <div>1500</div>
                        <div></div>
                        <div>V3</div>
                    </li>
                    <li>
                        <div></div>
                        <div>3500</div>
                        <div></div>
                        <div>V4</div>
                    </li>
                    <li>
                        <div></div>
                        <div>6000</div>
                        <div></div>
                        <div>V5</div>
                    </li>
                    <li>
                        <div></div>
                        <div>10800</div>
                        <div></div>
                        <div>V6</div>
                    </li>
                    <li>
                        <div></div>
                        <div>25600</div>
                        <div></div>
                        <div>V7</div>
                    </li>
                </ul>
                <div class="bline"></div>
            </div>
        </div>
    </div>
</body>

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
    font-size: 40px;
}

.contain {
    width: 750px;
    background-color: black;
    margin: 0 auto;
    height: 100%;

}

.reline{
    width: 686px;
    height: 100%;
    margin: 0 auto;
    background-image: linear-gradient(-128deg, #836AFF 10%, #BA6AFF 100%);
}

.line {
    position: relative;
    margin: 0 auto;
    height: 8rem;
    padding-top: 4rem;
    background-image: linear-gradient(-128deg, #836AFF 10%, #BA6AFF 100%);
}

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.top-line li {
    width: 0.75rem;
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.top-line li div:nth-child(1) {
    width: 1.5rem;
    height: 1.5rem;
    background-color: antiquewhite;
    border-radius: 50%;
    margin: 0.25rem 0;
}

.top-line li div:nth-child(2) {
    font-family: PingFangSC-Semibold;
    font-size: 0.5rem;
    color: #ffffff;
    line-height: 0.6rem;
    letter-spacing: 0;
    margin-bottom: 0.25rem;
}

.top-line li div:nth-child(3) {
    width: 0.2rem;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: 0.25rem;
}

.top-line li div:nth-child(4) {
    width: 0.75rem;
    height: 0.45rem;
    background: rgba(255, 255, 255, 0.3);
    margin-bottom: 0.25rem;
    border-radius: 0.1rem;
    font-size: 0.3rem;
    background: #C2A2FB;
    font-family: AppleSystemUIFont;
    color: #FFFFFF;
    text-align: center;
    z-index: 10;
    margin: 0px;
}

.focus-line {
    background: #FDE23D !important;
}

.focus-sign {
    background: #FDE23D !important;
    color: #442509 !important;
}

.top-line li:nth-child(1) div:nth-child(3) {
    height: 0;
    margin-bottom: 0;
}

.top-line li:nth-child(2) div:nth-child(3) {
    height: 0.75rem;
}

.top-line li:nth-child(3) div:nth-child(3) {
    height: 1.5rem;
}

.top-line li:nth-child(4) div:nth-child(3) {
    height: 2.25rem;
}

.top-line li:nth-child(5) div:nth-child(3) {
    height: 3rem;
}

.top-line li:nth-child(6) div:nth-child(3) {
    height: 3.75rem;
}

.top-line li:nth-child(7) div:nth-child(3) {
    height: 4.5rem;
}

.line .bline {
    width: 100%;
    height: 0.1rem;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    bottom: 0.2rem;
    z-index: 9;
}
</style>

3、数值之间可以添加连接线，使用transform: rotate();

jinchao_zhang
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端柱状图
07-09
移动端的柱状图, 对设备屏幕大小做了适配，用css3做了进入动画
移动端使用可视化图表（柱状图、饼状图、折线图）& antv f2在vue中使用方法源码
初心 - 杨瑞超个人博客
10-14 4729
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 概述 F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex），完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。 官网： https://antv....
小程序纵向（竖向）三项（3项）柱状条形图canvas
天弃的博客
01-11 2659
公司需求我们画的条形图是竖向那种，我画的成果 代码参考https://blog.csdn.net/sinat_27180253/article/details/80932037的文章，基本上都一样的，只不过我把他的横向改成纵向，单项属性改成了三项属性，附上代码 WXML: &lt;!-- 折线图 --&gt; &lt;view class="canvas-view"&gt; &...
移动端的图表的简单使用
最新发布
曾小超的博客
05-22 282
移动端饼图和柱状折线图样式参考
android 生成柱状图,GitHub - DontesMore/ScaleBarChart: Android上快速形成柱形图
weixin_36301296的博客
05-28 400
# ScaleBarChartAndroid上快速形成柱形图有时一些业务场景，在移动端上也要显示统计数据以及图表，假期尝试写了一个ScaleBarChart。使用了自定义的方式来实现这一需求。一、数据模型从图中，我们需要向用户展示的数据有哪些呢？有哪些有意义的值？能看到的、要展示出来的数据有柱形顶部文字，柱形底部文字以及表格名称。然后柱子的高度是怎么确定的呢？这时候就需要一个值，来确定该柱子的长度...
移动端数据可视化设计
weixin_43516258的博客
07-02 1609
在移动应用中，数据可视化设计尤为重要，它可以提高用户对数据的理解和感知，进而提升用户体验和用户满意度。因此在数据展示方面必须简单、直观。
vue 移动端 echarts 柱状图或折线图数据一页展示固定条数，且数据从右向左滑动。
qq_37309987的博客
08-04 1703
在进行移动端项目开发时，曾遇到这样的一个业务场景，有一个图表模块的开发，使用第三方组件echarts进行开发，以时间为统计维度数据从左向右展示，可视区域展示固定的3条数据，初始化时数据展示的最新日期的数据，用户可以从右向左滑动查看其他日期的数据。2、初始化时页面以最新的日期数据为起始展示数据，用户向左滑动可以看其他日期的数据；
Echarts动态排名柱状图(自适应电脑和手机端)源代码
10-09
在这个项目中，我们主要关注的是如何使用ECharts实现一个动态排名的柱状图，并使其同时适应电脑和手机端的显示。 首先，`index.html`是项目的主入口文件，它通常包含了HTML结构，用于定义页面的基本布局。在这个...
数字表格柱状图_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
在本资源中，我们主要关注的是一个用于手机和电脑网站的HTML数字表格柱状图，它结合了前端JavaScript效果、H5模板以及自适应CSS源码。这些元素都是构建现代、响应式用户界面的重要组成部分。下面我们将深入探讨这些...
echarts 柱状图-APP自适应完整方案代码.zip
07-29
在本项目中，我们主要关注的是使用Echarts库创建一个适用于移动端APP的柱状图。Echarts是一款由百度开发的开源JavaScript数据可视化库，能够帮助开发者轻松地在网页上绘制出高质量的图表。这个压缩包提供了实现柱状...
Van先森的柱状图模板，需要的自取，喜欢记得点个赞
03-19
【BootStrap 柱状图 Jchar】是网页开发中的一个重要知识点，它结合了Bootstrap框架的灵活性和Jchar库的图表绘制能力，为数据可视化提供了便捷高效的解决方案。Bootstrap是目前最流行且易于使用的前端开发框架之一，...
oview:Vue移动端图表库（饼状图，柱状图，条形图，折线图，雷达图，散点图，气泡图等）
05-14
oView Vue.js移动端图表库 oView是基于 图表库的二次封装，以便于Vue.js开发者在移动端和PC端更好进行图表的展示。 vue插件 vue add oview vue invoke vue-cli-plugin-oview NPM安装 npm install oview --save //或者使用yarn yarn add oview 使用 //main.js中 import oView from "oview"; Vue.use(oView); oview默认会使用:o-chart,o-line的方式全局注册组件。使用时，请记得使用o-x的方式哦 oView特性 1、oview支持哪些图？ 目前oview支持：柱状图，饼状图，面积图，散点图，气泡图，折线图 ，雷达图。 2、图表配置简单 <!-- 没错，配置一个饼状图就是这么简单---> <o-chart :data="d
移动端选项卡切换展示echarts数据图表代码
06-09
移动端选项卡切换展示echarts数据图表代码，包括有扇形图、柱形图、折线图3种图表统计展示。
echarts实践总结(常用一)：柱状图（特点：渐变色、点击缩放、左右滑动、悬浮展示样式）
qq_45796592的博客
03-17 1339
柱状图（展示渐变色、点击缩放、左右滑动、悬浮展示样式）
React 使用echarts绘制个性滚动柱状图
weixin_44768794的博客
08-01 785
React使用echarts绘制个性滚动柱状图。
css实现柱状图
joshua
02-15 9367
柱状图在web上经常用到，这里使用css实现，首先定义节点： 统计数据 30 40 20 40 为柱状图使用了两个基本元素：div用于柱状图的整体显示以及北京，ul用于柱状图的数据，其中每一个柱列都是一个li对象，为了是每列以不同颜色区分，分别给每个li定义不同的class； 然后使用css定义样式： #vert{
UIFont设置字体
dishuangqing3232的博客
08-24 440
1label.font=[UIFontfontWithName:@"Arial-BoldItalicMT"size:24]; 字体名如下：Font Family: American TypewriterFont: AmericanTypewriterFont: AmericanTypewriter-BoldFont Family: AppleGothicFont...
Vue移动端图表库(饼状图，柱状图，折线图....)——oview
weixin_33910434的博客
05-26 6730
oview是基于vue和f2封装的移动图表库，有兴趣的同学欢迎使用。 oView Vue.js移动端图表库 oView是基于 蚂蚁金服F2图表库的二次封装，以便于Vue.js开发者在移动端和PC端更好进行图表的展示。 NPM安...
"移动端CSS学习笔记及技术要点
在学习移动端CSS的过程中，有一些基础知识和技巧是需要掌握的，比如移动端浏览器的调试、viewport设置、背景缩放、多倍图切图、移动端主流方案和特殊样式等。 移动端CSS的学习内容主要包括以下几个方面： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值