echarts使用之柱状图

一、引入Echarts

npm install eacharts --save

二、选择一个Echarts图

选择创建一个柱状图

option = {
// x轴参数的基本配置xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //X轴数据},
// y轴参数的基本配置yAxis: {type: 'value'},
// series:[{data: [120, 200, 150, 80, 70, 110, 130], //y轴数据type: 'bar'}]
// 提示框组件tooltip: {trigger: "axis",}

1、有关xAxis属性

xAxis: {show: true, // 是否显示x轴,// 'value' 数值轴,适用于连续数据。// 'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。// 'log' 对数轴。适用于对数数据。// 'category'  // 类目轴,适用于离散的类目数据。type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //X轴数据inverse:true, // 是否反向坐标轴alignTick: {   // 坐标轴刻度线相关设置      show: true, inside:true, // 刻度线是否指向内部alignWithlabel: true, // 类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐}
}

2、有关yAxis属性

3、有关series属性

series属性是一个对象,可以用来定义一个数据集的特征、样式和其他信息。通过series属性的设置,可以让echarts可视化出你想要的样子。series属性可以用在折线图、柱状图、散点图、区域图、饼图等多种可视化图表中。

series属性包括:

series: [{// 图形类型type: 'bar', // 用于tooltip的显示,legend 的图例筛选在,setOption更新数据和配置项时用于指定对应的系列。name: '', // 'series':按照系列取色,同一系列所有数据颜色相同// 'data':按照数据项取色,每个数据都使用不同的颜色colorBy: 'series',barWidth: 26, // 柱形宽度(折线图无),不设时自适应barMaxWidth: 30, // 柱条的最大宽度。比barWidth优先级高barMinHeight: 3, // 柱条最小高度,可用于防止某数据项的值过小而影响交互// 不同系列的柱间距离。如果想要两个系列的柱子重叠,可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。barGap: 10, barCategoryGap: '20%',  // 同一系列的柱间距离,默认为类目间距的20%,可设固定值data: [1,1,1,11],  // 系列中的数据内容数组。数组项通常为具体的数据项。smooth: true,  // number或boolean取值 是否是平滑线条展示,折线图起作用 areaStyle: {}, // 区域填充样式。设置后显示成区域面积图。emphasis: {    // 折线图的高亮状态(鼠标悬浮时的显示)label: {show: true,textStyle: {color: '#333333',fontWeight: 'bold'}},focus: 'self',  // 只聚焦(不淡出)当前高亮的数据的图形},blur: {   // 折线图的淡出状态。开启focus:'self'时有效label: {show: true,position: "right"}}}}]

4、有关tooltip属性

 提示框组件。
 提示框组件可以设置在多种地方:
 可以设置在全局,即 tooltip;
 可以设置在坐标系中,grid.tooltip、polar.tooltip、single.tooltip;
 可以设置在系列中,即 series.tooltip;可以设置在系列的每个数据项中,即 series.data.tooltip。

// 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置
tooltip: {show: true,trigger: "axis",  // 触发方式alwaysShowContent: true,backgroundColor: "rgba(0, 57, 63, 1.0)",borderWidth: 1,borderColor: "#23e4fa",extraCssText: "box-shadow: 0px 0px 13px 3px #4ca4ff inset;",// 额外附加到浮层的css样式textStyle: { color: "#fff",fontFamily: "D-DINExp",fontSize: 14,},// 坐标轴指示器配置项axisPointer: {type: "none",},// 悬浮框的数字字体不能调节 所以单独进行字体样式修改,可看下图图示需求formatter: (item) => {const str = `<p style="font-family: 'D-DINExp';">${item[0].name}</p><div style="display: flex; justify-content: space-between;"><span style="display: inline-block; height: 10px; width: 10px;border-radius:50%;background-color: ${item[0].color};margin-top: 5px"></span><span style="font-family: 'D-DINExp';">${item[0].value}</span></div>`;return str;},

 悬浮框的现在的年月文字样式:

想要的年月文字样式:(用tooltip属性的formatter方法重写样式

 

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

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

相关文章

富文本BraftEditor引起的bug

1、BraftEditor踩坑1 #基于之前写的一篇BraftEditor的使用# 1. 问题起源&#xff1a; 打开编辑弹窗--> 下面页面所示--> 当进行分类选择时候&#xff0c;就会报错&#xff0c;并且这个报错还不是一直都有&#xff0c;6次选择出现一次报错吧 2. 解决&#xff1a; 2.1 起…

CES 2024:LG专注于新产品的人工智能变革

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

蓝牙模块在电动汽车充电设施中的创新应用

随着电动汽车的普及&#xff0c;充电设施的便捷性和智能化成为关键的发展方向。蓝牙技术作为一种无线通信技术&#xff0c;在电动汽车充电设施中发挥着越来越重要的作用。本文将深入探讨蓝牙模块在电动汽车充电设施中的创新应用&#xff0c;以提高充电体验、提升管理效率&#…

vue3.2引用unplugin-auto-import插入,解放开发中import组件

目录 前言引用unplugin-auto-import插件的优缺点优点缺点 unplugin-auto-import插件引入安装插件配置vite配置更新TypeScript配置使用代码位置 总结 前言 是否添加unplugin-auto-import取决于项目需求和团队习惯。如果项目中频繁使用Vue相关API&#xff0c;并且团队成员都熟悉这…

MulticoreWare与Imagination一同按下汽车计算工作负载的“加速键”

中国北京 – 2024年1月8日 - MulticoreWare Inc与Imagination Technologies共同宣布已在德州仪器TDA4VM处理器上实现了GPU计算&#xff0c;不仅使算力提升了约50 GFLOPS&#xff0c;而且还实现了自动驾驶和高级驾驶辅助系统&#xff08;ADAS&#xff09;常见工作负载性能的跃升…

使用Docker部署PDF多功能工具Stirling-PDF

1.服务器上安装docker 安装比较简单&#xff0c;这种安装的Docker不是最新版本&#xff0c;不过对于学习够用了&#xff0c;依次执行下面命令进行安装。 sudo apt install docker.io sudo systemctl start docker sudo systemctl enable docker 查看是否安装成功 $ docker …

前端项目由nginx迁移到apache httpd

前端项目由nginx迁移到apache httpd 前端项目存放目录为 /var/www/dist 虚拟主机端口80 反向代理拦截 /prod-api 后端服务地址 http://192.168.0.44:8097 <VirtualHost *:80>DocumentRoot /var/www/distServerName www.dist.com<Directory /var/www/dist>RewriteEn…

PCL 使用克拉默法则进行四点定球(C++详细过程版)

目录 一、算法原理二、代码实现三、计算结果本文由CSDN点云侠原创,PCL 使用克拉默法则进行四点定球(C++详细过程版),爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT生成的文章。 一、算法原理 已知空间内不共面的四个点,设其坐标为 A (…

鼠标随动指定区域高亮显示(Excel聚光灯)

实例需求&#xff1a;工作表中数据表实现跟随鼠标选中高亮效果&#xff0c;需要注意如下几个细节需求 数据表为连续区域&#xff0c;但是不一定从A1单元格开始数据表的前两行&#xff08;标题行&#xff09;不使用高亮效果数据表中已经应用了条件格式&#xff0c;高亮显示取消…

计算机网络专栏目录

1. http header 请求头 x-forwarded-for 2. HTTP/HTTPS、TLS/SSL 协议

redis持久化与SpringBoot整合

redis持久化与SpringBoot整合 1、Redis全局命令1.2、Redis事务 2、Redis持久化2.1、RDB方式2.1.1、客户端触发机制2.1.2、服务端触发机制2.2.3、配置生成快照名称和位置2.2.4、优点2.2.5、缺点 2.2、AOF方式2.2.1、优点2.2.2、缺点 2.3、RDB-AOF混合方式2.4、持久化机制的选择 …

0-快速了解

1.项目简介 RuoYi-Vue是一款基于SpringBootVue的前后端分离极速后台开发框架。 RuoYi 官网地址&#xff1a;http://ruoyi.vip(opens new window)RuoYi 在线文档&#xff1a;http://doc.ruoyi.vip(opens new window)RuoYi 源码下载&#xff1a;https://gitee.com/y_project/Ru…

Nginx配置jks格式证书,升级https

通常在给服务器升级https&#xff0c;需要在nginx上配置域名对应的https证书&#xff0c;nginx通常配置的是crt和key格式的证书。最近遇到有人提供了jks格式的证书&#xff0c;查阅了几个资料都是需要先将jks转为p12格式&#xff0c;然后再将p12转为crt格式。这里记录一下相关过…

在JavaFX中的module-info.java的大坑,实现怎么删除这个后不会报错“需要JavaFX运行组件”

如果你也是因为module-info导致项目一些依赖包不能用&#xff0c;那么可以试着删除这个模块&#xff1b;话不多说&#xff0c;请看image 1.首先删除你的module-info.java&#xff08;注意&#xff1a;你要是怕出错的话&#xff0c;建议提前备份你的项目&#xff09; 2.然后找到…

影视视频知识付费行业万能通用网站系统源码,三网合一,附带完整的安装部署教程

在数字化时代&#xff0c;知识付费行业逐渐成为主流。人们对高质量内容的需求日益增长&#xff0c;越来越多的人愿意为有价值的知识和信息服务付费。为了满足这一市场需求&#xff0c;罗峰给大家分享一款全新的影视视频知识付费网站系统源码&#xff0c;为用户提供一站式的知识…

c# 多循环如何跳出

如果内层循环满足某种条件时&#xff0c;你明确知道无需再执行外层循环剩余的部分&#xff0c;可以直接改变外层循环的控制变量值使其无法满足循环条件。 for (int i 0; i < 10; i) {for (int j 0; j < 10; j){if (SomeCondition(i, j)){i 10; // 直接将i设为超出范围…

Python列表append()函数使用详解

在Python中&#xff0c;列表是一种可变序列类型&#xff0c;可以用来存储多个元素。列表的append()函数是用于在列表末尾添加新元素的内置方法。本文将详细介绍Python列表的append()函数及其使用方法。 一、append()函数的基本语法 append()函数的语法非常简单&#xff0c;只…

Android Serializable 和 Parcelable 的详解以及代码示例(Kotlin)

1. Serializable和Parcelable的区别&#xff08;简单记忆&#xff09;&#xff1a; Serializable适用于简单的对象序列化&#xff0c;而Parcelable适用于需要更高效的对象序列化和反序列化的情况&#xff0c;特别是在Android开发中。 Serializable是Java平台的标准接口&#xf…

electron自定义窗口和右键菜单样式

前言 electron默认沿用系统UI&#xff0c;并没有提供很多接口供使用者定制样式&#xff0c;如果想要完全自定义的样式&#xff0c;目前我能想到的方案只能是通过前端自定义样式&#xff0c;然后通过进程通信来实现系统基础功能&#xff1a;最大/小化、关闭、拖动窗口等。 效果…

面试宝典进阶之关系型数据库面试题

D1、【初级】你都使用过哪些数据库&#xff1f; &#xff08;1&#xff09;MySQL&#xff1a;开源数据库&#xff0c;被Oracle公司收购 &#xff08;2&#xff09;Oracle&#xff1a;Oracle公司 &#xff08;3&#xff09;SQL Server&#xff1a;微软公司 &#xff08;4&#…