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.hqwc.cn/news/206297.html

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

相关文章

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

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

安防监控视频融合平台EasyCVR定制化页面开发

安防监控EasyCVR视频汇聚平台基于云边端智能协同,支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频平台EasyCVR拓展性强,视频能力丰富,具体可实现视频监控直播、视频轮播、视频录像、云存储、回放与检索…

用HALCON标定助手对相机进行标定

任务要求: 已知相机镜头焦距f为8mm,相机单个CCD像素在水平和竖直两个方向上的尺寸均为3.75微米,相机为普通透光镜头和面阵相机,对相机进行标定,测量相机的内外参数。 操作步骤: 1. 在HALCON中运行gen_ca…

专业pdf编辑工具PDF Expert mac中文版特点介绍

PDF Expert mac是一款专业的PDF编辑和阅读工具。它可以帮助用户在Mac、iPad和iPhone等设备上查看、注释、编辑、填写和签署PDF文档。 PDF Expert mac软件特点 PDF编辑:PDF Expert提供了丰富的PDF编辑功能,包括添加、删除、移动、旋转、缩放、裁剪等操作…

焦炉加热系统简述

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

【Windows 常用工具系列 13 -- Confluence 如何快速输入代码块 code block】

文章目录 Confluence 如何快速输入代码块方法二 Confluence 如何快速输入代码块 在使用使用 confluence 进行文档编辑时,有时需要贴上部分代码,但是直接贴代码在 confluence上,显示效果不是太好看,所以confluence 给我们提供了符…

sklearn模型中预测值的R2_score为负数

目录 正文评论区参考链接 正文 Sklearn.metrics下面的r2_score函数用于计算R(确定系数:coefficient of determination)。它用来度量未来的样本是否可能通过模型被很好地预测。 分值为 1 表示最好,但我们在使用过程中&#xff0c…

剧情继续:马斯克曝出OpenAI前员工举报信,董事会与奥特曼谈判回归

丰色 发自 凹非寺 量子位 | 公众号QbitAI 经过4天的极限拉扯、反转再反转,奥特曼有可能重新回归了。 据知情人士透露,OpenAI董事会正与奥特曼进行一场“富有成效”的新谈判。 如果奥特曼回到OpenAI,他将继续担任CEO。 与此同时&#xff0c…

ROS设置DHCP option121

配置时,了解格式很关键,16进制填写格式如下: 将要访问的IPV4地址:192.168.100.0/24 192.168.30.254 转换为:掩码 目标网段 网关 0x18c0a864c0a81efe,0不用填写 ROS配置如下图: 抓…

modbus协议及modbus TCP协议

一、Modbus协议 1.起源 Modbus由Modicon公司于1979年开发,是一种工业现场总线协议标准。 Modbus通信协议具有多个变种,其中有支持串口,以太网多个版本,其中最著名的是Modbus RTU(通信效率最高,基于串口&am…

Golang版本处理Skywalking Trace上报数据

Tips: 中间记录了解决问题的过程,如不感兴趣可直接跳至结尾 首先去es里查询skywalking trace的元数据 可以拿到一串base64加密后的data_binary(直接解密不能用,会有乱码,可参考https://github.com/apache/skywalking/issues/7423) 对data_b…

[论文笔记] Scaling Laws for Neural Language Models

概览: 一、总结 计算量、数据集大小、模型参数量大小的幂律 与 训练损失呈现 线性关系。 三个参数同时放大时,如何得到最佳的性能? 更大的模型 需要 更少的样本 就能达到相同的效果。 </