echarts实现如下图功能代码

这里写自定义目录标题


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

 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.mzph.cn/news/159332.shtml

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

相关文章

小程序泄露腾讯地图apikey

今天挖小程序时测了很久,一直没有头绪,后来想要测试一下支付漏洞,但是这里却出问题了 添加地址时我发现,当我添加一个地址时,他会显示腾讯地图的logo和一部分小图,那时候我就在想,既然这里可以调…

函数隐式声明的危害及处理(C语言)

1.为什么要将函数隐式声明提升为编译错误 请看这个编译警告: [ 71%] Building C object main/CMakeFiles/shake.dir/pjt_helper.c.o /home/fengxh/shake_src/data_dispatch/main/pjt_helper.c: In function ‘SysMqtt_GetStateJsonPayload’: /home/fengxh/shake_s…

Vmware 扩展硬盘空间后的操作-Ubuntu

在VMware中扩展了Ubuntu虚拟机的硬盘容量后,你需要在Ubuntu内部进行操作才能使用新增的空间。过程包括为增加的空间建立分区、格式化以及挂载该分区供使用。下面是具体的步骤: 首先登录到你的Ubuntu系统,用lsblk命令查看分区情况。这样你可以…

多普勒流速仪的功能作用是什么?

我国地域广大,各地降雨分布不均,某些城市经常会出现连续的降雨进而导致城市排水压力过大,为了提高城市应对排水过量的极端情况的出现,亟需一种方案能够对城市排水进行有效及时的监测,从而能够及时的采取应对方案。 在污…

IO口电压下降那么多是怎么回事??

前几天一个工程师向我反馈他测得如下电路MCU IO口的电压不是3.3V,只有2V多。 IO配置的是输入功能,无上下拉。最初我不太相信这个结果,后来自己用万用表实际测量了下,还真是这个结果 这是咋回事呢?不应该电压就是3.3V吗…

前缀和的动态维护——树状数组[C/C++]

文章目录 前言lowbitlowbit的定义lowbit的计算 树状数组的思想树状数组的操作单点修改 update前缀查询 query树状数组的建立 build 前言 树状数组巧妙了利用位运算和树形结构实现了允许单点修改的情况下,动态维护前缀和,并且实现单点修改和前缀和查询的效…

【JavaEE】操作系统与进程

作者主页:paper jie_博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于《JavaEE》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造&…

python 水质日历热力图

利用日历热力图可以方便的查看站点水质全年的变化情况。 接口获取站点数据 这一步根据自己实际情况,也可以读取excel、MySQL读取数据。这里把API地址已隐去。 import numpy as np import calendar import requests import json import pandas as pd import time f…

给定两个字符串 s 和 t ,找不同

题意: 给定两个字符串 s 和 t ,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。 示例 1: 输入:s “abcd”, t “abcde” 输出:“e”…

【python学习】基础篇-常用第三方库-psutil:用于获取CPU、磁盘与网络等系统信息和进程管理

psutil是一个跨平台的Python库,用于获取系统信息和进程管理。以下是一些基本的用法: 获取CPU使用率 cpu_percent psutil.cpu_percent(interval1) print(cpu_percent)获取内存使用情况 memory_info psutil.virtual_memory() print(memory_info.perce…

Linux:进度条(小程序)以及git三板斧

Linux小程序&#xff1a;进度条 在实现小程序前我们要弄清楚&#xff1a; 1.缓冲区&#xff1b; 2.回车与换行。 缓冲区&#xff1a; 分别用gcc来编译下面两个程序&#xff1a; 程序一&#xff1a; #include <stdio.h> int main() { printf("hello Makefil…

前后端分离SpringBoot+vue的买菜农副产品多功能商城

1&#xff0c;项目介绍 本系统主要针对买菜而设计&#xff0c;其功能有菜品基本信息管理、商品类别管理、系统订单管理、评论管理、系统用户管理等功能模块。并且本系统采用了现在流行的SpringBootVue进行的设计与实现&#xff0c;其中Tomcat为服务器&#xff0c;MySQL为数据库…

QT中的lambda表达式

面是对Qt中在QObject::connect()中的lambda表达式常用用法 QString str("I am a string!"); devicestr; connect(ui- connect(m_imgshowUI, &ImgShow::GetImgPath, m_visionplatform, [](const std::string filename){m_visionplatform->ReadImg(filename);}…

moviepy 视频剪切,拼接,音频处理

官网 使用matplotlib — moviepy-cn 文档 案例 from moviepy.editor import * from moviepy.video.fx import resize from PIL import Imagefile1r"D:\xy_fs_try\video_to_deal\spider_video\file\vedeo3.mp4" file2r"D:\xy_fs_try\video_to_deal\spider_video\…

Maven聚合项目发布至私服指定模块

无论是从事框架开发工作还是公共服务模块开发&#xff0c;为了解决通用性问题&#xff0c;常常需要发布一些依赖组件至maven私服。然而通常我们得maven工程都是由多个模块组成得聚合工程&#xff08;一个父工程下有多个模块&#xff09;。 这个时候可能会面临两个窘境&#xf…

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

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

java实现一个简单的监听器

在 Java 中&#xff0c;我们可以通过实现监听器&#xff08;Listener&#xff09;模式来处理事件和回调。监听器模式是一种常见的设计模式&#xff0c;用于实现对象间的松耦合通信。本文将介绍如何在 Java 中实现一个简单的监听器。 步骤 以下是实现一个监听器的基本步骤&…

关于input直接上传文件夹

用最基础的input 就可以实现 <input type"file" webkitdirectory directory"" /> 如果是像点击按钮之后上传文件夹可以这样写 <el-button type"primary" style"margin-top: 30px;width: 170px;" click"importModel&qu…

教你ehco、date、sep命令如何使用

echo命令 echo -n 表示不换行输出 echo -e 表示输出转义符 常用的转义符 选项 作用 \r 光标移至行首&#xff0c;并且不换行 \s 当前shell的名称&#xff0c;如bash \t 插入Tab键&#xff0c;制表符 \n 输出换行 \f 换行&#xff0c;但光标仍停留在原处 \ 表…