echarts柱形图实现2.5D

思路:使用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-ignoredata: ['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-ignoredata: ['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.mzph.cn/web/3442.shtml

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

相关文章

51单片机入门_江协科技_27~28_OB记录的自学笔记_AT24C02数据存储秒表

27. AT24C02(I2C总线) 27.1. 存储器介绍 27.2. 存储器简化模型介绍,存储原理 27.3. AT24C02介绍 •AT24C02是一种可以实现掉电不丢失的存储器,可用于保存单片机运行时想要永久保存的数据信息 •存储介质:E2PROM •通讯接口:I2…

Python基础:【习题系列】判断题(三)

在Python中,列表推导可以用来创建新的列表。 答案:对 Python中使用!操作符来检查两个值是否不相等。 答案:对 Python中的类定义中必须包含至少一个方法。 答案:错 nonlocal关键字用于在函数或其他作用域内访问外部(…

【JS基础】1.函数、匿名函数、回调函数、IIFE(立即执行函数)

【JS基础】1.函数、匿名函数、回调函数、IIFE(立即执行函数) 1. 认识函数 函数到底是什么? 函数其实就是某段代码的封装,这段代码帮助我们完成某一下功能JS引擎中有一些已经提供的函数我们也可以编写属于自己的函数 函数使用的步骤 声明函数&#xff1…

十大经典排序算法之插入排序。

插入排序 (Insertion Sort) ​ 插入排序(Insertion Sort)是一种简单直观的排序算法,它的基本思想是逐步构建最终的排序列表,每次将一个未排序的元素插入到已排序的部分的适当位置。 插入排序的基本步骤如下: 首先&a…

第十五届蓝桥杯省赛第二场C/C++B组E题【遗迹】题解

解题思路 错解 贪心:每次都移动至当前最近的对应方块上。 反例: s s s abxac t t t abac 贪心结果(下标) 0 → 1 → 0 → 4 0 \rightarrow 1 \rightarrow 0 \rightarrow 4 0→1→0→4,答案为 5 5 5。 正确结…

仿真-Carla初识-运行

目录 0.简介1.导入地图AdditionalMaps2.Carla运行 0.简介 carla-github下载 python是通过ip127.0.0.1,port 2000与Carla进行本地通讯的(脚本与CarlaUE4.exe在同一台电脑),下面可能是大家可能会遇到的问题; 代码中端口…

VMware配置centos虚拟机实现内网互通

VMware配置centos虚拟机实现内网互通 一、安装无桌面模式 环境说明: VMWare版本:VMware Workstation 17 Pro Centos版本:CentOS-7.9-x86_64-DVD-2009.iso 一键下载本文资源包 1. 安装虚拟机 下面是创建具体步骤,其中需要注意的是&#xff1…

说说2024年暑期三下乡社会实践工作新闻投稿经验

作为一名在校大学生,我有幸自去年起参与学院组织的暑期大学生三下乡社会实践团活动。这项活动不仅是我们深入基层、服务社会的重要平台,也是展现当代大学生风采、传递青春正能量的有效途径。然而,如何将这些生动鲜活的实践故事、感人至深的瞬间传播出去,让更多人了解并受到启发…

LeetCode54. 螺旋矩阵

LeetCode54.螺旋矩阵 题解思路 代码 class Solution { public:vector<int> spiralOrder(vector<vector<int>>& matrix) {vector<int> res;int n matrix.size();// 行int m matrix[0].size(); // 列vector<vector<bool>> st(n, v…

懂技术不代表懂互联网

作为一个技术开发者&#xff0c;也就是程序员&#xff0c;个人一直认为自己是一个互联网从业者&#xff0c;也认为自己懂互联网。但是&#xff0c;直到今天突然才发现&#xff0c;自己根本不懂互联网&#xff0c;自己认为的懂互联网只是从技术人员的角度理解互联网&#xff0c;…

【JAVA】PO、VO、DAO、BO、DTO、POJO你分得清吗?

在Java开发中&#xff0c;PO、VO、DAO、BO、DTO、POJO这些词汇是比较常见的&#xff0c;每个术语都有其特定的含义和用途。下面是它们的具体区别&#xff1a; 名称简要概况用途和特定PO (Persistence Object) 持…

2024.4.25力扣每日一题——总行驶距离

2024.4.25 题目来源我的题解方法一 模拟 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2739 我的题解 方法一 模拟 当mainTank还剩5升及以上的油&#xff0c;直接一次性减5升&#xff0c;距离加50&#xff0c;然后看additionalTank是否还有油&#xff0c;若有减1&…

数据结构与算法学习笔记五--串(C++)

目录 前言 一、定义 二、串的表示和实现 1.定长顺序存储表示 1.定义 2.串拼接 3.求子串 4.完整代码 2.堆分配存储表示 1.定义 2.求串长 3.串比较 4.清空s串&#xff0c;释放空间 5.串拼接 6.求子串 7.完整代码 3.串的块链存储表示 1.定义 2.生成串 3.生成串…

revit\navisworks各种安装问题

You have entered a nonvalid serial number &#xff0c;怎么都不给你一个机会输出序列号&#xff0c;怎么办&#xff1f; step1: C:\Program Files (x86)\Common Files\Autodesk Shared\AdskLicensing目录下找到uninstall.exe&#xff0c;右键管理员模式运行&#xff0c;会…

新媒体运营-----短视频运营-----PR视频剪辑----文本与图形

新媒体运营-----短视频运营-----PR视频剪辑-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/138079659 文章目录 1. 文本样式2. 文字与图形样式的配合3. 图形模版4. AE创建动画模版导出到PR5. PS图稿导出至PR创建运动图形6. PR图…

mysql报错 之 报错:Duplicate entry 字段 for key ‘表名.idx_字段’

一、问题操作 Mysql 进行insert 操作&#xff0c;报错&#xff1a;Duplicate entry 字段 for key ‘表名.idx_字段’ 原因解析&#xff1a;idx 是做的索引键&#xff0c;是具有唯一性 二、问题原因&#xff08;三种情况&#xff0c;当前我遇到的情况是第一种&#xff09; 当…

文件包含漏洞基础

php 中的文件包含函数&#xff1a; incude &#xff1a; require incude_once require_once 为了减少重复性代码的编写&#xff1b; 任意后缀的文件当中只要存在 php 代码就会被当作 php 执行&#xff1b; 本质&#xff1a;由于包含的文件不可控&#xff0c;导致文件包含…

07节-51单片机-矩阵键盘

文章目录 1矩阵键盘原理2.扫描的概念3.弱上拉4.实战-实现矩阵键盘对应按钮按下显示对应值4.1配置代码模板 5.键盘锁 1矩阵键盘原理 在键盘中按键数量较多时&#xff0c;为了减少I/O口的占用&#xff0c;通常将按键排列成矩阵形式 采用逐行或逐列的“扫描”&#xff0c;就可以读…

深浅拷贝及其现代写法

#include<iostream> using namespace std; class Person { public://默认构造Person(){cout << "Person()" << endl;}//有参构造函数Person(int age,int height){m_age age;m_height new int(height);cout << "Person(int age, int h…

【ZYNQ】zynq启动模式及程序固化

一、前言 由于zynq含有arm cpu ,其启动模式由ps主导&#xff0c;与纯逻辑的fpga不相同&#xff0c;此处做一个记录。 二、zynq启动模式 关于zynq的启动模式详细内容可以参考官方文档&#xff1a;ug585-Zynq 7000 SoC Technical Reference Manual&#xff0c;第六章。 2.1 启…