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

Echarts堆叠柱状图和折线图以及堆叠柱状画遇到存在极小值label数字重叠解决

<div class="chart-box"><v-chart ref="barChart" class="chartStyle" :options="options" />
</div>
// 图标配置options() {const $this = thisreturn {// 标题和提示框title: { text: 'Echarts图表' },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: { type: 'shadow' },formatter: function (params) {// 获取第一个参数的日期值(x轴值)const date = params[0].axisValue;const test= $this.dataList.find(item => {return item.date === date})?.test;let result = `${date}<br/>`;result += `label数据3: ${test?? ''}<br/>`;// 添加你原有的系列数据显示逻辑result += params.map((param) => {if (param.seriesName === '折线概率') {return `${param.seriesName}: ${param.value ?? ''}%`;} else {return `${param.seriesName}: ${param.value ?? ''}`;}}).join('<br>');return result;}},// 图例legend: { data: ['柱状数据A', '柱状数据B', '折线概率'] },// X 轴(类目轴)xAxis: {type: 'category',data: this.xAxisData},// 双 Y 轴yAxis: [{type: 'value'},{type: 'value',axisLabel: { formatter: '{value}%' },splitLine: { show: false } // 避免右轴网格线与左轴重叠}],// 系列配置series: [// 堆叠柱状图系列 下方{name: '柱状数据A',type: 'bar',barWidth: 30, // 固定宽度(单位:px)barMinHeight: 15,z: 10,stack: '堆叠', // 相同的 stack 值实现堆叠data: this.aList,itemStyle: { color: '#698BF9' },label: {show: true,color: '#fff'}},// 堆叠柱状图系列 上方{name: '柱状数据B',type: 'bar',barWidth: 30, // 固定宽度(单位:px)barMinHeight: 35,stack: '堆叠',data: this.bList,itemStyle: { color: '#FA5561' },label: {show: true}},// 折线图系列{name: '折线概率',type: 'line',yAxisIndex: 1, // 绑定到右 Y 轴data: this.cList,smooth: true, // 平滑曲线symbol: 'circle', // 数据点标记为圆形symbolSize: 8,lineStyle: { width: 3, color: '#63CDFE' },itemStyle: { color: '#63CDFE' },label: {show: false, // 显示标签formatter: '{c}%' // {c} 代表当前数据值,拼接 %}}]}}
// 图表数据处理handleEchartsData() {// 提取公共的 map 逻辑,避免重复遍历const { xAxisData, aList, bList, cList} = this.dataList.reduce((acc, item) => {acc.xAxisData.push(item.statisticsDate ?? '')acc.aList.push(item.a?? '')acc.bList.push(item.b?? '')acc.cList.push(item.c? (item.c* 100).toFixed(2) : '')return acc},{ xAxisData: [], aList: [], bList: [], cList: [] })// 直接赋值到 thisthis.xAxisData = xAxisDatathis.aList= aListthis.bList= bListthis.cList= cList},
http://www.xdnf.cn/news/16765.html

相关文章:

  • python之使用ffmpeg下载直播推流视频rtmp、m3u8协议实时获取时间进度
  • 【qiankun】基于vite的qiankun微前端框架下,子应用的静态资源无法加载的问题
  • 进阶向:YOLOv11模型轻量化
  • 浅谈“压敏电阻”
  • 【Prompt集合】一个学习英文单词更好的提示词
  • 前端开发(HTML,CSS,VUE,JS)从入门到精通!第一天(HTML5)
  • WinForm之CheckBox 控件
  • 微服务架构技巧篇——接口类设计技巧
  • 循环神经网络RNN原理精讲,详细举例!
  • 【笔记】重学单片机(51)
  • 嵌入式硬件中瓷片电容的基本原理与详解
  • 51c自动驾驶~合集12
  • 图像处理中级篇 [2]—— 外观检查 / 伤痕模式的原理与优化设置方法
  • MELF电阻的原理,特性和应用
  • 8,FreeRTOS时间片调度
  • 技术速递|GitHub Copilot for Eclipse 迈出重要一步
  • Leetcode-206.反转链表
  • 当过滤条件不符合最左前缀时,如何有效利用索引? | OceanBase SQL 优化实践
  • 免费语音识别(ASR)服务深度指南​
  • 39.MySQL索引
  • 基于深度学习的医学图像分析:使用YOLOv5实现医学图像目标检测
  • react+ant design怎么样式穿透-tooltip怎么去掉箭头
  • 限流算法详解:固定窗口、滑动窗口、令牌桶与漏桶算法全面对比
  • 实现implements InitializingBean, DisposableBean 有什么用
  • 【2025/07/30】GitHub 今日热门项目
  • arkui 动画曲线
  • 分布式搜索和分析引擎Elasticsearch实战指南
  • SpringBoot 2.7.18 升级 3.4.6
  • duiLib 自定义资源目录
  • C#垃圾回收机制:原理与实践