Echart折线图属性设置 vue2
Echart折线图
官方配置项手册 Documentation - Apache ECharts
下面代码包含:设置标题、线条样式、图例圆圈的样式、显示名称格式、图片保存、增加Y轴目标值
updateChart(data) {const sortedData = data.slice().sort((a, b) => new Date(a.deviceTime) - new Date(b.deviceTime))const option = {tooltip: {formatter: function (params) {var res = params[0].name + '<br/>' // 拼接X轴名称params.forEach(function (item) {if ('字段1' === item.seriesName) {res += item.seriesName + ': ' + item.value + ' 单位<br/>'} else if ('字段2' === item.seriesName) {res += item.seriesName + ': ' + item.value + ' 单位<br/>'} else if ('字段3' === item.seriesName) {res += item.seriesName + ': ' + item.value + ' 单位<br/>'} else if ('字段4' === item.seriesName) {res += item.seriesName + ': ' + item.value + ' 单位<br/>'} else if ('字段5' === item.seriesName) {res += item.seriesName + ': ' + item.value + ' 单位<br/>'} else res += item.seriesName + ': ' + item.value + '<br/>'})return res// return params[0].value;},trigger: 'axis',axisPointer: {type: 'line',lineStyle: {color: 'rgba(255, 255, 255, 0.37)',},},},// title: {// text: '数据图表',// left: 'center' // 可选,使标题在容器下方居中// },grid: {// 设置grid组件距离容器边缘的距离// top: '10%', // 距离容器顶部10%// left: '10%', // 距离容器左侧10%// right: '10%' // 距离容器右侧10%// bottom: '10%', // 距离容器底部10%bottom: '60px',},// 使用 graphic 组件在图表下方居中绘制标题graphic: {elements: [{type: 'text',left: 'center', // 居中top: 'bottom', // 放置在 grid 的底部// 由于 top 设置为 'bottom',我们需要通过 margin 调整其确切位置// 这里假设底部有 50px 的空间用于标题,则 margin 向上偏移 25px(根据字体大小调整)margin: [0, 'auto', 0, 30],style: {text: '数据折线图', // 标题文本fill: '#333', // 文本颜色fontSize: 16, // 字体大小// fontWeight: 'bold', // 字体加粗textAlign: 'center', // 文本对齐方式(这里其实已经是居中了,但加上以确保兼容性)// 其他文本样式...},// left: '10%',// right: '10%',// top: 'middle',// z: 100,// silent: true,// 可选:如果需要在标题下方添加一条线作为分隔// 可以通过添加一个矩形元素来实现// 注意:这里的 rect 元素需要单独作为一个 elements 数组项添加},],// 注意:如果添加多个 graphic 元素,需要将它们作为数组项分别列出},legend: {data: ['字段1', '字段2', '字段3', '字段4', '字段5'],},xAxis: {type: 'category',// data: this.chartData.data.map((_, index) => `Point ${index + 1}`) // 假设使用索引作为X轴数据// data: data.map(item => item.deviceTime), // 使用时间作为X轴数据data: sortedData.map((item) => item.deviceTime), // 使用排序后的时间作为X轴数据axisLabel: {fontSize: 13, // 设置横坐标轴标签的字体大小为10px// color: '#333' // 可以同时设置字体颜色},},yAxis: {type: 'value',axisLabel: {fontSize: 12, // 设置横坐标轴标签的字体大小为10px// color: '#333' // 可以同时设置字体颜色},},toolbox: {feature: {saveAsImage: {},},},//时间轴区间// dataZoom: [// {// type: 'inside',// start: 0,// end: 100// },// ],series: [{name: '字段1',type: 'line',data: sortedData.map((item) => item.aa),label: {show: true, // 显示标签position: 'top', // 标签位置formatter: '{c}', // 标签内容格式},},{name: '字段2',type: 'line',data: sortedData.map((item) => item.bb),label: {show: true, // 显示标签position: 'top', // 标签位置formatter: '{c}', // 标签内容格式},},{name: '字段3',type: 'line',data: sortedData.map((item) => item.cc),label: {show: true, // 显示标签position: 'top', // 标签位置formatter: '{c}', // 标签内容格式},},{name: '字段4',type: 'line',data: sortedData.map((item) => item.dd),label: {show: true, // 显示标签position: 'top', // 标签位置formatter: '{c}', // 标签内容格式},},{name: '字段5',type: 'line',data: sortedData.map((item) => item.ee),lineStyle: {// 设置线条的style等normal: {color: 'rgb(9, 61, 186)', // 折线线条颜色},},itemStyle: {color: 'rgb(9, 61, 186)', // 图例圆形的颜色},markLine: {data: [// 在y轴上加一个目标值线{yAxis: 100, // 目标值name: '目标值', // 显示的名称lineStyle: {type: 'solid',color: '#ff0000', // 线的颜色},label: {color: 'red',fontSize: 14,fontWeight: 'bold',show: true, // 是否显示标签// offset: [-80, -12], // 标签偏移量// formatter: '目标值: ' + targetValue+ '单位' // 标签的格式},},],},},],}this.chart.setOption(option)},
相关文章:
Echart折线图属性设置 vue2
Echart折线图 官方配置项手册 Documentation - Apache ECharts 下面代码包含:设置标题、线条样式、图例圆圈的样式、显示名称格式、图片保存、增加Y轴目标值 updateChart(data) {const sortedData data.slice().sort((a, b) > new Date(a.deviceTime) - ne…...

LabVIEW-简单串口助手
LabVIEW-简单串口助手 串口函数VISA配置串口VISA写入函数VISA读取函数VISA资源名称按名称解除捆绑 函数存放位置思维导图主体界面为以下 串口函数 VISA配置串口 VISA写入函数 VISA读取函数 VISA资源名称 按名称解除捆绑 函数存放位置 思维导图 主体界面为以下 从创建好的“枚举…...

Linux下,用ufw实现端口关闭、流量控制(二)
本文是 网安小白的端口关闭实践 的续篇。 海量报文,一手掌握,你值得拥有,让我们开始吧~ ufw 与 iptables的关系 理论介绍: ufw(Uncomplicated Firewall)是一个基于iptables的前端工具…...

C#开发-集合使用和技巧(九)Join的用法
在C#中,IEnumerable 的 Join 方法用于根据键将两个序列中的元素进行关联。Join 方法通常用于执行类似于 SQL 中的内连接操作。以下是 Join 方法的基本用法: 基本语法 public static IEnumerable<TResult> Join<TOuter, TInner, TKey, TResult…...

Dockerfile容器镜像构建技术
文章目录 1、容器回顾1_容器与容器镜像之间的关系2_容器镜像分类3_容器镜像获取的方法 2、其他容器镜像获取方法演示1_在DockerHub直接下载2_把操作系统的文件系统打包为容器镜像3_把正在运行的容器打包为容器镜像 3、Dockerfile介绍4、Dockerfile指令1_FROM2_RUN3_CMD4_EXPOSE…...

Github 2024-12-01 开源项目月报 Top20
根据Github Trendings的统计,本月(2024-12-01统计)共有20个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10TypeScript项目9Go项目2HTML项目1Shell项目1Jupyter Notebook项目1屏幕截图转代码应用 创建周期:114 天开发语言:TypeScript, Py…...
Spring Boot 3项目集成Swagger3教程
Spring Boot 3项目集成Swagger3教程 ?? 前言 欢迎来到我的小天地,这里是我记录技术点滴、分享学习心得的地方。?? ?? 技能清单 编程语言:Java、C、C、Python、Go、前端技术:Jquery、Vue.js、React、uni-app、EchartsUI设计: Element-u…...

NISP信息安全一级考试200道;免费题库;大风车题库
下载链接:大风车题库-文件 大风车题库网站:大风车题库 大风车excel(试题转excel):大风车excel...

Android ConstraintLayout 约束布局的使用手册
目录 前言 一、ConstraintLayout基本介绍 二、ConstraintLayout使用步骤 1、引入库 2、基本使用,实现按钮居中。相对于父布局的约束。 3、A Button 居中展示,B Button展示在A Button正下方(距离A 46dp)。相对于兄弟控件的约束…...
在网安中什么是白帽子
在网络安全领域,白帽子是指那些专门从事网络安全研究,帮助企业或个人发现并修复安全漏洞的专家。以下是对白帽子的详细解释: 一、定义与角色 白帽子是网络安全领域的术语,通常指那些具备专业技能和知识的网络安全专家。他们的工作…...
软件专业科目难度分级 你输在了哪里?
感想: 我把我们现在软件专业学的东西分了个难度级别 级别描述视角服务对象例子0 基本软件的使用用户-Photoshop wps ssms等1 软件的原理开发者用户各种编程语言2软件的原理的原理开发者开发者各种函数的深层定义,数据结构等 0级就是咱们平时用的那些软…...

微信小程序实现图片拖拽调换位置效果 -- 开箱即用
在编写类似发布朋友圈功能的功能时,需要实现图片的拖拽排序,删除图片等功能。 博主的小程序首页也采用了该示例代码,可以在威信中搜索: 我的百宝工具箱 或者复制后面的🔗在手机打开: #小程序://百宝工具箱/…...
关于“浔川AI翻译”使用情况的调研报告
关于“浔川 AI 翻译”使用情况的调研报告 随着全球化进程加速及外语学习需求攀升,AI 翻译工具愈发普及。“浔川 AI 翻译”作为行业产品之一,为了解其市场表现与用户反馈,特开展本次问卷调查,现将关键结果汇报如下。 一、样本概…...
《芯片:科技之核,未来之路》
《芯片:科技之核,未来之路》 一、芯片的定义与重要性二、芯片的应用领域(一)新能源领域(二)信息通讯设备领域(三)4C 产业(四)智能电网领域(五&…...

️ 在 Windows WSL 上部署 Ollama 和大语言模型的完整指南20241206
🛠️ 在 Windows WSL 上部署 Ollama 和大语言模型的完整指南 📝 引言 随着大语言模型(LLM)和人工智能的飞速发展,越来越多的开发者尝试在本地环境中部署大模型进行实验。然而,由于资源需求高、网络限制多…...

使用Tomcat搭建简易文件服务器
创建服务器 1. 复制一个tomcat服务器,并命名为file-service(好区分即可) 2.在webapp里面新建一个文件夹 uploadfiles ,用于存储上传的文件 3. 修改conf/service.xml,配置文件服务器的端口与上传文件夹的访问 在Host标签之间加入一个Context标签 docBase"uploa…...
《C++赋能:构建智能工业控制系统优化算法新引擎》
在工业 4.0 的浪潮汹涌澎湃之际,传统工业控制系统正面临着前所未有的挑战与机遇。如何借助人工智能的强大力量,实现工业控制系统的深度优化,已成为工业领域乃至整个科技界关注的焦点。而 C语言,以其卓越的性能、高效的执行效率和对…...

node.js中跨域请求有几种实现方法
默认情况下,出于安全考虑,浏览器会实施同源策略,阻止网页向不同源的服务器发送请求或接收来自不同源的响应。 同源策略:协议、域名、端口三者必须保持一致 <!DOCTYPE html> <html lang"en"> <head>&l…...

Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,已于近期上市。该书基于Node.js 22.3.0编写,提供26个实战案例43个上机练习,可谓是目前市面上最新的Node.js力作。 本文对《循序渐进Node.js企业级开发实践》一书做个大致的介绍。 封…...
常见排序算法总结 (四) - 快速排序与随机选择
快速排序 算法思想 每一轮在数组相应的范围上随机找一个元素进行划分,将不大于它的所有元素都放到左边,将大于它的元素都放到右边。在左右两个子数组上不断地递归,直到整个数组上有序。 注意:实现时选择的时参考荷兰国旗问题优化…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...

【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...

Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...

FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...

实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
Vue 3 + WebSocket 实战:公司通知实时推送功能详解
📢 Vue 3 WebSocket 实战:公司通知实时推送功能详解 📌 收藏 点赞 关注,项目中要用到推送功能时就不怕找不到了! 实时通知是企业系统中常见的功能,比如:管理员发布通知后,所有用户…...
raid存储技术
1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划,涵盖存储系统的布局、数据存储策略等,它明确数据如何存储、管理与访问,为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...