echarts配置记录,一些已经废弃的写法

1、normal,4.0以后无需将样式写在normal中了

改前:

改后:

DEPRECATED: 'normal' hierarchy in labelLine has been removed since 4.0. All style properties are configured in labelLine directly now.
2、axisLabel中的文字样式无需使用textStyle包裹。

直接提到最外层即可

textStyle hierarchy in axisLabel has been removed since 4.0. All textStyle properties are configured in axisLabel directly now
3、左右(上下)双柱状图的实现,如图所示

实现原理是将另一个维度的数据设置成负数,然后在展示的时候格式化一下,将悬浮和label中的展示效果都显示成绝对值模式。

前提是:两个维度的值都只有正值。

配置片段:

option = {xAxis: [{type: 'value',axisTick: {show: false},axisLabel: {show: true,color: '#4E6FA1',formatter: function (data) {return Math.abs(data);}},max: null, //设置最大值,防止柱状图两侧范围差距过大}],yAxis: [{type: 'category',axisTick: {show: false},axisLine: {show: true,lineStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#fff' }, // 开始颜色{ offset: 0.5, color: 'blue' }, // 结束颜色{ offset: 1, color: '#fff' } // 开始颜色])}},axisLabel: {color: '#4E6FA1'},data: []}],
series: [{name: '等待中',type: 'bar',stack: '总量',barWidth: 12,},// {//   name: '生产中',//   type: 'bar',//   stack: '总量',//   barWidth: 12,//   data: [-120, -180, -120, -120, -132, -101, -134, -190, -230, -210]// }]
}
4、饼图中间放置图片

option={graphic: {elements: [{type: 'image',style: {image: logo,width: 50,height: 50},left: 'center',top: 'center'}]},
}

特殊备注:一些echarts实例网站收集——

PPChart - 让图表更简单

echarts图表集

数据可视化技术分享-echarts热门组件 - Powered by Discuz!

G6和流程可视化 · 语雀

ECharts 作品集

特殊备注:动画效果网站收集——

Hamburgers by Jonathan Suh

Transition.css - easy transitions with clip-path

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

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

相关文章

文本处理工具grep及sed

文章目录 一、grep文本处理工具二、sed文本处理工具基本用法sed脚本格式搜索替代 一、grep文本处理工具 选项含义-color对匹配到的文本着色显示-m 次数匹配到规定的次数后停止-v显示不被命令匹配到的行,即取反-i忽略字符大小写-n显示匹配的行号-c统计匹配的行数-o仅显示匹配到…

log4j2远程代码执行

漏洞复现 漏洞复现2 这个框架不是web框架了,不是服务器web网站框架了,是java日志框架,就是记录日志信息,每一个程序都有一个日志文件,这个就是java里面记录日志的一个框架,它存在的点也是日志框架那几个代…

Java语言规范

Java程序的结构 package—0或1条,出现在程序最开始的地方 Import—0或1条,用于引入Java提供的API class—创建自定义的类,public修饰的class类的类名需要跟文件名完全保持一致 main方法—可执行Java程序的入口,具体介绍查看2.…

Flutter 中的 BackdropFilter 小部件:全面指南

Flutter 中的 BackdropFilter 小部件:全面指南 在Flutter中,BackdropFilter是一个用于创建模糊和颜色调整效果的高级小部件,它可以对组件背后的内容应用滤镜效果。这使得BackdropFilter非常适合实现如背景模糊、颜色混合等复杂的视觉效果。本…

[力扣题解] 463. 岛屿的周长

题目:463. 岛屿的周长 思路 深度优先搜索; 代码 Method 1 对于遍历到的一个地块,向四周探索,越界或者遇到海洋地块说明这条边需要统计; class Solution { private:int dir[4][2] {{1, 0}, {-1, 0}, {0, 1}, {0,…

请叙述Vue 中使用了哪些设计模式

在Vue中,使用了多种设计模式来构建其框架和组件系统,这些设计模式使得Vue具有高效、灵活和易于维护的特性。以下是Vue中常见的设计模式及其简要描述: MVVM(Model-View-ViewModel)模式: Vue.js是一个MVVM框架…

我用LLaMA-Factory微调大模型来实现商品评论情感分析,准确率高达91.70%

大家好,我是程序锅。 最近在modelscope上闲逛的时候,在数据集板块发现有一个商品评论情感预测数据集。这个数据集源自一个比赛,它的目的是为了预测电商平台顾客的评论是好评还是差评。 数据示例如下所示(其中0代表差评&#xff…

数据库漫谈-sybase

sybase就是“system”加“database”,代表着信息系统的底层。Sybase公司很早就推出了关系数据库产品(1987年5月推出的Sybase SQLServer1.0)。Sybase也是第一个提出Client/Server 体系结构的思想,并率先在Sybase SQLServer 中实现。…

Go 和 Delphi 定义可变参数函数的对比

使用可变参数函数具有灵活性、重用性、简化调用等优点,各个语言有各自定义可变参数函数的方法,也有通用的处理方法,比如使用数组、定义参数结构体、使用泛型等。 这里总结记录一下 go、delphi 的常用的定义可变参数函数的方式! 一…

基于图卷积网络的人体3D网格分割

深度学习在 2D 视觉识别任务上取得了巨大成功。十年前被认为极其困难的图像分类和分割等任务,现在可以通过具有类似人类性能的神经网络来解决。这一成功归功于卷积神经网络 (CNN),它取代了手工制作的描述符。 NSDT工具推荐: Three.js AI纹理开…

1301-习题1-1高等数学

1. 求下列函数的自然定义域 自然定义域就是使函数有意义的定义域。 常见自然定义域: 开根号 x \sqrt x x ​: x ≥ 0 x \ge 0 x≥0自变量为分式的分母 1 x \frac{1}{x} x1​: x ≠ 0 x \ne 0 x0三角函数 tan ⁡ x cot ⁡ x \tan x \cot x …

C++奇迹之旅:vector使用方法以及操作技巧

文章目录 📝前言🌠 熟悉vector🌉使用vector 🌠构造函数🌉vector遍历 🌠operator[]🌉迭代器 🌠Capacity容量操作🌉 size()🌉 capacity()🌉resize()…

Vue生命周期钩子是如何实现的

Vue的生命周期钩子是在Vue组件创建、挂载、更新、销毁等过程中自动调用的特殊函数。这些钩子允许开发者在组件的不同阶段执行特定的逻辑。Vue 2 和 Vue 3 在生命周期钩子上有一些差异,主要是因为Vue 3引入了Composition API和更现代的JavaScript特性。 Vue 2 的生命…

C语言中的七种常用排序

今天&#xff0c;为大家整理了C语言中几种常用的排序&#xff0c;以及他们在实际中的运用&#xff08;有Bug请在下方评论&#xff09;&#xff1a; 一.桶排序 #include <stdio.h> int main() {int book[1001],i,j,t,n;for(i0;i<1000;i)book[i]0;scanf("%d"…

二进制中1的个数c++

题目描述 计算鸭给定一个十进制非负整数 NN&#xff0c;求其对应 22 进制数中 11 的个数。 输入 输入包含一行&#xff0c;包含一个非负整数 NN。(N < 10^9) 输出 输出一行&#xff0c;包含一个整数&#xff0c;表示 NN 的 22 进制表示中 11 的个数。 样例输入 100 …

Verilog实战学习到RiscV - 2 : wire 和 reg 的区别

Verilog: wire 和 reg 的区别 1 引言 看Verilog例子过程中&#xff0c;总是分不清 wire 和 reg 的区别。这篇文章把两者放在一起总结一下&#xff0c;并且对比何时使用它们。 1.1 wire &#xff1a;组合逻辑 wire 是 Verilog 设计中的简单导线&#xff08;或任意宽度的总线…

mysql 权限apparmor=“DENIED“问题

简单记录下&#xff0c;最近安装一个mysql&#xff0c;但是修改了对应的数据文件的目录&#xff0c;也就是在/etc/mysql 修改了对应配置文件 [mysqld] datadir/data/mysql/data socket/var/lib/mysql/mysql.sock group_concat_max_len1024000 log-error/data/mysql/log/mysql-…

001集—创建、写入、读取文件fileopen函数——vb.net

此实例为在指定路径下创建一个txt文本文件&#xff0c;在文本文件内输入文字&#xff0c;并弹窗显示输入文字&#xff0c;代码如下&#xff1a; Public Class Form1Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.ClickDim testcontent As Str…

算法在C++中的应用

算法是计算机程序设计的核心&#xff0c;是解决特定问题的一系列步骤或指令的集合。而C作为一种高级编程语言&#xff0c;提供了实现这些算法的工具和平台。C的丰富特性&#xff0c;如面向对象编程、泛型编程、模板元编程等&#xff0c;使得算法的实现更为高效、灵活和易于维护…

英语学习笔记26——Where is it?

Where is it? 它在那里&#xff1f; 课文部分