首页 > 其他分享 >时隔多年,终于有一个图表库的颜值比 Echart 高好多倍!

时隔多年,终于有一个图表库的颜值比 Echart 高好多倍!

时间:2025-01-08 10:56:16浏览次数:1  
标签:Vue Echart 样式 颜值 图表 UI 高好 Data

大家好,我是桃子,前端小菜鸟一枚,工作之余给大家分享下我子任务颜值比较高的图标库
个人观点:颜值方面更胜一筹,但是功能方面肯定Echarjs占优 _

最近在做图表需求的时候,无意间发现一个颜值很高的图表库 Vue Data UI,以前我都是用 Echarts ,用习惯了,其实也是样式看得有点腻了,所以看到这个 Vue Data UI 的时候,感觉眼前一亮,感觉这个库的样式风格更加的立体

Vue Data UI 的特点是:

  • 颜值高,偏 圆润、立体
  • 图表的组件非常多,常用的折线图、柱状图、饼图、进度条之类的都有,不止这些,还有很多其他的
  • 支持导出,包括 PDF、图片、Excel
  • 支持多主题,包括了 zen、hack、concrete
    示例官网:https://vue-data-ui.graphieros.com/examples

Vue Data UI 提供了很多的图表样式,就比如下方的小型图表样式,它的整体风格更偏向于圆润、立体

下面是 Vue Data UI 的矩形分布图和饼图的样式示例

这种图可以用来做气象温度分布图、代码提交分布图之类的

还发现了这种类似于车表的图

看到这个熟悉吗?是不是很像前端打包体积分析图?可以做这种类似的场景~

下面是 Vue Data UI 的曲线图、柱状图

使用方法

npm install vue-data-ui

标签:Vue,Echart,样式,颜值,图表,UI,高好,Data
From: https://www.cnblogs.com/helenMoon/p/18659244

相关文章

  • echarts示例-legend
    二、legend-图例1、type-图例的类型。可选值:'plain':普通图例。缺省就是普通图例。'scroll':可滚动翻页的图例。当图例数量较多时可以使用。当使用'scroll'时,使用这些设置进行细节配置:legend.scrollDataIndexlegend.pageButtonItemGaplegend.pageButtonGaplegend.pageButton......
  • echart 世界地图名称映射关系
    exportdefault{Canada:'加拿大',Turkmenistan:'土库曼斯坦','SaintHelena':'圣赫勒拿','LaoPDR':'老挝',Lithuania:'立陶宛',Cambodia:'柬埔寨',Ethiopia:'埃塞俄比亚',......
  • 如何使用Echarts实现热力图?
    Echarts是一个使用JavaScript编写的开源可视化库,用于生成各种类型的图表,包括热力图。下面是一个简单的示例,说明如何使用Echarts来创建一个热力图:引入Echarts库首先,你需要在你的HTML文件中引入Echarts库。你可以通过CDN引入,或者将库下载到你的项目中。<!DOCTYPE......
  • 如何使用Echarts实现饼图?
    Echarts是一个开源的JavaScript图表库,它可以帮助你轻松地在web页面中生成各种图表,包括饼图。以下是一个简单的示例,说明如何使用Echarts创建一个饼图:首先,你需要在你的HTML文件中引入Echarts库。你可以通过CDN引入,或者将库文件下载到你的项目中。<!DOCTYPEhtml><html><head>......
  • uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝扫码支付/收付款
    uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝扫码支付/收付款等功能,界面漂亮颜值高,视频商城小工具等,蚂蚁森林种树养鸡农场偷菜样样齐用于视频,商城,直播,聊天等sumer-alipay介绍uniapp精仿支付宝UI界面,首页/理财/消息/生活/口碑/我的,还有模拟支付宝......
  • 为什么点技师上门的顾客,都对颜值有要求呢?
    在如今点技师上门服务逐渐流行的背景下,有一个挺有意思的话题值得探讨一番,那就是大家在选择技师时,会看重颜值吗?通过观察不难发现,在这方面似乎存在着明显的性别差异。女顾客好像并没有在颜值方面有过多的需求,然而男性顾客却对此表现得颇为执着。可仔细想想,点按摩服务,最为关键的......
  • 微信小程序应用echarts
    1、clone官方库echarts-for-weixin到本地,将其中的ec-canvas目录复制到自己项目的某个目录下(如components)2、在自己的组件或页面中(.json文件),按如下方式使用,路径根据自己的项目具体设置{"usingComponents":{"ec-canvas":"../components/ec-canvas/ec-canvas"}}3......
  • 计算机毕设项目37q9m166+springboot基于Echarts的起点小说数据分析与可视化平台,计算机
    springboot基于Echarts的起点小说数据分析与可视化平台摘 要基于Echarts的起点小说数据分析与可视化平台是一个专为小说爱好者和数据分析师设计的综合性工具。该平台采用了java语言的springboot框架,数据采用MySQL数据库进行存储。结合B/S结构进行开发设计,功能强大,界面化操......
  • 数据科学丨Echarts,最强数据可视化工具!开源、美观、易上手!
    1.打开可视化数据分析的大门数据科学宛如一场探索之旅,其中数据收集与整理是基石,如探险家精心采集与规整标本般,为后续旅程备足素材;数据分析与挖掘仿若神奇的透视镜,借统计与算法之力洞察数据暗藏的玄机,挖掘深层模式;而数据解释与决策恰似睿智的领航员,依据洞察结果结合领域知识......
  • BOSS直聘数据可视化分析系统 招聘数据 求职就业数据可视化 Flask框架 Echarts可视化 s
    博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久,选择我们就是选择放心、选择安心毕业✌>......