echarts实现如下图功能代码

news2024/9/21 2:44:46

这里写自定义目录标题


在这在这里插入图片描述
里插入图片描述

 const  option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: "-1px",
          top:'15px',
          type: "scroll",
          icon:'rect',
          data:  [
              {name:'1', 
                textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14}
              }, 
              {name: '2', 
                textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14}
              },
              {name: '3',
                textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14},itemStyle:{borderWidth:[5,10]}
              }
            ],
            itemWidth:14,itemHeight:4
        },
        grid: {
          left: '2px',
          right: '3',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data:state.timeDate,
          axisLine:{            
            show: true ,
            lineStyle:{
              color:theme?'#474747':'#a8abb2',
            },
            onZero:false,
          },
          axisLabel: {
                  show: true,
                  margin:20,
                  color: theme?"#E5EAF3":'#303133',
          },
          axisTick:{
            show: true,
            alignWithLabel: true
          }
        },
        yAxis:[
        {
          type: 'value',
          nameTextStyle:{
              color:'#fff'
          },
          axisLabel: {
                  show: true,
                  formatter: '{value}',
                  color: theme?"#E5EAF3":'#303133',
          },
          axisLine:{            
            show: true ,
            lineStyle:{
              color:theme?'#474747':'#a8abb2',
            }
          },
          splitLine:{
            lineStyle:{
              color:theme?'#474747':'#a8abb2',
              type: "dashed"
            }
          }
        },
        {
          type: 'value',
          min: 0,
          max: 100,
          interval: 30,
          nameTextStyle:{
              color:'#fff'
          },
          axisLabel: {
                  show: true,
                  formatter: '{value} %',
                  color: theme?"#E5EAF3":'#303133',
          },
          axisLine:{            
            show: true ,
            lineStyle:{
              color:theme?'#474747':'#a8abb2',
            }
          },
          splitLine:{
            lineStyle:{
              color:theme?'#474747':'#a8abb2',
              type: "dashed"
            }
          }
        }
        ] ,
        series: [
          {
            name: '1',
            type: 'line',
            stack: 'Total',
            data:state.portData,
            showSymbol: false
          },
          {
            name: '2',
            type: 'line',
            stack: 'Total',
            data:state.refeData,
            showSymbol: false
          },
          {
            name: '3',           
            type: 'line',
            stack: '总量',
            data: state.stockData,
            areaStyle: {
               origin: 'start',
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#644CE599'
                  },
                  {
                    offset: 1,
                    color: '#644CE500'
                  }
                ])
            },
            itemStyle: {
              color: '#644CE5'
            },
            lineStyle: {
              color: '#644CE5'
            },
            smoothMonotone: 'x',
            showSymbol: false
          },
        ],
        color:['#FD7738','#01B5DE','#644CE5']
      };

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

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

相关文章

【面试HOT300】滑动窗口篇

系列综述: 💞目的:本系列是个人整理为了秋招面试的,整理期间苛求每个知识点,平衡理解简易度与深入程度。 🥰来源:材料主要源于【CodeTopHot300】进行的,每个知识点的修正和深入主要参…

焦炉加热系统简述

烟道吸力 焦炉负压烘炉分烟道的吸力会影响立火道温度,具体影响因素如下: 烟道吸力过大会导致热量被抽走,使立火道温度降低。烟道吸力不足会导致烟气在烘炉内停留时间过长,使热量无法充分利用,也会导致立火道温度降低…

监控摄像头连接NAS,实现监控管理一体化

嗯?你问干嘛要把摄像头连到NAS? 小马给家里安了个监控摄像头 本意是想家里有啥事也能查监控 却没想到这些监控不仅存储回放有限制 要想更多功能还是得多花钱 恰好,我有铁威马NAS 打开Surveillance Manager 轻松搭建网络摄像头管理系统 …

Pytorch中的tensor维度理解

Pytorch中的tensor维度理解 文章目录 Pytorch中的tensor维度理解摘要打消心理恐惧,从三维学起三维tensor参考文献 摘要 面对pytorch编程中的tensor时,我不时会感到恐惧。对里面数据是怎么排布的,一直没有一个直观的理解。今天我想把这个事情…

【Windows 常用工具系列 12 -- win11怎么设置不睡眠熄屏 |win11设置永不睡眠的方法】

文章目录 win11 怎么设置不睡眠熄屏 使用笔记本电脑的时候,如果离开电脑时间稍微长一点就会发现息屏了,下面介绍 设置 Win11 永不睡眠息屏的方法,有需要的朋友们快来看看以下详细的教程。 win11 怎么设置不睡眠熄屏 在电脑桌面上&#xff0c…

