首页 > 其他分享 >echart动态修改每个数据的label

echart动态修改每个数据的label

时间:2023-08-18 10:01:24浏览次数:38  
标签:console echart item res label 修改 judgeFlag data log

echart可以动态修改每个数据的label 代码如下:

data: type == '01' ? this.yList[0].data.map((item, index) => {
            console.log(item, '11111');
            this.yList[1].data.map((res, it) => {
              if (index === it) {
                if (Number(item) < Number(res)) {
                  judgeFlag = true;
                }
              }
              console.log(res);
            });
            console.log('zuihou');
            return {
              value: item,
              label: {
                show: true,
                position: judgeFlag ? 'bottom' : 'top',
                distance: 2,
                offset: judgeFlag ? [0, -8] : [0, 8],
                color: '#181716',
                fontSize: 30,
                // backgroundColor: '#fff',
                backgroundColor: { image: judgeFlag ? this.topArrow : this.bottomArrow },
                borderColor: 'rgba(0,0,0,0.31)',
                // shadowColor: 'rgba(0,0,0,0.31)',
                fontFamily: 'Bebas',
                // shadowBlur: 6,
                padding: judgeFlag ? [12, 8, 6, 8] : [4, 8, 10, 8],
                lineHeight: 40,
                borderRadius: 4,
                formatter: (params) => this.numberConvert(params.value)
              },
            };
            // eslint-disable-next-line no-loop-func
          }) : this.yList[1].data.map(item => {


标签:console,echart,item,res,label,修改,judgeFlag,data,log
From: https://blog.51cto.com/u_15716707/7131991

相关文章

  • 【愚公系列】2023年08月 WPF控件专题 Label、TextBox、PasswordBox控件介绍
    (文章目录)前言WPF控件是WindowsPresentationFoundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。原生控件是由Microsoft提供的内置控件,如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见......
  • 使用MSIX Packaging Tool工具修改msix程序包
    前言MSIXPackagingTool使用户和IT管理员能够将Windows应用重新打包为MSIX格式,方便用户分享,MSIX包可在Windows11和Windows10系统中安装。该软件提供了一个交互式用户界面和一个用于转换的命令行。修改步骤1、获取MSIXPackagingToolWindows10通过应用商店获取......
  • vue中引入echarts
    1、先下载依赖包npminstallecharts-s//安装在目标项目中,如果想要全局安装就用-g2、引入2.1、全局引入main.js中importechartsfrom'echarts'Vue.prototype.$echarts=echarts//也可以用:import*asechartsfrom'echarts'2.2、局部引入component.vueimportechar......
  • IDEA社区版+SpringBoot+MyBatisPLus+MySQL实现数据库的保存、查询、修改操作
    一、概述使用IDEA社区+SpringBoot+MyBatisPlus+MySQL实现数据的保存修改与查询。主要记录一下踩坑过程。注意事项:1.社区版IDEA并不能直接创建SpringBoot工程,所以我采用的方式是在Spring官网上,让其帮助我创建一个,创建好后,直接下载。//参考案例https://blog.csd......
  • 入门级echarts地图高亮
    入门级echarts地图高亮♥需求我们需要在各个省的地图中对指定城市进行高亮,直辖市在中国地图中高亮。实现1.首先导入echartsnpminstallechartsECharts(EnterpriseCharts)是一个由百度开发的开源图表库,它提供了丰富的交互性、可定制性和扩展性,用于创建各种类型的数据可视化......
  • Echarts图表的使用以及相关配置
    前言1、Echarts简介Echarts,全称EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,能够流畅的运行在PC以及移动设备上,兼容当前绝大部分浏览器。为我们许多提供直观,生动,可交互,可高度个性化定制的数据可视化图表。能够支持折线图、柱状图、散点图、K线图、饼图、雷达图、和......
  • echarts 背景颜色透明和提示框背景颜色与透明度
    echarts背景颜色透明描述:使用'dark'系列主题初始化控件,控件会自带黑色背景色,与页面整体风格不符合,所以需要将其背景颜色设置为透明.官网文档:http://echarts.baidu.com/option.html#backgroundColor方法一:varoption={backgroundColor:'rgba(128,128,128,0.1)'//r......
  • SQL SERVER如何修改数据库文件逻辑大小
    要修改数据库文件的逻辑大小,可以使用ALTERDATABASE语句的MODIFYFILE子句。以下是修改数据库文件逻辑大小的步骤:查询当前数据库文件的逻辑大小和物理大小:USEYourDatabaseName;SELECTnameASFileName,sizeASLogicalSizeKB,size*8/1024ASLogica......
  • echarts柱状图数据太多设置滚动条
    转自:https://blog.csdn.net/weixin_42728767/article/details/131303246当你的项目中因数据量太大,导致柱状图数据全部叠在一起不便于看的时候,你们是怎么处理的?大部分同学可能第一想法就是裁剪一部分数据,仅展示页面最大限度能够展示的数据,这确实是一个好办法,简单快速。但有时候怎么......
  • ubuntu 修改网络 静态IP
    network:version:2renderer:networkdethernets:##可以ipa查看以太网连接名称eth0:dhcp4:nodhcp6:no##addresses添加网络掩码,如192.168.56.3/24addresses:-192.168.38.105/24routes:-to:defaul......