echarts中得一些使用技巧和方法

news2024/9/23 0:33:47

一、取数据的最大值:

 let maxNum =  maxData.sort((a, b) => b - a)[0];

二、echarts 自适应

所有的echarts里面设置了字体根据最外层body的字体来改变大小
// app.vue中的代码
// 页面开始加载时修改font-size
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
var pxVal = oWidth / 1920;
sessionStorage.setItem("echartFont", pxVal); // 用于echart修改字体大小
html.style.fontSize = pxVal * 100 + "px";
每个echarts里面设置了
this.echartFontSize = sessionStorage.getItem("echartFont") ? sessionStorage.getItem("echartFont") : 1;
ehcarts字体的大小只能是px 所以假如字体大小是16px 在这个的基础上 16 * this.echartFontSize 来实现自适应如果sessionStorage 没有存 "echartFont" 默认为字体传值进去的大小。
fontSize: 12 * this.echartFontSize,

有些图形的宽度,位置,大小等等也可以设置

三、柱状图左侧文字的宽度

 如上图左侧的文字宽度需要手动来根据文字设置宽度

let yData = ["地面道路", "高速公路", "快速路"],
let strLen = yData[0].length;
yData.forEach((item) => {
  if (item.length > strLen) {
     strLen = item.lengt;
  }
});
strLen = strLen + (50 + strLen * 14) * this.echartFontSize;

四、标题不是只可以写官方文档上的两个内容

 官方文档有两个标题可以设置,但是并不是说只能有两个不要被误导了,其实可以多个

 五、当echarts 中要使用图片时

还是拿个来做案例

// 方便以后使用将代码放上,直接复制
require("@/../static/images/black/components/echarts/echarts6/icon_dimian.png")


imgSrc.push({
   value: maxNum,
   symbol: `image://${echartData.symbol[i]}`,
});

 改echarts是做了组件化的,很多东西都需要从外面来进行调整,根据标题来对应相应的icon, 所以可以作为参考

六、文字太多省略处理

ehcarts有些时候需要显示得文字太多了需要进行处理一下,不然不够美观还会影响echarts图列得显示

   // 虽然显示得地方进行了处理,但是echarts划上去显示得时候是要完整得,如下图所示:

 
   
      chartData.data = [
        {
            label: "名称2-" + (i + 1) + "-" + (j + 1),
            value: Math.floor(Math.random() * 200 + 10)
        }
       ]; // 具体数值根据实际得来就好了只是示意一下
      let strLen = 5; // 最多显示5个字,或者也可以组件化通过外面传值来进行控制
      chartData.data.forEach((item, index) => {
        item.forEach((val) => {
          let name = val.label;
          if (name.length > strLen) {
            name = name.slice(0, strLen) + "...";  // 主要是这里将显示文字得文字做一下处理
          }
         
        });
      });

暂时就这些把,后面再有值得记录一下得会慢慢加进来!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/138167.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VGG详解

入门小菜鸟,希望像做笔记记录自己学的东西,也希望能帮助到同样入门的人,更希望大佬们帮忙纠错啦~侵权立删。 ✨完整代码在我的github上,有需要的朋友可以康康✨ https://github.com/tt-s-t/Deep-Learning.git 目录 一、VGG网络的…

小侃设计模式(二十)-迭代器模式

1.概述 迭代器模式(Iterator Pattern)提供了一种方法访问一个容器对象中各个元素,而又不暴露该对象的内部细节。迭代器模式用于访问集合中的元素而不需要知道集合底层的数据形式。在JAVA语言中,迭代器模式已经成为其中不可缺少的…

3000字13张图详细介绍RAID0、1、5、6、10、50、60,非常值得收藏!

RAID简述 RAID 是一种用于提高数据存储性能和可靠性的技术,英文全称:Redundant Array of Independent Disks,中文意思:独立磁盘冗余阵列。RAID 系统由两个或多个并行工作的驱动器组成,这些可以是硬盘或者 SSD&#xf…

力扣刷题记录——344.反转字符串、345.反转字符串中的元音、349.两个数组的交集

本专栏主要记录力扣的刷题记录,备战蓝桥杯,供复盘和优化算法使用,也希望给大家带来帮助,博主是算法小白,希望各位大佬不要见笑,今天要分享的是——《344.反转字符串、345.反转字符串中的元音、349.两个数组…

Jvm 系列(十二) JVM的执行引擎全面讲解

JVM 执行引擎 1、执行引擎概述 执行引擎是Java虚拟机核心的组成部分之一。 “虚拟机”是相对于“物理机”的概念,这两种机器都有代码执行能力,其区别是物理机的执行引擎是直接建立在处理机、缓存、指令集和操作系统层面上的,而虚拟机的执行…

国产直流马达驱动芯片SS6216的功能参数以及应用

