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

echarts横向柱状图让Y轴的名字和数量在柱状图上方展示

效果图

 

let vm = thisvm.chart2 = echarts.init(this.$refs.chart2)let xDatas = this.registerProjectType.map((item) => {let found = data.find((countItem) => countItem.projectType === item.label)return found ? found.count : 0})// 翻转数据让其他项目在最下面let xData = xDatas.reverse()let yDatas = this.registerProjectType.map((item) => item.label)let yData = yDatas.reverse()let option = {color: ['#28d2d0', '#0090ff'],grid: {top: '3%',left: '3%',right: '4%',bottom: '3%',containLabel: true // 确保标签不会溢出容器},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},yAxis: [{type: 'category',data: yData,axisLine: { // 控制坐标轴线show: false // 隐藏轴线},axisTick: { // 控制刻度线show: false // 隐藏刻度线},splitLine: { // 控制网格线show: false // 隐藏网格线},axisLabel: { // 控制坐标轴标签show: true,inside: true,interval: 0, //横轴信息全部显splitNumber: 50,textStyle: {color: '#585858',verticalAlign: 'bottom',fontSize: 12,align: 'left',padding: [0, 0, 15, -5]}}},{inverse: false,data: xData,axisLabel: {inside: true,textStyle: {// color: '#8db0ff',fontSize: 12,align: 'right',},formatter: '{value}\n{a|占位}\n{a|占位}',rich: {a: {color: 'transparent',lineHeight: 20,fontFamily: 'digital'}}},offset: 0,splitLine: {show: false},axisTick: {show: false},axisLine: {show: false}}],xAxis: {type: 'value',// boundaryGap: [0, 0.01] ,axisLine: { // 控制坐标轴线show: false // 隐藏轴线},axisTick: { // 控制刻度线show: false // 隐藏刻度线},splitLine: { // 控制网格线show: false // 隐藏网格线},axisLabel: { // 控制坐标轴标签show: false}},series: [{barWidth: 15, // 条形的宽度// label: {//   show: true,//   position: 'right'// },data: xData,type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}},// {//   type: 'bar',//   data: [120, 100, 90, 60, 30],//   barWidth: 15,//   label: {//     position: [10, 10],//     normal: {//       position: [800, -24],//       show: true,//       textStyle: {//         color: '#8db0ff',//         fontSize: 16,//       },//     },//   },//   itemStyle: {//     normal: {//       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [//         '#007AFF', '#00FFFF'//       ].map((color, offset) => ({//         color,//         offset//       })))//     }//   }// }]


http://www.mrgr.cn/news/35718.html

相关文章:

  • 四川财谷通信息技术有限公司抖音小店领域的新势力
  • 保姆级教程!0基础小白也适用,教你用AI美女在小红书“疯狂上分”
  • 企业源代码也需要加密?2024十款源代码加密软件排行榜
  • ChatWiki大模型介绍
  • 黑芝麻大算力SOC,A1000
  • .NET 一款执行命令回显的微软白名单工具
  • MySQL 8 临时关闭缓存
  • 【高等代数笔记】线性空间(十-十三)
  • 国产操作系统
  • MySQL的乐观锁、悲观锁机制及实现
  • 葡萄城亮相2024全球产品经理大会,共探创新之旅
  • 公司用什么软件监控电脑?分享6个常见的电脑监控软件,赶紧Get吧!
  • mac-m1安装nvm,docker,miniconda
  • 电商时代,品牌控价的新征程
  • 9.创新与未来:ChatGPT的新功能和趋势【9/10】
  • 牛客小白月赛101(下)
  • 人工智能与网络安全
  • 网络编程,端口号,网络字节序,udp
  • Logback 基本概念
  • Python 解析 html