当前位置: 首页 > news >正文

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 下面代码包含&#xff1a;设置标题、线条样式、图例圆圈的样式、显示名称格式、图片保存、增加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实现端口关闭、流量控制(二)

本文是 网安小白的端口关闭实践 的续篇。 海量报文&#xff0c;一手掌握&#xff0c;你值得拥有&#xff0c;让我们开始吧&#xff5e; ufw 与 iptables的关系 理论介绍&#xff1a; ufw&#xff08;Uncomplicated Firewall&#xff09;是一个基于iptables的前端工具&#xf…...

C#开发-集合使用和技巧(九)Join的用法

在C#中&#xff0c;IEnumerable 的 Join 方法用于根据键将两个序列中的元素进行关联。Join 方法通常用于执行类似于 SQL 中的内连接操作。以下是 Join 方法的基本用法&#xff1a; 基本语法 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教程 ?? 前言 欢迎来到我的小天地&#xff0c;这里是我记录技术点滴、分享学习心得的地方。?? ?? 技能清单 编程语言&#xff1a;Java、C、C、Python、Go、前端技术&#xff1a;Jquery、Vue.js、React、uni-app、EchartsUI设计: Element-u…...

NISP信息安全一级考试200道;免费题库;大风车题库

下载链接&#xff1a;大风车题库-文件 大风车题库网站&#xff1a;大风车题库 大风车excel&#xff08;试题转excel&#xff09;&#xff1a;大风车excel...

Android ConstraintLayout 约束布局的使用手册

目录 前言 一、ConstraintLayout基本介绍 二、ConstraintLayout使用步骤 1、引入库 2、基本使用&#xff0c;实现按钮居中。相对于父布局的约束。 3、A Button 居中展示&#xff0c;B Button展示在A Button正下方&#xff08;距离A 46dp&#xff09;。相对于兄弟控件的约束…...

在网安中什么是白帽子

在网络安全领域&#xff0c;白帽子是指那些专门从事网络安全研究&#xff0c;帮助企业或个人发现并修复安全漏洞的专家。以下是对白帽子的详细解释&#xff1a; 一、定义与角色 白帽子是网络安全领域的术语&#xff0c;通常指那些具备专业技能和知识的网络安全专家。他们的工作…...

软件专业科目难度分级 你输在了哪里?

感想&#xff1a; 我把我们现在软件专业学的东西分了个难度级别 级别描述视角服务对象例子0 基本软件的使用用户-Photoshop wps ssms等1 软件的原理开发者用户各种编程语言2软件的原理的原理开发者开发者各种函数的深层定义&#xff0c;数据结构等 0级就是咱们平时用的那些软…...

微信小程序实现图片拖拽调换位置效果 -- 开箱即用

在编写类似发布朋友圈功能的功能时&#xff0c;需要实现图片的拖拽排序&#xff0c;删除图片等功能。 博主的小程序首页也采用了该示例代码&#xff0c;可以在威信中搜索&#xff1a; 我的百宝工具箱 或者复制后面的&#x1f517;在手机打开&#xff1a; #小程序://百宝工具箱/…...

关于“浔川AI翻译”使用情况的调研报告

关于“浔川 AI 翻译”使用情况的调研报告 随着全球化进程加速及外语学习需求攀升&#xff0c;AI 翻译工具愈发普及。“浔川 AI 翻译”作为行业产品之一&#xff0c;为了解其市场表现与用户反馈&#xff0c;特开展本次问卷调查&#xff0c;现将关键结果汇报如下。 一、样本概…...

《芯片:科技之核,未来之路》

《芯片&#xff1a;科技之核&#xff0c;未来之路》 一、芯片的定义与重要性二、芯片的应用领域&#xff08;一&#xff09;新能源领域&#xff08;二&#xff09;信息通讯设备领域&#xff08;三&#xff09;4C 产业&#xff08;四&#xff09;智能电网领域&#xff08;五&…...

️ 在 Windows WSL 上部署 Ollama 和大语言模型的完整指南20241206

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

使用Tomcat搭建简易文件服务器

创建服务器 1. 复制一个tomcat服务器&#xff0c;并命名为file-service(好区分即可) 2.在webapp里面新建一个文件夹 uploadfiles ,用于存储上传的文件 3. 修改conf/service.xml,配置文件服务器的端口与上传文件夹的访问 在Host标签之间加入一个Context标签 docBase"uploa…...

《C++赋能:构建智能工业控制系统优化算法新引擎》

在工业 4.0 的浪潮汹涌澎湃之际&#xff0c;传统工业控制系统正面临着前所未有的挑战与机遇。如何借助人工智能的强大力量&#xff0c;实现工业控制系统的深度优化&#xff0c;已成为工业领域乃至整个科技界关注的焦点。而 C语言&#xff0c;以其卓越的性能、高效的执行效率和对…...

node.js中跨域请求有几种实现方法

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

Node.js新作《循序渐进Node.js企业级开发实践》简介

《循序渐进Node.js企业级开发实践》由清华大学出版社出版&#xff0c;已于近期上市。该书基于Node.js 22.3.0编写&#xff0c;提供26个实战案例43个上机练习&#xff0c;可谓是目前市面上最新的Node.js力作。 本文对《循序渐进Node.js企业级开发实践》一书做个大致的介绍。 封…...

常见排序算法总结 (四) - 快速排序与随机选择

快速排序 算法思想 每一轮在数组相应的范围上随机找一个元素进行划分&#xff0c;将不大于它的所有元素都放到左边&#xff0c;将大于它的元素都放到右边。在左右两个子数组上不断地递归&#xff0c;直到整个数组上有序。 注意&#xff1a;实现时选择的时参考荷兰国旗问题优化…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...