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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++Qt操作Lotus Domino数据库 Lotus Domino C++连接Lotus Domino C++快速开发Lotus Domino

java连接domino C#连接domino python连接domino go连接domino,delphi连接domino Excel连接domino Flutter、微信小程序连接domino C 操作 Lotus Domino 数据库:自动化与效率的结合 引言 在企业级应用中,Lotus Domino 提供了一个强大的协作平台&#xff0…

牛客NC324 下一个更大的数(三)【中等 双指针 Java/Go/PHP/C++】参考lintcode 52 · 下一个排列

题目 题目链接: https://www.nowcoder.com/practice/475da0d4e37a481bacf9a09b5a059199 思路 第一步:获取数字上每一个数,组成数组arr 第二步:利用“下一个排列” 问题解题方法来继续作答,步骤:利用lintc…

【Apache Doris】BE宕机问题排查指南

【Apache Doris】BE宕机问题排查指南 背景BE宕机分类如何判断是BE进程是Crash还是OOMBE Crash 后如何排查BE OOM 后如何分析Cache 没及时释放导致BE OOM(2.0.3-rc04) 关于社区 作者|李渊渊 背景 在实际线上生产环境中,大家可能遇…

新建一个STM32工程(精简版)

一、新建一个STM32工程 二、建立三个文件夹 1、Start文件夹里的东西 (1)启动文件:STM32入门教程资料\固件库\STM32F10x_StdPeriph_Lib_V3.5.0\Libraries\CMSIS\CM3\DeviceSupport\ST\STM32F10x\startup\arm (2)STM32…

springboot社区助老志愿服务系统-计算机毕业设计源码96682

摘要 大数据时代下,数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求,利用互联网服务于其他行业,促进生产,已经是成为一种势不可挡的趋势。在图书馆管理的要求下,开发一款整体式结构的社区助老志愿服务…

OFDM 802.11a的FPGA实现(二十)使用AXI-Stream FIFO进行跨时钟(含代码)

目录 1.前言 2.AXI-Stream FIFO时序 3.AXI-Stream FIFO配置信息 4.时钟控制模块MMCM 5.ModelSim仿真 6.总结 1.前言 至此,通过前面的文章讲解,对于OFDM 802.11a的发射基带的一个完整的PPDU帧的所有处理已经全部完成,其结构如下图所示&…

Linux echo命令(在终端输出文本)

文章目录 Linux Echo命令深度解析简介命令语法常见选项- -n:不输出行尾的换行符,这意味着输出后不会换到下一行。- -e:启用反斜杠转义的解释,允许使用特殊字符。- -E:禁用反斜杠转义的解释(默认选项&#x…

CI/CD 管道中的自动化测试:类型和阶段

在上一篇文章中,我们讨论了敏捷团队自动化测试用例的各种用例。其中一种情况是,团队希望将测试与每个构建集成,并将持续集成作为构建过程的一部分。 在本文中,我们将讨论持续集成/持续交付平台中的集成测试。 让我们先从基础知识…

嵌入式全栈开发学习笔记---C语言笔试复习大全22

目录 结构体 结构体的声明 定义结构体变量 访问结构体成员进行初始化 通过结构体变量名访问结构体成员 结构体指针 结构体指针的定义 通过结构体指针访问结构体成员 结构体数组 结构体数组的定义 遍历结构体数组 结构体的长度(笔试重点) 上一…

Attention相关问题笔试解析。

Attention相关问题笔试解析。 题目描述一:【选择】题目描述二:【简答】题目描述三:【代码】Scaled Dot-Product Attention:下面是用PyTorch实现的一个Attention机制的代码。这个实现包括一个简单的Scaled Dot-Product Attention机…

【大模型部署】在C# Winform中使用文生图Stable Diffusion XL 模型

【大模型部署】在C# Winform中使用文生图Stable Diffusion XL 模型 前言 整了一个在C# Winform中调用文生图Stable Diffusion XL的小程序,基于百度智能云千帆平台 步骤 如何注册百度智能云和创建应用,获取API 密钥等和在之前的博客中基本相同&#…

P6160 [Cnoi2020] 向量

[Cnoi2020] 向量 题目背景 向量(vector),指具有大小(Magnitude)和方向(Direction) 的量。 与向量对应的量叫做数量(Scalar),数量只有大小,没有方向。 对于 Cirno 来说,整天环绕氷屋的旋转 Sangetsusei 们是向量而不是数量。 Sun…

spring模块(三)Spring AOP(2)使用

一、demo 1、spring项目 &#xff08;1&#xff09;pom <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-core</artifactId><version>4.3.13.RELEASE</version></dependency>&l…

[数组查找]1.图解线性查找及其代码实现

线性查找 线性查找是一种在数组中查找数据的算法。与二分查找不同&#xff0c;即便数据没有按顺序存储&#xff0c;也可以应用线性查找。线性查找的操作很简单&#xff0c;只要在数组中从头开始依次往下查找即可。虽然存储的数据类型没有限制&#xff0c;但为了便于理解&#x…

CorelCAD v2022.5 解锁版 安装教程(2D制图 3D设计和打印的简化软件)

前言 CorelCAD&#xff0c;加拿大Corel公司开发的一款适用于2D制图、3D设计和打印的简化版CAD软件。它是款专业的2D制图和3D设计软件&#xff0c;拥有行业标准文件兼容性&#xff0c;支持 .DWG、.STL、.PDF、 .CDR*等文件格式&#xff0c;轻松实现协作和项目共享&#xff0c;利…

电商零基础的人,可以做抖音小店吗?它操作难度大吗?

大家好&#xff0c;我是电商糖果 随着短视频电商的热度越来越大&#xff0c;很多消费者都有了抖音购物的习惯。 于是入驻抖音开店就成了很多人创业做电商的首选。 可是抖音推出的电商项目——抖音小店&#xff0c;出来的时间不是很久&#xff0c;很多人对它了解也不深&#…

2024年5月LLM最新排名:GPT-4o出道即巅峰!国内3个大模型榜上有名!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

设计模式 17 组合模式 Composite Pattern

设计模式 17 组合模式 Composite Pattern 1.定义 组合模式&#xff08;Composite Pattern&#xff09;&#xff0c;又叫部分整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次。这种类型的设…

Java进阶学习笔记21——泛型概念、泛型类、泛型接口

泛型&#xff1a; 定义类、接口、方法的时候&#xff0c;同时声明了一个或者多个类型变量&#xff08;如: <E>&#xff09;,称之为泛型类、泛型接口、泛型方法&#xff0c;我们统称之为泛型。 说明这是一个泛型类。 如果不使用泛型&#xff0c;我们可以往ArrayList中传…

浅谈网络安全态势感知

前言 网络空间环境日趋复杂&#xff0c;随着网络攻击种类和频次的增加&#xff0c;自建强有力的网络安全防御系统成为一个国家发展战略的一部分&#xff0c;而网络态势感知是实现网络安全主动防御的重要基础和前提。 什么是网络安全态势感知&#xff1f; 态势感知一词来源于对…