echarts-象形柱图

象形柱图

在这里插入图片描述

一般的柱图都是纯色柱图,使用象形柱图可以给柱图定义自己的样式。
样式的调节与柱图一样,核心在于symbol调节柱图的组成。


let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",data: [10, 20, 42, 60],},],};

在这里插入图片描述
使用symbol设置图形类型

 let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbol: "image://http://localhost:5173/R-C.jfif",data: [10, 20, 42, 60],},],};

在这里插入图片描述
symbolRepeat:指定图形元素是否重复。
设置symbolRepeat后图形会堆叠。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbol: "image://http://localhost:5173/R-C.jfif",symbolRepeat: true,data: [10, 20, 42, 60],},],};

在这里插入图片描述
设置 symbolSize调整大小后会有层叠的效果。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbol: "image://http://localhost:5173/R-C.jfif",symbolRepeat: true,symbolSize: ["100%", "10%"],data: [10, 20, 42, 60],},],};

在这里插入图片描述

伪3D柱状图

1.画出底部的圆圈和柱图

 let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [50, 50, 50, 50],itemStyle: {opacity: 0.1,},barWidth: 40,},],};

在这里插入图片描述
symbolPosition 图形的定位位置,'end’图形边缘与柱子结束的地方内切。 symbolPosition必须设置symbolRepeat才会生效。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [90, 90, 90, 90],itemStyle: {opacity: 0.1,},barWidth: 40,},{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,symbolPosition: "end",//设置 symbolRepeat后才会生效symbolOffset: [0, 30],symbolRepeat: true,},],};

在这里插入图片描述
barGap:不同系列的柱间距离,如果想要两个系列的柱子重叠,可以设置 barGap 为 ‘-100%’。

