【Echarts】柱状图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息

欢迎来到《小5讲堂》
大家好,我是全栈小5。
这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解,
特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握。
温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!

在这里插入图片描述

目录

  • 背景
  • 标题
    • 主标题
    • 副标题
  • 柱子信息
  • 鼠标信息
  • 可视化库
  • Vue影响
  • 文章推荐

背景

前面几篇文章在做一个数据统计图表的功能,对于图表第三方插件,接触比较多的是echarts,
由于隔了好长时间没怎么用这个插件,很多具体细节使用基本都忘了,因此本篇文章将回顾柱状图常见功能

标题

主标题

设置主标题,以及主标题的样式,居中显示,并设置字体为橙色、加粗、18px像素大小
要设置标题的样式,可以在 title 属性中使用 textStyle 属性。

option = {title:{text:'一周产品销量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar'}]
};

1)left:‘center’,表示标题居中显示
2)textStyle,属性下就是设置主标题的样式
在这里插入图片描述

副标题

设置 副标题,以及 副题的样式,居中显示,并设置字体加粗
使用的属性是,subtext和subtextStyle

option = {title:{text:'一周产品销量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'},subtext:'单位:件',subtextStyle:{fontWeight:'bold'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar'}]
};

在这里插入图片描述

柱子信息

直接在取消柱子上方显示具体数据信息,以及自定义信息,比如100%,数字后面加一个百分号
1)show,显示节点上的文本信息
2)position,文本位置,可以根据需要调整为 ‘top’, ‘bottom’, ‘inside’, ‘insideTop’, 等
top,表示在节点上方
在这里插入图片描述
inside,表示在节点里
在这里插入图片描述
3)formatter,显示的文本内容,这里使用节点的值,可以自定义显示值
4)textStyle,文本颜色

option = {title:{text:'一周产品销量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'},subtext:'单位:件',subtextStyle:{fontWeight:'bold'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar',label:{show:true,position:'top',formatter:function(data){return data.value+'件'}}}]
};

鼠标信息

鼠标移动到柱子上时,能够自动弹出数据进行显示,使用的属性是tooltip
在这里插入图片描述

option = {title:{text:'一周产品销量',left:'center',textStyle:{color:'#f60',fontSize:18,fontWeight:'bold'},subtext:'单位:件',subtextStyle:{fontWeight:'bold'}},tooltip:{trigger: 'axis',formatter:function(datas){return datas[0].name+':'+datas[0].value+'件'}},xAxis: {type: 'category',data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'bar',label:{show:true,position:'top',formatter:function(data){return data.value+'件'}}}]
};

可视化库

常见前端数据可视化库
1.D3.js

  • D3.js(Data-Driven Documents)是一个强大的JavaScript库,用于创建基于数据的交互式可视化图表。
  • 提供了强大的数据绑定和DOM操作功能,支持各种图表类型的定制和创建。
  • Mike Bostock及社区贡献者

2.Chart.js

  • Chart.js 是一个简单而灵活的图表库,支持各种基本图表类型,包括线图、柱状图、饼图等。
  • 具有轻量级的特性,易于上手和集成。
  • Chart.js 团队团队开发和维护

3.Highcharts

  • Highcharts 是一个功能丰富的图表库,提供了多种图表类型,包括线图、区域图、散点图等。
  • 具有良好的文档和社区支持,支持响应式设计。
  • Highsoft AS团队开发和维护

4.Plotly

  • Plotly 是一个开源的JavaScript图表库,支持创建交互式的绘图和可视化。
  • 提供了丰富的图表类型,包括散点图、线图、3D图等。
  • Plotly Technologies Inc.团队开发和维护

5.Google Charts

  • Google Charts 是由Google开发的图表库,支持各种常见的图表类型,如柱状图、饼图、地图等。
  • 可以通过简单的API集成到Web应用中。
  • Google团队开发和维护

6.AntV G2Plot

  • AntV G2Plot 是蚂蚁金服开发的一个基于G2引擎的图表库,提供了一系列现代化、精美的图表。
  • 具有良好的设计和交互性能,支持多种图表类型。
  • 蚂蚁金服团队开发和维护

7.Three.js

  • Three.js 是一个用于创建3D图形的JavaScript库,可以用于创建复杂的三维可视化场景。
  • 适用于需要展示复杂三维数据的场景,如科学可视化、虚拟现实等。
  • Three.js 团队开发和维护

