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

echarts根据x轴数据长度判断是否倾斜展示/柱状图上方显示数字

在这里插入图片描述

showChart1() {
// 通过id初始化let chart1 = echarts.init(document.getElementById(this.idName))var option = {// 到容器的距离grid: {top: '18',left: '0',right: '4',bottom: '0',},xAxis: [{type: 'category',data: this.xData,axisLine: {lineStyle: {color: 'rgba(255, 255, 255, .5)',},},axisLabel: {margin: 10,color: '#ffffff',textStyle: {// 可以根据屏幕尺寸显示不同字号fontSize: this.screenWidth == '1920' ? 16 : 12,},// 每个x轴数据的间距interval: 0,// 旋转显示,数据长度大于6的rotate: this.xData.length > 6 ? 30 : 0},axisTick: {show: false,},splitLine: {show: false,},},],yAxis: [{// boundaryGap: ['20%', '20%'], //分割线间隔type: 'value',name: '',axisLabel: {formatter: '{value}',color: '#ffffff',fontSize: this.screenWidth == '1920' ? 16 : 12,},axisTick: {show: false,},axisLine: {show: false,},splitLine: {lineStyle: {color: 'rgba(255, 255, 255, .2)',type: 'dashed',},},},],series: [{type: 'bar',data: this.yData,barWidth: this.screenWidth == '1920' ? '36px' : '20px',itemStyle: {// 柱状图上方显示数字normal: {label: {show: true, //开启显示数值position: 'top', //数值在上方显示textStyle: {  //数值样式color: '#D1DBFF',   //字体颜色fontSize: 14  //字体大小}},color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color:this.idName == 'count'? 'rgba(62, 173, 255, 1)': this.idName == 'person'? '#04DBFD': '#FFCC3E', // 0% 处的颜色},{offset: 1,// 通过id判断颜色color:this.idName == 'count'? 'rgba(62, 173, 255, 0)': this.idName == 'person'? 'rgba(4, 219, 253, 0)': 'rgba(255, 204, 62, 0) ', // 100% 处的颜色},], //false),},},},],}chart1.setOption(option, true)// 监听容器的大小使图表大小跟着变化setTimeout(function () {window.onresize = function () {chart1.resize()}})
},
http://www.lryc.cn/news/160211.html

相关文章:

  • Eviews用向量自回归模型VAR实证分析公路交通通车里程与经济发展GDP协整关系时间序列数据和脉冲响应可视化...
  • 群晖NAS:通过Docker 部署宝塔面板【注册表:cyberbolt/baota】
  • pdfjs在线预览组件的使用
  • python线程、协程
  • AttributeError: module ‘OpenSSL.SSL’ has no attribute ‘SSLv3_METHOD
  • DTCC 2023丨云原生环境下,需要什么样的 ETL 方案?
  • 在UE4虚幻引擎中加入导航网格体边界体积后丧尸不能移动和发现玩家
  • 华为数通方向HCIP-DataCom H12-821题库(单选题:221-240)
  • aarch64 arm64 部署 stable diffusion webui 笔记 【1】准备 venv 安装pytorch 验证cuda
  • 从方法到目标了解什么是机器学习?
  • Devos勒索病毒:网络安全的新威胁,勒索病毒解密,数据恢复
  • go语言的高级特性
  • 华为VRP系统基本操作
  • Milvus Cloud扩展变更:为向量数据库注入前沿增强功能
  • 外观模式简介
  • web pdf 拖拽签章
  • SQLAlchemy 库创建数据库引擎和会话工厂附带SQLSERVER驱动版本确认方式
  • 用Python登录账户
  • 梳理下我自已对Reactor与及IO多路复用的select\poll\epoll的理解
  • 4. 广播变量
  • GPT 内部 — I : 了解文本生成
  • 平板触控笔哪款好用?好用的第三方apple pencil
  • Mac 上更新系统PATH环境变量
  • Visual Studio Code 终端配置使用 MySQL
  • 12 | 使用 Spark SQL执行CURL
  • 容器编排学习(七)控制器介绍与使用
  • 一文看懂微信小程序新版隐私协议(附带弹窗组件)
  • Java认识异常(超级详细)
  • 危险边缘:揭示 Python 编程中易被忽视的四个安全陷阱
  • 抖店开通后,新手必须要知道的几个做店技巧,建议认真看完