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和一部分小图,那时候我就在想,既然这里可以调…

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

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

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…

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为数据库…

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

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

【开源】基于JAVA的开放实验室管理系统

项目编号&#xff1a; S 013 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S013&#xff0c;文末获取源码。} 项目编号&#xff1a;S013&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…

【Vue】生命周期一文详解

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

C++:继承

一、继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保 持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承呈现了面向对象 程序设计的层次结构&#xff0c…

使用Microsoft Dynamics AX 2012 - 4. 销售和配送

销售和分销的主要职责是为客户提供您的商品和服务。为了完成这项任务&#xff0c;销售和分销需要通过分拣、运输和开具发票来处理销售订单&#xff0c;从而管理客户的材料需求。 销售和配送业务流程 在我们开始详细介绍之前&#xff0c;下面几行概述了销售和配送中的业务流程…

【IEEE独立出版 | 往届均完成检索】2024年第四届消费电子与计算机工程国际学术会议(ICCECE 2024)

#国际学术会议# 推荐 #广州# 【IEEE独立出版 | 往届均完成检索】2024年第四届消费电子与计算机工程国际学术会议&#xff08;ICCECE 2024&#xff09; 2024 4th International Conference on Consumer Electronics and Computer Engineering 2024年1月12-14日 | 中国广州 会…

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

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

Leaflet结合Echarts实现迁徙图

效果图如下&#xff1a; <!DOCTYPE html> <html><head><title>Leaflet结合Echarts4实现迁徙图</title><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

14.(vue3.x+vite)组件间通信方式之pinia

前端技术社区总目录(订阅之前请先查看该博客) 示例效果 Pinia简介 Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 Pinia与Vuex比较 (1)Vue2和Vue3都支持,这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。 (2)pinia中只有state、getter、action,抛弃了Vu…

世微 dc-dc降压恒流 LED汽车大灯 单灯 14V5A 68W车灯驱动方案 AP5191

产品描述 AP5191是一款PWM工作模式,高效率、外围简单、外置功率MOS管&#xff0c;适用于4.5-150V输入的高精度降压LED恒流驱动芯片。输出最大功率150W&#xff0c;最大电流6A。AP5191可实现线性调光和PWM调光&#xff0c;线性调光脚有效电压范围0.55-2.6V.AP5191 工作频率可以…

windows搭建gitlab教程

1.安装gitlab 说明&#xff1a;由于公司都是windows服务器&#xff0c;这里安装以windows为例&#xff0c;先安装一个虚拟机&#xff0c;然后安装一个docker&#xff08;前提条件&#xff09; 1.1搜索镜像 docker search gitlab #搜索所有的docker search gitlab-ce-zh #搜索…