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…

第十五届蓝桥杯省赛第二场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。 正确结…

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) 持…

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图…

文件包含漏洞基础

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 启…

12(第十一章,数据仓库和商务智能)

目录 概述 目标和原则 基本概念 商务智能 数据仓库 数据仓库建设方法 数据仓库架构组件 加载处理方式 1、历史数据 2、批量变更数据捕获&#xff08;CDC&#xff09; 3、准实时和实时数据加载 活动 运营分析应用 方法 数据仓库构建 架构演进 数据处理过程 数…

Nacos分布式配置中心和服务注册中心

分布式配置中心 Nacos Spring Cloud 快速开始 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&qu…

第一届长城杯半决赛wp和AWD笔记

目录 AWD 渗透 cfs 单节点1 AWD笔记 AWD工具 文件比较工具 Web漏洞扫描工具 waf工具 代码审计工具 批量网站备份文件泄露扫描工具 cms通杀漏洞的利用 通杀脚本和批量提交flag脚本 防御流程 攻击流程 注意 AWD 解题思路] 首先就是fscan快速扫描对应C段&#xf…

递归基础-汉诺塔(仅用于复习和交流)

观察上图发现&#xff0c;从N2开始图形都按一定的规律步骤进行位置移动&#xff0c;这个观点是否认同&#xff1f; 那再看N2时&#xff0c;为了方便大家理解&#xff0c;将两个板定义为板1&#xff08;小&#xff09;&#xff0c;板2&#xff08;大&#xff09;&#xff0c;最上…

leaftjs+turfjs+idw纯前端实现等值面绘图

最近有个绘制等值面图的需求。我们一般的实现路径是&#xff1a; 1.后台绘图&#xff0c;用surfer绘制好&#xff0c;给前端调用叠加到地图。 2.后台用python绘图&#xff0c;绘制好给前端调用&#xff0c;叠加到地图。 3.后台进行插值计算、地图裁剪、最终生成geojson文件或…

【Webgl_glslThreejs】搬运分享shader_飘落心形

来源网站 https://www.shadertoy.com/view/4sccWr效果预览 代码演示 将shadertory上的代码转成了threejs可以直接用的代码&#xff0c;引入文件的material&#xff0c;并在创建mesh或已有物体上使用material即可&#xff0c;使用时请注意uv对齐。 import { DoubleSide, Shad…

Facebook的魅力魔法:探访数字社交的奇妙世界

1. 社交媒体的演变与Facebook的角色 在数字化时代&#xff0c;社交媒体已经成为我们日常生活中不可或缺的一部分。而在众多的社交媒体平台中&#xff0c;Facebook 以其深厚的历史和广泛的影响力&#xff0c;成为了全球数亿用户沟通、分享和互动的主要场所。从其初创之时起&…