直流有刷电机驱动芯片SS6216是为消费类产品,玩具和其他低压或者电池供电的运动控制类应用提供了一个集成的有刷电机驱动器解决方案。是为低电压下工作的系统而设计的直流电机驱动集成电路,单通道低导通电阻。具备电机正转/反转/停止/刹车四个功能。 直流…

STL剖析(二):容器底层数据结构及常见用法

一.概述 本文主要聚焦于STL容器,STL完整的容器分类体系如下所示,下文将逐一对各个容器底层的数据结构以及常见用法进行介绍。 测试环境:Ubuntu 22.04 g 11.3.0 二.顺序容器 顺序容器都对应着线性数据结构。 2.1 array array的使用需要引…

6.2 微服务-SpringBoot

目录 6.2.1 SpringBoot 6.2.1.1 什么是Spring Boot 6.2.1.2 SpringBoot的特点 6.2.2 快速入门 6.2.2.1 创建工程 6.2.2.2 引入依赖 6.2.2.3 启动类 6.2.2.4 controller 6.2.2.5 测试 6.2.3 注解与属性注入 6.2.3.1 注解 6.2.3.1.1 EnableAutoConfiguration 6.2.3.1…

leetcode 240. 搜索二维矩阵 II-java题解

题目所属分类 从右上角出发往下遍历 倒是也可以二分 原题链接 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性: 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 代码案例: 输入:m…

加解密与HTTPS(4)

您好,我是湘王,这是我的CSDN博客,欢迎您来,欢迎您再来~ 在互联网应用中,安全性问题已经越来越突出。从DDoS攻击、矿机劫持、乌云事件(白帽子变成黑帽子),到窃听、偷拍、强…

Word控件Spire.Doc 【Table】教程(1):在 Word 中创建表格-C#VB.NET

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具,专注于创建、编辑、转…

spring源码-资源资源加载器

Spring资源抽象Resource Spring对各种底层资源,比如文件系统中的一个文件,classpath上的一个文件,或者一个网络URL,统一抽象为接口Resource来表示 因为每个底层文件都可以以一个只读InputStream的方式打开,所以Resource接口继承…

ModuleNotFoundError: No module named ‘cs231n‘

在colab上完成cs231n的作业时发现,报了No module named cs231n’这个错误,查询后也没有找到合适的答案 仔细检查,发现是没有找到assignment1下的cs231n文件夹,然后去网站核对视频教程,发现没有搞错,视频中…

浮点数的储存

浮点数的储存一.浮点数的三段式(S,E,M)1.如何放入2.如何取出二.为什么浮点数不能直接比较三.解释第一个问题我们都知道整形在内存中是按照补码的形式储存的,但是浮点数的储存却和整数的截然不同,浮点数没有所谓是原反补并且浮点数…

SSM框架学习记录-MyBatisPlus_day01

1.入门案例与简介 MybatisPlus是基于MyBatis框架基础上开发的增强型工具,旨在简化开发、提供效率 未使用MybatisPlus时,在dao接口中的代码如下: Mapper public interface UserDao {Select("select * from user where id#{id}")publ…

冬日宅家选哪款投影仪比较好?极米H5陪你温暖过冬天

随着室外温度的逐步下降,寒冬也真的来了。相信对于许多朋友来说,宅家是冬季最惬意的时光,就是开着空调、电暖风、暖气,在温暖的室内,再打开投影仪,用超大屏追剧、看看电影,听听美妙的音乐&#…

光伏二次设备概述

概述 分布式光伏发电项目一般根据并网的电压等级分为380V和10KV。一般电压等级为380V低压并并网基本不涉及到什么二次产品,通常采用光伏并网柜就能解决,常见的并网设备为防孤岛保护装置和电能质量在线监测装置为主。而10KV并网的光伏容量一般处于1MWP到1…

加强企业数据库安全的行为准则

现在大多数企业都拥有可靠的网络安全程序,这些程序利用多种控件来实现深度防御安全性。通过这些程序,企业服务器得到加固,企业端点得到保护,监控工具也得以部署。还能够消除来自端点设备的高度敏感信息,并整合企业系统…

基于jsp+sevlet+mysql实验室设备管理系统

基于jspsevletmysql实验室设备管理系统一、系统介绍二、功能展示1.通知公告(学生)2.实验设备借用申请(学生)3.设备借用记录(学生)4.实验室预约申请(老师)5.实验室预约记录(老师)6.实验设备借用申请(老师)7.设备借用记录(老师)8.通知公告(管理员)9.实验室管理(管理员)10.设备管理…

QA | 关于可编程信号发生器,您在使用中可能遇到的问题

Q1:为什么信号源插在电脑上会显示电压不足? A:通常需要比普通电脑USB接口能提供更大的功率,需要高达2.0A的电流,超出了许多老式 USB 端口的水平。可以通过多种方式满足这一要求。适配器、USB 3.0计算机/笔记本电脑端口…