8.ECharts

  • ECharts 是一个由百度开发和维护的基于 JavaScript 的数据可视化库,用于构建交互式和可定制的图表。
  • 提供了丰富的图表类型和灵活的配置选项,满足各种数据可视化需求。
  • ECharts 由百度开发和维护

这些库在不同场景和需求下都有其优势,选择合适的库取决于项目的具体要求、开发团队的经验和个人偏好。

Vue影响

Vue 的崛起可能会影响之前基于纯 JavaScript(JS)开发的前端数据可视化库,但并不一定会导致它们被完全替换。以下是一些可能发生的情况:

  1. 适配和整合:许多现有的数据可视化库已经意识到 Vue 的流行,并提供了与 Vue 框架更好的集成。这意味着开发者可以使用这些库的 Vue 版本,从而更轻松地在 Vue 项目中使用它们。

  2. 新的Vue专用库:随着 Vue 的持续发展,可能会出现一些专门针对 Vue 框架开发的数据可视化库。这些库可能会利用 Vue 的特性和生态系统,提供更加优化和灵活的解决方案。

  3. 项目迁移:对于已经使用旧的数据可视化库的项目,开发者可能会考虑将其迁移到与 Vue 更好集成的解决方案上,以便更好地利用 Vue 的优势和特性。

  4. 竞争与演进:尽管 Vue 的崛起可能会影响传统的数据可视化库,但这并不意味着它们会被完全取代。一些库可能会继续存在并适应变化,通过提供更好的功能、更好的性能或更好的用户体验来与 Vue 相竞争。

总的来说,Vue 的崛起可能会对前端数据可视化库产生影响,但是否会导致其被完全替换取决于多个因素,包括开发者的偏好、现有库的适应能力以及新的技术趋势。

文章推荐

【Echarts】曲线图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息
【Echarts】柱状图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息
【随笔】程序员如何选择职业赛道,目前各个赛道的现状如何,那个赛道前景巨大
【随笔】程序员的金三银四求职宝典,每个人都有最合适自己的求职宝典

总结:温故而知新,不同阶段重温知识点,会有不一样的认识和理解,博主将巩固一遍知识点,并以实践方式和大家分享,若能有所帮助和收获,这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738840.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux 环境安装nvm

linux 环境安装nvm 1、安装方式 # 方式1 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 方式2 【推荐】 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash2、创建nvm命令目录 mkdir -p ~/.nvm3、编…

StringBuilder --java学习笔记

StringBuilder 代表可变字符串对象,相当于是一个容器,它里面装的字符串是可以改变的,就是用来操作字符串的StringBuilder比String更适合做字符串的修改操作,效率会更高,代码也会更简洁 StringBuilder的常用构造器和方…

C++操作树莓派的RTC时钟

概述 RTC实时时钟通常是指一个集成电路,RTC本质上是一个独立的定时器,通常情况下需要外接一个32.768KHZ的晶振和匹配电容(10~33pf),由于时间是不停止的,为了满足这一要求,所以RTC实时时钟有两种…

idea2023和历史版本的下载