let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [90, 90, 90, 90],itemStyle: {opacity: 0.1,},barWidth: 40,},{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,symbolPosition: "end", //设置 symbolRepeat后才会生效symbolOffset: [0, 30],symbolRepeat: true,},{type: "bar",barGap: "-100%",barWidth: 40,data: [10, 20, 30, 40],},],};

在这里插入图片描述
如果想要底部和柱状图之间有距离,可以在设置一个bar柱状图,让他们堆叠在一起,然后再设置颜色为透明的。

 let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],},yAxis: {min: 0,max: 100,},series: [{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,},{type: "bar",data: [90, 90, 90, 90],itemStyle: {opacity: 0.1,},barWidth: 40,},{type: "pictorialBar",symbolSize: [40, 10],data: [1, 1, 1, 1],z: 999,symbolPosition: "end", //设置 symbolRepeat后才会生效symbolOffset: [0, 30],symbolRepeat: true,},{type: "bar",barGap: "-100%",barWidth: 40,stack: "total",itemStyle: {opacity: 0,},data: [1.9, 1.9, 1.9, 1.9],},{type: "bar",barGap: "-100%",barWidth: 40,stack: "total",data: [10, 20, 30, 40],},],};

在这里插入图片描述

圣诞愿望清单和山峰高度 官网例子


let options = {tooltip: {},xAxis: {type: "category",data: ["d1", "d2", "d3", "d4"],axisLine: { show: false },axisLabel: { show: false },axisTick: { show: false },},yAxis: {min: 0,max: 15000,splitLine: { show: false },axisTick: { show: false },axisLine: { show: false },axisLabel: { show: false },},series: [{type: "pictorialBar",label: {show: true,position: "top",color: "#e54035",},data: [{Symbol: "image://" + paperDataURI,symbolSize: ["130%", "20%"],symbolRepeat: true,symbolMargin: "-30%",value: 13000,itemStyle: {},z: 900,},0,{value: 8864,symbol: "image://http://localhost:5173/hill-Qomolangma.png",//   symbolSize: ["200%", "105%"],},{value: 5895,symbol: "image://http://localhost:5173/hill-Kilimanjaro.png",// symbolSize: ["200%", "105%"],},],},],};

e

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

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

相关文章

具有固定宽度的盒子:\makebox, \parbox

makebox \makebox 是 LaTeX 中的一个命令&#xff0c;用于创建一个具有固定宽度的盒子&#xff0c;并在该盒子内放置内容。这个命令可以用于控制文本或对象的位置和对齐。 语法如下&#xff1a; \makebox[<width>][<alignment>]{<content>}其中&#xff1…

存储+调优:存储-memcached

存储调优&#xff1a;存储-memcached 什么是memcached? 高性能的分布式内存缓存服务器。通过缓存数据库的查询结果&#xff0c;减少数据库访问次数&#xff0c;以提高动态Web应用的速度、提高可扩展性。 在memcached中存什么&#xff1f; 尽快被保存 访问频率高 1.数据保…

unity回到低版本报错解决

用高版本2022打开过后的再回到2020就报了一个错。 报错如下&#xff1a; Library\PackageCache\com.unity.ai.navigation1.1.5\Runtime\NavMeshSurface.cs 看了一下是Library&#xff0c;然后我删除了整个Library文件夹&#xff0c;重启启动生成Library&#xff0c;然后还是…

IT人的拖延——渴望成功与害怕成功的矛盾

很多人都以为&#xff0c;害怕失败是拖延的主要诱因&#xff0c;但其实“害怕成功”也是拖延的主要诱因之一。要说这个原因&#xff0c;我们不得不提起Bible中的一个人“约拿”&#xff0c;让我们先来看看他的故事带给我们什么启示。 约拿情结简介 约拿是Bible中的一名先知&a…

二十九、openlayers官网示例DeclutterGroup解析——避免矢量图层的文字重叠

官网demo地址&#xff1a; Declutter Group 这篇说的是如何设置矢量图层上多数据点文字不重叠。 主要是属性declutter &#xff0c;用于处理矢量图层上重叠的标注和符号&#xff0c;为true时启用去重叠功能。所有矢量特征的标注和符号都会被处理以避免重叠。false则与之相反。…

es安装错误Exception in thread “main“ java.nio.file.NoSuchFileException解决方案

docker 启动es出现一下错误的解决方案 Exception in thread “main” java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.options Exception in thread "main" java.nio.file.NoSuchFileException: /usr/share/elasticsearch/config/jvm.op…

香橙派OrangePi AIpro,助力国产AIoT迈向新的台阶!

前言&#xff1a;很高兴受邀CSDN与OrangePi官方组织的测评活动&#xff0c;本次测评是一块基于AI边缘计算的香橙派开发板OrangePi AIpro。这是 香橙派 联合 华为昇腾 合作精心打造的新一代边缘AI计算产品&#xff0c;于2023年12月初发布&#xff0c;提供 8/20TOPS澎湃算力[1]&a…

Java | Leetcode Java题解之第102题二叉树的层序遍历

题目&#xff1a; 题解&#xff1a; class Solution {public List<List<Integer>> levelOrder(TreeNode root) {Queue<TreeNode> queue new LinkedList<>();List<List<Integer>> res new ArrayList<>();if (root ! null) queue.a…

Git和plink

安装git的话首先进入到git官网进行下载Git - Downloading Package (git-scm.com) &#xff0c;点击便会自动进行下载。 安装plink时也是根据自己电脑的版本号选择进行安装&#xff0c;我的是windows的64位&#xff0c;由此选择以上版本进行安装&#xff0c;这一个下载完成之后不…

python lxml安装失败怎么解决

通过pip install lxml 安装lxml多次失败&#xff0c;失败原因总结如下&#xff1a; 1、pip版本未更新 解决方法&#xff1a;通过pip安装时&#xff0c;需保证pip的版本没有问题。 更新方法&#xff1a;在系统框输入&#xff1a;python -m pip install --upgrade pip 2、下载…

好消息!DolphinScheduler官网集成LLM模型问答AI kapa.ai

不少小伙伴可能发现了&#xff0c;Apache DolphinScheduler官网最近默默上线了kapa.ai作为LLM的问答AI。 集成kapa.ai之后&#xff0c;社区用户可以点击Apache DolphinScheduler官网首页右下角的「Ask AI」模块&#xff0c;在接下来弹出的问答框输入自己的问题&#xff0c;即可…

python uiautomator2 常用操作

uiautomator2 安装 python uiautomator2 安装及使用-CSDN博客 一&#xff0c; 通过包名可以打开app d.app_start(com.gacne.www) 打开app运行后执行代码&#xff0c;查看app具体信息获取包名 d.info二&#xff0c;执行等待点击 # 160秒内等待xpath定位的出现执行点击 d.xpat…

mysql中单表查询的成本

大家好。我们知道MySQL在执行一个查询时&#xff0c;经常会有多个执行方案&#xff0c;然后从中选取成本最低或者说代价最低的方案去真正的执行查询。今天我们来聊一聊单表查询的成本。 那么到底什么是成本呢&#xff1f;这里我们说的成本或者代价是由两方面组成的&#xff1a…

【踩坑】编译opencv将python (for build) python2.7改为python3

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 出现问题 默认是2.7 解决方案 cmake时候添加&#xff1a; -D PYTHON_DEFAULT_EXECUTABLE$(which python3)

02 Prometheus入门安装教程

02 Prometheus入门安装教程 大家好&#xff0c;我是秋意零。今天分享一篇入门级Prometheus安装教程。 环境准备 三台Linux虚拟机&#xff08;一台也可以&#xff09; 准备Prometheus、相关组件安装包 Prometheus官网下载安装包比较慢&#xff0c;如果没有魔法。可关注公众号…

【UnityUI程序框架】The PureMVC Framework核心你会用吗

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Python | Leetcode Python题解之第105题从前序与中序遍历序列构造二叉树

题目&#xff1a; 题解&#xff1a; class Solution:def buildTree(self, preorder: List[int], inorder: List[int]) -> TreeNode:if not preorder:return Noneroot TreeNode(preorder[0])stack [root]inorderIndex 0for i in range(1, len(preorder)):preorderVal pr…

计算机毕业设计python+spark天气预测 天气可视化 天气大数据 空气质量检测 空气质量分析 气象大数据 气象分析 大数据毕业设计 大数据毕设

摘 要 近些年大数据人工智能等技术发展迅速&#xff0c;我国工业正努力从“制造”迈向“智造”实现新跨越。神经网络(NeuronNetwork)是一种计算模型&#xff0c;通过大量数据的学习&#xff0c;来发现数据之间的模式和规律&#xff0c;模仿人脑神经元的工作方式。随着算力的提…

音视频集市应用融合平台方案

音视频应用即有深度又有广度&#xff0c;如何让一个平台拥有更多功能更灵活的拓展能力&#xff0c;从单体模块化&#xff0c;多插件到微服务都有大量的实践。 笔者在实际开发过程也同样面对这些纷繁复杂而又必须共容共通需求的挑战。 在实战开发了大量从服务端到设备端再到浏览…

vos3000外呼系统如何查询授权信息和系统并发

要查询VOS3000外呼系统的授权信息和系统并发情况&#xff0c;您可以按照以下步骤进行&#xff1a; 登录系统管理界面&#xff1a; 使用管理员账号登录VOS3000外呼系统的管理界面。 查找系统信息&#xff1a; 寻找系统信息或授权管理的相关选项或标签。 查询授权信息&#xff…