echarts柱形图实现2.5D

news2024/9/24 17:43:32

思路:使用markpoint

option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0,14.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 13.3
      ],
      markPoint: {
        silent: true,
        label: {show: false},
        symbol:'diamond',
        symbolSize: [45,10],
        itemStyle: {
          borderColor: '#000'
        },
        data: [
          {coord: ['Jan',2]},
          {coord: ['Feb',14.9]},
          {coord: ['Mar',7]},
          {coord: ['Apr',23.2]},
          {coord: ['May',25.6]},
        ]
      },
       markLine: {
        silent: true,
        // label: {show: false},
        // symbol:'diamond',
        // symbolSize: [45,10],
        // itemStyle: {
        //   borderColor: '#000'
        // },
        // data: [
        //   {coord: ['Jan',2]},
        //   {coord: ['Feb',14.9]},
        //   {coord: ['Mar',7]},
        //   {coord: ['Apr',23.2]},
        //   {coord: ['May',25.6]},
        // ]
      },
    },
  ]
};

option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0,14.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 13.3
      ],
      markPoint: {
        silent: true,
        label: {show: false},
        symbol:'diamond',
        symbolSize: [45,10],
        itemStyle: {
          borderColor: '#000'
        },
        data: [
          {coord: ['Jan',2]},
          {coord: ['Feb',14.9]},
          {coord: ['Mar',7]},
          {coord: ['Apr',23.2]},
          {coord: ['May',25.6]},
        ]
      },
       markLine: {
        silent: true,
        label: {show: false},
        symbol: 'none',
        lineStyle: {
          type: 'solid',
          color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: 'rgba(0, 0, 0,1)'},
                    {offset: 1, color: 'rgba(0, 0, 0,0.5)'}
                  ]
                )
        },
        data: [{xAxis: 'Jan' },{xAxis: 'Feb' },{xAxis: 'Mar' },{xAxis: 'Apr' },]
      }
    },
  ]
};

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

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

相关文章

学习笔记Day21:转录组差异分析

转录组差异分析 差异分析难点在于将数据处理成需要的格式 表达矩阵 数值型矩阵-count 行名是symbol 低表达量的基因需要过滤 分组信息 因子,对照组在level第一位 与表达矩阵的列一一对应 项目名称 字符串(不要有特殊字符) TCGA-XX…

Codeforces Round 940 (Div. 2) C. How Does the Rook Move?

//dp删除后&#xff0c;可以堆成新的N*N. #include<bits/stdc.h> using namespace std; #define int long long const int mod1e97; const int n1e611; int a,b,c,d[n],l,r; signed main() {ios::sync_with_stdio(false);cin>>a;d[1]1;d[0]1;for(int i2;i<3e…

4个AI写作助手,给你高效率的写作体验

在当今信息爆炸的时代&#xff0c;写作已经成为许多人工作和学习中不可或缺的一部分。然而&#xff0c;有时候我们可能会遇到写作灵感枯竭、表达受限等问题。幸运的是&#xff0c;随着人工智能技术的不断发展&#xff0c;AI写作助手已经成为许多写作者的得力帮手。在本文中&…

web 学习第六次课程

文章目录 定位 定位 <body><div style"height:100px;width:100px;border:#F00 1px solid;"></div><div style"height:100px;width:100px;border: #00F 1px solid;"></div> </body><body><div style"pos…

20240422,C++文件操作

停电一天之后&#xff0c;今天还有什么理由不学习呜呜……还是没怎么学习 一&#xff0c;文件操作 文件操作可以将数据持久化&#xff0c;对文件操作时须包含头文件<fstream> 两种文件类型&#xff1a;文本文件&#xff1a;文件以文本的ASCII码形式存储&#xff1b;二进…

算法打卡day39

今日任务&#xff1a; 1&#xff09;卡码网57. 爬楼梯&#xff08;70. 爬楼梯进阶版&#xff09; 2&#xff09;322.零钱兑换 3&#xff09;279.完全平方数 4&#xff09;复习day14 卡码网57. 爬楼梯&#xff08;70. 爬楼梯进阶版&#xff09; 题目链接&#xff1a;57. 爬楼梯…

太奇怪了!99%的人没见过的Oracle故障:网络恢复后,集群的监听和vip无法启动

故障描述 15:46操作系统日志出现net4、net5网卡down&#xff0c;15:53分钟的网络恢复。网络中断是由于db汇聚交换机出现了问题。 网络恢复后&#xff0c;节点1的监听和vip无法启动。 故障分析 查看grid alert日志可以看到监听资源确实没有正常启动。 由于监听资源是crs的Ora…

Redis服务

参考文章&#xff1a; Win.dow.s上安装Redis教程 redis数据库基础篇 Redis 的安装及图形化界面 Redis DeskTop Manager 的安装与使用 下载Redis Redis压缩包 打开Redis 法1&#xff1a; 双击redis-server.exe 应用程序 法2&#xff1a; 进入redis目录下&#xff0c;打cmd…

