Echart笔记

Echart笔记

  • 柱状图
    • 带背景色的柱状图
      • 将X与Y轴交换制作为进度条

柱状图

带背景色的柱状图

将X与Y轴交换制作为进度条

//将X与Y轴交换制作为进度条
option = {  xAxis: {type: 'value',min:0,max:100,show:false,//隐藏x轴},yAxis: {type: 'category',data:['进度条'],show:false,//隐藏y轴},label:{show:true,fontSize:20,fontFamily:'Arial',color:'#C7C3E3',backgroundColor: 'rgba(0,0,0,0.0)',  //标签底色borderRadius: [5,5,5,5],position: 'top',horizontalAlign: 'center',//verticalAlign: 'bottom',formatter: function (params) {  // 通过formatter自定义标签的显示格式return params.value + ' %';  // 在这里设置标签的值,例如加上单位"元"},},grid: {top: '20%',left: '10%',right: '10%',bottom: '20%'},series: [{type: 'bar',data: [90.55],color:'rgba(216,100,150,0.5)',showBackground: true, // 是否显示柱条的背景色,默认不显示backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)', // 柱条的颜色borderColor: 'red', // 柱条的描边颜色borderWidth: 0, // 柱条的描边宽度,默认不描边borderType: 'dashed', // 柱条的描边类型,默认值'solid';可取值'solid', 'dashed', 'dotted'borderRadius:[20,40,40,20],  //背景圆角设置},itemStyle:{normal:{borderRadius:[20,40,40,20],  //圆角设置color: new echarts.graphic.LinearGradient(0,0,1,1,[  //线性渐进色设置,范围0到1{offset:0,color:'#A07DA0'},{offset:0.25,color:'#AD9CC2'},{offset:0.5,color:'#C7C3E3'},{offset:0.75,color:'#E1A08B'},{offset:1,color:'#D8929B'},])},},barMaxWidth: 100, // 设置柱状图的最大宽度,以适应 y 轴标签的长度barWidth: 50, // 设置柱状图的宽度,以适应 y 轴标签的长度barMinHeight: 10, // 设置柱状图的最小高度,用于显示标签信息},],
};

效果图

效果图

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

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

相关文章

【阅读笔记】Graph of Thoughts: Solving Elaborate Problems with Large Language Models

Graph of Thoughts: Solving Elaborate Problems with Large Language Models Website & code: https://github.com/spcl/graph-of-thoughts 作者介绍了Graph of Thought (GoT):一个具备提高LLM提示能力,超越了思维链或思维树 (ToT) 等范式提供的能…

大数据Flink(七十一):SQL的时间属性

文章目录 SQL的时间属性 一、Flink三种时间属性简介

MPI之通信模式(标准,缓存,同步,就绪)

MPI缓冲区 由MPI自行维护的一块内存区域,也可由用户(MPI_Bsend)自行维护;发送方 维护一块发送缓冲区; 接收方 维护一块接收缓冲区。 数据收发过程: 当发送端将数据拷贝到自身的数据缓冲区后(注意这里是拷贝,即数据到…

Unity中Shader的帧缓存区Clear(color+Z+stencil)

文章目录 前言一、什么是帧缓冲区二、片段运算三、随机扫描显示器(可以按照自定义路径绘制帧)四、光栅扫描显示器(从左到右,从上到下,依次绘制)五、缓冲的方式:单缓冲 和 双缓冲1、单缓冲2、双缓…

oled--SSD1315驱动

OLED 接口方式(由硬件电路确定):6800、8080、spi、i2c. 常见的驱动芯片:ssd1306、ssd1315。 oled屏幕的发光原理不同于lcd,上电后无法直接显示,需要初始化后才能正常显示。 SSD1315手册资料 SSD1315是一款…

pom.xml配置文件失效,显示已忽略的pom.xml --- 解决方案

现象: 在 Maven 创建模块Moudle时,由于开始没有正确创建好,所以把它删掉了,然后接着又创建了与一个与之前被删除的Moudle同名的Moudle时,出现了 Ignore pom.xml,并且新创建的 Module 的 pom.xml配置文件失效&#xf…

OpenGL-入门-BMP像素图glReadPixels(1)实现读取屏幕中间的颜色和获取屏幕上鼠标点击位置的颜色

glReadPixels函数用于从帧缓冲区中读取像素数据。它可以用来获取屏幕上特定位置的像素颜色值或者获取一块区域内的像素数据。下面是该函数的基本语法: void glReadPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *da…

质谱技术对蛋白质进行鉴定

参考B站教学视频: 质谱如何鉴定蛋白质_哔哩哔哩_bilibili 针对该视频,别人的 笔记 质谱是一台体重秤,称的不是人,而是分子、原子的体重 不同分子有不同分子量是质谱仪工作的底层逻辑 图片来自:【蛋白组】蛋白质组定量技术的原理和…

【UE 材质】实现方形渐变、中心渐变材质

步骤 一、实现方形渐变 1. 新建一个材质,材质域选择“后期处理” 2. 通过“Mask”节点单独获取R、G通道,可以看到R通道是从左到右0~1之间的变化,对应U平铺 可以看到G通道是从上到下0~1之间的变化,对应V平铺 3. 完善如下节点 二、…

2023年高教社杯数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 最短时…

数据分析作业2

中国在 2020 年开展第七次全国人口普查,截止 2021 年 5 月 11 日普查结果公布,全国人口共1411778724人。单从数据表格看相关数据不够直观,需要进行数据可视化展示,方便查看数据结果。 任务一:链接 MySQL 数据库&#x…

npm报错sass

1.删除node模块 2.删除node-sass: npm uninstall node-sass 3.重新下载对应版本node-sass: npm i node-sass7.0.3(指定版本 控制台报错什么版本就写什么版本) 4.再运行项目 或者

jdk-8u371-linux-x64.tar.gz jdk-8u371-windows-x64.exe 【jdk-8u371】 全平台下载

jdk-8u371 全平台下载 jdk-8u371-windows-x64.exejdk-8u371-linux-x64.rpmjdk-8u371-linux-x64.tar.gzjdk-8u371-macosx-x64.dmgjdk-8u371-linux-aarch64.tar.gz 下载地址 迅雷云盘 链接:https://pan.xunlei.com/s/VNdLL3FtCnh45nIBHulh_MDjA1?pwdw4s6 百度…

基于Matlab实现生活中的图像信号分类(附上源码+数据集)

在我们的日常生活中,我们经常会遇到各种各样的图像信号,例如照片、视频、图标等等。对这些图像信号进行分类和识别对于我们来说是非常有用的。在本文中,我将介绍如何使用Matlab来实现生活中的图像信号分类。 文章目录 介绍源码数据集下载 介…

什么是伪类链(Pseudo-class Chaining)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Pseudo-class Chaining⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚…

(十九)大数据实战——Flume数据采集框架安装部署

前言 本节内容我们主要介绍一下大数据数据采集框架flume的安装部署,Flume 是一款流行的开源分布式系统,用于高效地采集、汇总和传输大规模数据。它主要用于处理大量产生的日志数据和事件流。Flume 支持从各种数据源(如日志文件、消息队列、数…

【计算机硬件CPU】

【计算机硬件CPU】 1、计算机硬件的五大单元2、一切设计的起点: CPU 的架构3、精简指令集 (Reduced Instruction Set Computer, RISC)4、复杂指令集(Complex Instruction Set Computer, CISC)5、例题:最新的…

Vue框架--Vue中el和data的两种写法

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例,随后再通过vm.$mount(#root)指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择:目前哪种写法都可以,以后学习到组件时&#xff…

一些测试知识

希望能起到帮助,博主主页: https://blog.csdn.net/qq_57785602/category_12023254.html?spm1001.2014.3001.5482 软件测试理论 测试的依据: 需求,规格说明,模型,用户需求等 什么是软件测试 描述一种来…

Python Opencv实践 - 矩形轮廓绘制(直边矩形,最小外接矩形)

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/stars.png") plt.imshow(img[:,:,::-1])img_gray cv.cvtColor(img, cv.COLOR_BGR2GRAY) #通过cv.threshold转换为二值图 ret,thresh cv.threshold(img_gray,…