Missing file libarclite_iphoneos.a 问题解决方案

问题 在Xcode 运行项目会报以下错误 File not found: /Applications/Xcode-beta.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphoneos.a解决方案 打开URL https://github.com/kamyarelyasi/Libarclite-Files ,下载liba…

坚鹏:中国工商银行数字化转型发展现状与成功案例培训圆满结束

中国工商银行围绕“数字生态、数字资产、数字技术、数字基建、数字基因”五维布局,深入推进数字化转型,加快形成体系化、生态化实施路径,促进科技与业务加速融合,以“数字工行”建设推动“GBC”(政务、企业、个人&…

【uni-app】uniapp中弹出输入框的示例

uni.showModal({title: 请输入企业名称,content: ,editable: true, //是否显示输入框placeholderText: 请输入企业名称, //输入框提示内容confirmText: 确认,cancelText: 取消,success: (res) > {if (res.confirm) {this.checkDesc.name res.content;// console.log(输入的…

数字化时代的政务服务:构建便捷高效的线上政务大厅

引言: 随着数字化时代的来临,如何通过线上政务大厅搭建一个便捷高效的服务平台,以更好地满足公众需求值得探究。线上政务大厅是政务服务的新方式,但搭建线上政务大厅并不是一件容易的事情,需要精心的规划和设计。 一…

【Vue】生命周期一文详解

目录 前言 生命周期 钩子函数使用方法 ​编辑 周期-----创建阶段 创建阶段做了些什么事 该阶段可以干什么 周期----挂载阶段 挂载阶段做了什么事 该阶段适合干什么 周期----更新阶段 更新阶段做了什么事 该阶段适合做什么 周期----销毁阶段 销毁阶段做了什么事 …

No such module ‘FacebookCore‘

在下面的地方添加这个库

常用的工作资料怎么在电脑上记录呢?

在现代工作中,我们经常需要记录各种各样的工作资料,例如会议记录、项目计划、待办事项等等。传统的纸质笔记本虽然方便携带,但难以整理和检索。而在电脑上直接记录常用的工作资料,在记录、整理、查看、使用等方面都是更为高效、便…

SUDS: Scalable Urban Dynamic Scenes

SUDS: Scalable Urban Dynamic Scenes:可扩展的城市动态场景 创新点 1.将场景分解为三个单独的哈希表数据结构,以高效地编码静态、动态和远场辐射场 2.利用无标签的目标信号,包括RGB图像、稀疏LiDAR、现成的自监督2D描述符,以及…

消息中间件——RabbitMQ(三)理解RabbitMQ核心概念和AMQP协议!

前言 本章学习,我们可以了解到以下知识点: 互联网大厂为什么选择RabbitMQ?RabbiMQ的高性能之道是如何做到的?什么是AMQP高级协议?AMQP核心概念是什么?RabbitMQ整体架构模型是什么样子的?Rabbi…

计算机基础知识——字,字节,进制,short,byte等

目录 进制位,字节,字Byte,ShortByteBuf有符号数和无符号数 进制 HEX,Hexadecimal ,十六进制。 DEC,Decimal ,十进制。 OCT,Octal ,八进制。 BIN,Binary &a…

语音识别技术在医疗行业中的应用案例

随着语音识别技术和计算机视觉技术的不断提高,现代医学正在进入全面数字化时代。 追求高质量的训练数据是人工智能产业的信条,得到更为精准的语音机器模型更离不开语音数据的不断供给。本文讲介绍: 什么是语音识别技术语音识别技术如何应用于医疗行业 …

SpringBoot:邮件发送

官网文档:39. Sending Email (spring.io)。 Sending Email Spring框架提供了JavaMailSender实例,用于发送邮件。 如果SpringBoot项目中包含了相关的启动器,那么就会自动装配一个Bean实例到项目中。 在SpringBoot项目中引入如下Email启动器&a…

小红书干货类笔记怎么写?建议收藏

小红书干货类笔记是指在小红书这个社交平台上,用户分享的各种实用、有价值的生活技巧、经验、心得等内容的笔记。这类笔记通常具有以下特点:内容详实、实用性强、独特见解、图文并茂。 比如:某个妆要怎么化、某种技能该怎么学、某个城市该怎…

前端环境变量释义import.meta.env.xxx

视频教程 彻底搞懂前端环境变量使用和原理,超清楚_哔哩哔哩_bilibili 添加命令行参数 --modexxxxx 新建.env.xxxx文件,其中.env文件会在所有环境下生效 以VITE_开头,字符串无需加双引号 使用import.meta.env.VITE_xxxxx进行调用