Python安装和开发环境搭建

Python的下载 访问Python语言官网(Welcome to Python.org)进行下载相关安装包&#xff0c;根据需要和系统环境、下载相应的windows/linux/macOs安装包。 ​ 更新的还是挺快的&#xff0c;都到3.12.3了。 直接点Download哪里的Python 3.12.3。 ​ 我这边系统是64位&#xf…

Rumble Club上线时间+配置要求+游戏价格+加速器推荐

Rumble Club上线时间配置要求游戏价格加速器推荐 Rumble Club是一款基于物理的玩家大乱斗游戏&#xff0c;该作拥有丰富饱满的视觉效果和趣味性十足的游玩极致&#xff0c;让玩家可以各种富有想象力的方式&#xff0c;推搡、戏耍好友。该作即将正式上线&#xff0c;为了避免玩…

MyBatis 框架学习(I)

MyBatis 框架学习(I) 文章目录 MyBatis 框架学习(I)1. 介绍2. 准备&测试3. MyBatis 注解基础操作3.1 日志输出3.2 Insert 操作3.3 Delete 操作3.4 Update 操作3.5 Select 操作 总结 1. 介绍 之前我们学习过利用JDBC操作数据库进行项目开发&#xff0c;但我们发现它操作起来…

Mybatis多表查询和注解开发

文章目录 Mybatis多表查询套路一对一查询一对多查询 注解开发概述相关注解步骤新增主键回填 查询别名映射模糊查询 动态SQL(了解) Mybatis多表查询 套路 基于需求编写SQL语句基于SQL语句的查询结果&#xff0c;分析类与类之间关联(建立实体类和实体类的关联)在映射文件中&…

2024年51cto视频如何提取

2024年51cto视频如何提取出来&#xff0c;本文就教大家如何下载51cto网页上的视频 首先要准备以下工具 小白51cto链接&#xff1a;https://pan.baidu.com/s/1kbsK2w4rjK8VQcSSg_B0aw?pwd1234 提取码&#xff1a;1234 --来自百度网盘超级会员V10的分享 1.首先下载我给大家…

【Linux】破解工具John the Ripper和端口扫描工具NMAP

一、弱口令检测---John the Ripper 1.了解 John the Ripper John the Ripper 是一款开源的密码破解工具&#xff0c;可使用密码字典&#xff08;包含各种密码组合的列表文件&#xff09;来进行暴力破解。 一款密码分析工具&#xff0c;支持字典式的暴力破解通过对shadow文件…

数据结构系列-堆排序

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 昨天我们实现的堆的搭建&#xff0c;我们今天实现以下堆的排序&#xff0c; 堆的排序的最大的优点就是提高的效率&#xff0c;减小了时间复杂度&#xff0c;在这个里面我们有一个…

YoloV8改进策略:卷积改进|DOConv轻量卷积,即插即用|适用各种场景

摘要 本文使用DOConv卷积&#xff0c;替换YoloV8的常规卷积&#xff0c;轻量高效&#xff0c;即插即用&#xff01;改进方法非常简单。 DO-Conv&#xff08;Depthwise Over-parameterized Convolutional Layer&#xff09;是一种深度过参数化的卷积层&#xff0c;用于提高卷…

52 文本预处理【动手学深度学习v2】

将文本作为字符串加载到内存中。 将字符串拆分为词元&#xff08;如单词和字符&#xff09;。 建立一个词表&#xff0c;将拆分的词元映射到数字索引;将文本转换为数字索引序列&#xff0c;方便模型操作。

清华新突破,360°REA重塑多智能体系统:全方位提升复杂任务表现

引言&#xff1a;多智能体系统的新篇章——360REA框架 在多智能体系统的研究领域&#xff0c;最新的进展揭示了一种全新的框架——360REA&#xff08;Reusable Experience Accumulation with 360 Assessment&#xff09;。这一框架的提出&#xff0c;不仅是对现有系统的一次重大…

模块三——二分:704.二分查找

文章目录 前言二分查找算法简介特点学习中的侧重点算法原理模板 题目描述算法原理解法一&#xff1a;暴力解法解法二&#xff1a;二分查找算法算法流程细节问题循环结束的条件为什么是正确的&#xff1f;时间复杂度 代码实现 前言 本系列博客是逐渐深入的过程&#xff0c;建议…

函数的内容

一&#xff0c;概念 封装一份可以被重复执行的代码块&#xff0c;让大量代码重复使用 二&#xff0c;函数使用 大体分两步&#xff1a;声明函数&#xff0c;调用函数 声明函数有关键字&#xff1a;function 函数名&#xff08;&#xff09;{ 函数体 } 为基本格式&#xf…