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.rhkb.cn/news/333777.html

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

相关文章

1.Windows系统与Linux系统文件类型的大致区别

1.Windows系统常见的文件类型 2.Linux系统常见的文件类型 3.Windows系统和Linux系统文件扩展名区别

【Pandas】深入解析`pd.to_sql()`函数

【Pandas】深入解析pd.to_sql()函数 🌈 欢迎莅临我的个人主页👈这里是我深耕Python编程、机器学习和自然语言处理(NLP)领域,并乐于分享知识与经验的小天地!🎇 🎓 博主简介&#xff1…

中创算力与中国移动初步达成战略合作意向,共同构建智能生态圈!

2024年5月14日,为进一步深化合作,促进业务共同发展,实现双方优势互补。中国移动云能力中心高级专家、郑州移动总经理助理邵根波、管城分公司政企部经理张文孟、航海东路分局张旭红莅临中创算力。中创董事长许伟威、副总经理杨光、技术总监刘朝…

【Unity2D 2022:Cinemachine】相机跟随与地图边界

一、导入Cinemachine工具包 1. 点击Window-Package Manager,进入包管理界面 2. 点击All,找到Cinemachine工具包,点击Install 二、相机跟随角色 1. 选中Main Camera,点击Component-Cinemachine-CinemachineBrain,新建…

Rabbit MQ学习之《基础概念》

Message Queue 1 什么是MQ MQ(message queue),本质是个队列,FIFO 先入先出,只不过队列中存放的内容是message而已,同时是一种跨进程的通信机制,用于上下游传递消息。 在互联网架构中,MQ 是一种非常常见的…

网络流量探针与流量分析系统:全面指南

目录 什么是网络流量探针? 流量分析系统的功能与重要性 流量分析系统的主要功能 流量分析系统的重要性 AnaTraf 网络流量分析仪 如何选择合适的网络流量探针与流量分析系统? 1. 性能与扩展性 2. 易用性与部署 3. 数据可视化与报告 4. 安全性与…

代码随想录-算法训练营day46【动态规划08:单词拆分、多重背包!背包问题总结篇!】

代码随想录-035期-算法训练营【博客笔记汇总表】-CSDN博客 第九章 动态规划part08● 139.单词拆分 ● 关于多重背包,你该了解这些! ● 背包问题总结篇! 详细布置 关于 多重背包,力扣上没有相关的题目,所以今天大家的…

数据结构与算法之线性表01

数组是一种线性数据结构,把相同数据类型的元素存储在连续的内存空间中,数组的索引(元素在数组中的位置)从0开始。 一、常用操作: 1、初始化 # 给定初始值 arr:list[int] [0] * 5 nums:list[int] [1, 2, 3, 4, 5] …

基于EBAZ4205矿板的图像处理:10gamma变换

基于EBAZ4205矿板的图像处理:10gamma变换 项目全部文件 会上传项目全部文件,如果没传,可以私信催我一下,最近太忙了 先看效果 我的项目中的gamma的变换系数为2.2,是会让图像整体变暗的,看右图说明我的ga…

1992-2022年经过矫正的夜间灯光数据

DMSP/OLS夜间灯光的年份是1992-2013年,NPP/VIIRS夜间灯光的年份是2012-2021,且由于光谱分辨率、空间分辨率、辐射分辨率、产品更新周期等方面的差异,DMSP-OLS和SNPP-VIIRS数据不兼容,也就是说我们无法直接对比分析DMSP-OLS和SNPP-…

多线程基本常识

多线程的状态 在Java中,一个线程的生命周期有以下几种状态: 新建(New):当线程对象被创建时,线程处于新建状态。此时线程对象存在,但还没有调用start()方法启动线程。 运行(Runnable…

满帮集团 Eureka 和 ZooKeeper 的上云实践

作者:胡安祥 满帮集团,作为“互联网物流”的平台型企业,一端承接托运人运货需求,另一端对接货车司机,提升货运物流效率。2021 年美股上市,成为数字货运平台上市第一股。根据公司年报,2021 年&a…

C++ (week5):Linux系统编程3:线程

文章目录 三、线程1.线程的基本概念①线程相关概念②我的理解 2.线程的基本操作 (API)(1)获取线程的标识:pthread_self(2)创建线程:pthread_create()(3)终止线程①pthread_exit():当前线程终止,子线程主动退出②pthread_cancel()&…

深入解析BGP:互联网路由协议的全貌与应用

BGP(Border Gateway Protocol)是互联网上用于在自治系统(AS)之间交换路由信息的协议。它负责决定数据包的最佳路径以及路由的选择。以下是BGP的一些关键特点和工作原理的详细内容: BGP的特点: 1.路径矢量型…

Android开发 -- JNI开发

1.配置JNI环境 创建JNI文件夹 在项目的主目录中创建一个名为 JNI 的文件夹。这个文件夹将包含所有的本地源代码和配置文件。 编写Android.mk文件 这个文件是一个 Makefile,用来指导 NDK 如何编译和构建本地代码。 #清除之前定义的变量,确保每个模块的…

《python编程从入门到实践》day40

# 昨日知识点回顾 编辑条目及创建用户账户 暂没能解决bug: The view learning_logs.views.edit_entry didnt return an HttpResponse object. It returned None instead.# 今日知识点学习 19.2.5 注销 提供让用户注销的途径 1.在base.html中添加注销链接 …

运维笔记.Docker镜像分层原理

运维专题 Docker镜像原理 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/artic…

探讨大米自动化生产线包装设备的智能化发展趋势

随着科技的飞速发展,智能化已经成为各行各业转型升级的重要方向。在大米生产领域,自动化生产线包装设备的智能化发展更是引领着粮食产业的未来潮流。星派将从智能化技术、市场需求、发展趋势等方面,探讨大米自动化生产线包装设备的智能化发展…

java图书电子商务网站的设计与实现源码(springboot+vue+mysql)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的图书电子商务网站的设计与实现。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 图书电子商…

鸿蒙ArkTS声明式开发:跨平台支持列表【按键事件】

按键事件 按键事件指组件与键盘、遥控器等按键设备交互时触发的事件,适用于所有可获焦组件,例如Button。对于Text,Image等默认不可获焦的组件,可以设置focusable属性为true后使用按键事件。 说明: 开发前请熟悉鸿蒙开…