1.idea中文官网 idea官网历史版本下载(https://www.jetbrains.com.cn/idea/download/other.html)

基于SpringBoot的“学生成绩管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“学生成绩管理系统”的设计与实现(源码数据库文档PPT) 开发语言:Java 数据库:MySQL 技术:SpringBoot 工具:IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面图 管理员功能界面图 学生管理界面图…

蓝桥杯2019年第十届省赛真题-修改数组

查重类题目,想到用标记数组记录是否出现过 但是最坏情况下可能会从头找到小尾巴,时间复杂度O(n2),数据范围106显然超时 再细看下题目,我们重复进行了寻找是否出现过,干脆把每个元素出现过的次数k记录下来,直…

做抖音小店有何秘诀?2步提高流量和转化率,行业秘诀分享!

大家好,我是电商花花。 我们做抖音小店,最重要的就两点,一个是店铺的流量,一个是店铺的转化率。 店铺想要出单,赚钱,必然是离不开店铺的流量和转化率了,但是如何让流量变成销量这才是需要我们…

redis概述和安装

1 、redis概述和安装 1.1、安装redis 1. 下载redis2. 地址 : https://download.redis.io/releases/ 3. 选择需要的版本1.2 将 redis 安装包拷贝到 /opt/ 目录 1.3. 解压 tar -zvxf redis-6.2.1.tar.gz1.4. 安装gcc yum install gcc1.5. 进入目录 cd redis-6.2.11.6 编译 …

Linux第76步_“gpio子系统”下的LED驱动

使用新字符设备驱动的一般模板和“gpio子系统”,以及设备树,驱动LED。 1、添加“gpio_led”节点 打开虚拟机上“VSCode”,点击“文件”,点击“打开文件夹”,点击“zgq”,点击“linux”,点击“…

[零声教育] C++高性能日志课程总结

高性能日志 1 数据肯定是批量写入的 如果数据单笔写入会造成 磁盘寻址、频繁用户态/内核态的切换 (耗时) 2 fwrite/write 的区别 fwrite() 是C标准库中的函数,而 write() 是系统调用接口。fwrite底层也是通过write来实现的。 二者均都有缓冲…

重学SpringBoot3-ErrorMvcAutoConfiguration类

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 重学SpringBoot3-ErrorMvcAutoConfiguration类 ErrorMvcAutoConfiguration类的作用工作原理定制 ErrorMvcAutoConfiguration示例代码1. 添加自定义错误页面2.自定义错误控制器3. ErrorAttributes定制错误信息 结…

Java学习记录(十七)IO流(三)

转换流(在字节流中想使用字符流的方法时使用) 转换流是字节流和字符流之间的桥梁,转换流本身其实就是字符流所以可以使用字符流里的相关方法,通过InputStreamReader字符转换输入流能将字节流转化为字符流输入到内存中&#xff0c…

YOLOv8改进 | 注意力机制 | 添加YOLO-Face提出的SEAM注意力机制优化物体遮挡检测(附代码 + 修改教程)

一、本文介绍 本文给大家带来的改进机制是由YOLO-Face提出能够改善物体遮挡检测的注意力机制SEAM,SEAM(Spatially Enhanced Attention Module)注意力网络模块旨在补偿被遮挡面部的响应损失,通过增强未遮挡面部的响应来实现这一目标,其希望通过学习遮挡面和未遮挡面之间的…

.net core框架

ASP.NET Core 入门 跨平台开源框架 B/S 类与方法 Console 部分称为“类”。 类“拥有”方法;或者可以说方法存在于类中。 WriteLine() 部分称为“方法”。 想要使用方法就要知道方法在哪里 —————————— 执行流 一次执行一段 ASP.NET Core 是什么东西…

玩转SpringBoot:SpringBoot的几种定时任务实现方式

引言 在现代软件开发中,定时任务是一种常见的需求,用于执行周期性的任务或在特定的时间点执行任务。这些任务可能涉及数据同步、数据备份、报表生成、缓存刷新等方面,对系统的稳定性和可靠性有着重要的影响。Spring Boot提供了强大且简单的定…

VikeCTF 2024

VikeCTF 2024 WP 由于环境原因很多靶场的过程图片没法复现截图。。。 web Ponies 算是一个签到题,看到源码这里其实是一个快速跳转的程序,我们看到tag.src直接进行访问,可以看到源码里面,从里面分析拿到flag function recurs…

分享那些在云发生的奇妙故事 ~~ 征文挑战赛来啦!

云布道师 简介: 在数字化转型的大潮下,云计算已深度渗透各行各业,成为企业创新和发展的关键驱动力。本栏目旨在通过全面挖掘并生动展现“客户如何用好云”的实战历程,深入剖析行业痛点解决之道,以鲜活的案例故事呈现云…

Rust 语言的 for 循环用法

在 Rust 中,for 循环是一种用于迭代集合(如数组、切片、向量、字符串、映射、通道等)或其他可迭代对象的方式。Rust 的 for 循环语法相对直观,并且与许多其他编程语言中的 for 循环类似。 以下是 for 循环在 Rust 中的一些常见用…

流畅的Python(十八)-使用asyncio包处理并发

一、核心要义 1. 对比一个简答的多线程程序和对应的asyncio版,说明多线程和异步任务之间的关系 2. 网络下载的异步版 3. 在异步编程中,与回调相比,协程显著提升性能的方式 二、代码示例 1、相关知识点 #!/usr/bin/env python # -*- coding: utf-8 -*- # Time …

算法50:动态规划专练(力扣514题:自由之路-----4种写法)

题目: 力扣514 : 自由之路 . - 力扣(LeetCode) 题目的详细描述,直接打开力扣看就是了,下面说一下我对题目的理解: 事例1: 输入: ring "godding", key "gd" 输出: 4. 1. ring的第…