echarts遇到的问题

news/2024/5/19 15:39:03

文章目录

  • 折线图-区域面积图 areaStyle
  • y轴只有整数
  • y轴不从0开始
  • y轴数值不确定,有大有小,需要动态处理
  • 折线-显示label
  • 标线
  • legend的格式化和默认选中状态
  • x轴的lable超长处理
  • x轴的相关设置

echarts各个场景遇到的问题

折线图-区域面积图 areaStyle

在这里插入图片描述

areaStyle: {opacity: 0.8, // 透明度color: {/*折线-面积区域-颜色渐变*/type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: val.colorList[index], // 0% 处的颜色},{offset: 1,color: 'rgba(255,255,255,0.4)' // 100% 处的颜色}],global: false // 缺省为 false},},// stack:'Total', // 堆积。/*面积图的时候,hover后,是否隐藏(置灰)其他线,只保留当前的自己内容*/
emphasis: {focus: 'series', // hover的交互。
},

y轴只有整数

yAxis:
scale:true, // y坐标轴不从0开始

y轴不从0开始

yAxis:
minInterval: 1, // 不显示小数,只有整数

y轴数值不确定,有大有小,需要动态处理

在这里插入图片描述

/**** 计算数值的最大值,根据最大值,设备grip的left,否则数值可能显示不全的!* @type {number[]}*/
let maxNumList = [1000] // 默认4位数的宽度。
// 找出各个系列中的max
option.series.forEach(v=>{let maxNum = Math.max(...v.data)maxNumList.push(maxNum)
})
// console.log('最大值list:',maxNumList)
// 找出max
let max = Math.max(...maxNumList)
let maxLength = (max+'').length
// 默认一个字站位12px
option.grid.left = 12*maxLength + ''this.echartsIns.setOption(option, true)

折线-显示label

在这里插入图片描述

series-line. label

标线

在这里插入图片描述

// 插入一个标线
markLine: {silent: false, // 图形是否不响应和触发鼠标事件:false truelabel:{show:true, //position:'end', // 标签位置distance:-20, // 标签与线之间的间距// 标签内容格式器formatter:(params)=>{console.log('markLine-format:',params)return params.name+ ':' + params.value}},data: [{ yAxis: 33, },{type:'average', // 平均值name:'平均值a', //},{type:'min', // 最小值name:'最小值b', //},{type:'max', // 最大值name:'最大值c', //},]
},

legend的格式化和默认选中状态

// 图例组件。
legend: {show: true,  // true, falseformatter: (name) => {// return `ks-${name}` // 添加前缀// 自己处理文字return echarts.format.truncateText(name, 40)},// 图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。selectedMode: true, // true,false 是否可以选择切换legendselected: {// key是data中的name字段'人员': false,'绩效': true,},
},

x轴的lable超长处理

  1. 换行
    format的时候,隔几个字就加一个‘\n’,换行处理了
  2. 旋转:旋转一定的度数
  3. 隔几个显示,

x轴的相关设置

在这里插入图片描述

xAxis: {show: true, // false truetype: 'category', //  坐标轴类型。'value' 数值轴,适用于连续数据。'category' 类目轴. 'time' 时间轴.'log' 对数轴。// 坐标轴 '轴线' 相关设置。axisLine: {show: true, // false,truesymbol: ['none', 'arrow'], // x轴是否有箭头symbolSize: [10, 15], // 轴线两边的箭头的大小lineStyle: {},},// 坐标轴'刻度'相关设置。axisTick: {},// 坐标轴刻度'标签'的相关设置。axisLabel: {show: true, //  false,truerotate: 25, // 旋转度数color: (value) => {console.log('x轴value:', value)return value == '08:00' ? '#0e0e0e' : 'rgba(255,68,0,0.5)'}},// 坐标轴在 grid 区域中的分隔线。(垂直坐标轴的线)splitLine: {show: true, // 坐标轴在 grid 区域中的分隔线。interval: 0,lineStyle: {color: 'rgba(59,26,203,0.4)',type:[4,4],// 'dotted'等width:2,},},// 类目数据,在类目轴(type: 'category')中有效。data: val.xData,// 坐标轴指示器配置项。(hover x轴的时候,选中区域或者line的效果)axisPointer: {// show:true,type: 'line', // line shadow none}
},

http://www.mrgr.cn/p/28383751

相关文章

关于提示词 Prompt

Prompt原则 原则1 提供清晰明确的指示 注意在提示词中添加正确的分割符号 prompt """ 请给出下面文本的摘要&#xff1a; <你的文本> """可以指定输出格式&#xff0c;如&#xff1a;Json、HTML提示词中可以提供少量实例&#xff0c;…

ubuntu目录分析

在Ubuntu根目录下&#xff0c;以下是一些常见文件夹的含义&#xff1a; /bin&#xff1a;存放可执行文件&#xff0c;包含一些基本的命令和工具。 /boot&#xff1a;存放启动时所需的文件&#xff0c;如内核和引导加载程序。 /dev&#xff1a;包含设备文件&#xff0c;用于与硬…

【Uniapp】支付链转二维码

前言 提示&#xff1a;这个是一个很小的项目&#xff0c;大概30分钟就能搞定 实现方式&#xff1a;输入支付代码&#xff0c;存储到对应的数据库表中&#xff0c;二维码访问一个PHP文件通过id来进行重定向&#xff0c;这样就可以使每张二维码都是固定的&#xff0c;替换二维码…

【Golang 接口自动化07】struct转map的三种方式

目录 背景 struct转map 使用json模块 使用reflect模块 使用第三方库 测试 总结 资料获取方法 背景 我们在前面介绍过怎么使用net/http发送json或者map数据&#xff0c;那么它能不能直接发送结构体数据呢&#xff1f;我们今天一起来学习结构体struct转map的三种方法&am…

Unity源码分享-黄金矿工游戏完整版

Unity源码分享-黄金矿工游戏完整版 项目地址&#xff1a;https://download.csdn.net/download/Highning0007/88118933

【Linux进程篇】进程概念(1)

【Linux进程篇】进程概念&#xff08;1&#xff09; 目录 【Linux进程篇】进程概念&#xff08;1&#xff09;进程基本概念描述进程-PCBtask_struct-PCB的一种task_ struct内容分类 组织进程查看进程通过系统调用获取进程标示符通过系统调用创建进程——fork初识 作者&#xff…

ETHERNET/IP 转ETHERCAT连接ethercat总线伺服如何控制

捷米JM-EIP-ECAT网关连接到ETHERNET/IP总线中做为从站使用&#xff0c;连接到ETHERCAT总线中做为从站使用&#xff0c;可以同时满足多种工业生产的需求。支持广泛的设备类型&#xff0c;可以和多种不同的设备进行通讯。 技术参数 ETHERNET/IP 技术参数 网关做为 ETHERNET/IP …

spring启动流程 (6完结) springmvc启动流程

SpringMVC的启动入口在SpringServletContainerInitializer类&#xff0c;它是ServletContainerInitializer实现类(Servlet3.0新特性)。在实现方法中使用WebApplicationInitializer创建ApplicationContext、创建注册DispatcherServlet、初始化ApplicationContext等。 SpringMVC…

【Docker】Docker的通信安全

Docker的通信安全 前言一、Docker 容器与虚拟机的区别1. 隔离与共享2. 性能与损耗 二、Docker 存在的安全问题1. Docker 自身漏洞2. Docker 源码问题 三、Docker 架构缺陷与安全机制1. 容器之间的局域网攻击2. DDoS 攻击耗尽资源3. 有漏洞的系统调用4. 共享 root 用户权限 四、…

深入了解HTTP代理在网络爬虫与SEO实践中的角色

随着互联网的不断发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;成为各大企业和网站重要的推广手段。然而&#xff0c;传统的SEO方法已经难以应对日益复杂和智能化的搜索引擎算法。在这样的背景下&#xff0c;HTTP代理爬虫作为一种重要的工具&#xff0c;正在逐渐被…

Debian 12.1 “书虫 “发布,包含 89 个错误修复和 26 个安全更新

导读Debian 项目今天宣布&#xff0c;作为最新 Debian GNU/Linux 12 “书虫 “操作系统系列的首个 ISO 更新&#xff0c;Debian 12.1 正式发布并全面上市。 Debian 12.1 是在 Debian GNU/Linux 12 “书虫 “发布六周后推出的&#xff0c;目的是为那些希望在新硬件上部署操作系统…

Docker复习

目录 1. Docker的理解1.1 Docker三要素 2 安装Docker2.1 安装命令2.2 配置阿里云加速器 3 Docker命令3.1 启动类命令3.2 镜像类命令 4 实战4.1 启动容器&#xff0c;自动创建实例4.2 查看Docker内启动的容器4.3 退出容器4.4 其他4.5 导入导出文件4.6 commit 5 Dockerfile5.1 理…

【js】经纬度位置获取navigator.geolocation.getCurrentPosition:

文章目录 一、经纬度位置获取navigator.geolocation.getCurrentPosition二、getCurrentPosition()在google chrome上不起作用 一、经纬度位置获取navigator.geolocation.getCurrentPosition 【文档】https://developer.mozilla.org/zh-CN/docs/Web/API/Window/navigator // 获取…

华为云CodeArts产品体验的心得体会及想法

文章目录 前言CodeArts 的产品优势一站式软件开发生产线研发安全Built-In华为多年研发实践能力及规范外溢高质高效敏捷交付 功能特性说明体验感受问题描述完结 前言 华为云作为一家全球领先的云计算服务提供商&#xff0c;致力于为企业和个人用户提供高效、安全、可靠的云服务。…

Docker部署Springboot应用【mysql部署+jar部署+Nginx部署】

【项目达到目标】 1.基本准备 2、mysql部署 3、jar部署 4、Nginx部署 一、基本准备 石工拿的就是之前放置在我们服务器上的应用进行部署&#xff0c;主要就是mysql和jar还有Vue的部署。 目前已经有的是jar、已经打包好的vue 二、mysql部署 docker run -d --name mysql \ …

【计算机网络】HTTP详解

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招工作面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于小林Codeing进行的&#xff0c;每个知识点的修正和深入主要参考…

SSIS对SQL Server向Mysql数据转发表数据 (一)

开发工具 Visual Stuido 2019 、SSIS、SQL Server 2016、Mysql 8.0.30 1、配置VS2019的添加相应的功能&#xff0c;勾选SQL Server Data Tools,下载就行我用的VS2019版本还需要下载下面几个插件&#xff0c;链接我放在下面了 Microsoft Analysis Services Projects - Visual St…

低代码在数智化时代中的应用

随着科技的发展&#xff0c;企业从生产到经营中海量的数据持续被记录。数据是望远镜&#xff0c;发现完全不同的商业边界&#xff1b;数据是显微镜&#xff0c;判断肉眼察觉不到的消费和生活行为&#xff1b;数据是雷达&#xff0c;帮助企业提前预测未来的行为。 而通过人工智…

【机器学习】Classification using Logistic Regression

Classification using Logistic Regression 1. 分类问题2. 线性回归方法3. 逻辑函数&#xff08;sigmod&#xff09;4.逻辑回归5. 决策边界5.1 数据集5.2 数据绘图5.3 逻辑回归与决策边界的刷新5.4 绘制决策边界 附录 导入所需的库 import numpy as np %matplotlib widget imp…

小研究 - 主动式微服务细粒度弹性缩放算法研究(二)

微服务架构已成为云数据中心的基本服务架构。但目前关于微服务系统弹性缩放的研究大多是基于服务或实例级别的水平缩放&#xff0c;忽略了能够充分利用单台服务器资源的细粒度垂直缩放&#xff0c;从而导致资源浪费。为此&#xff0c;本文设计了主动式微服务细粒度弹性缩放算法…