在做图表的时候，总是会遇到提示的内容和水平的内容格式不统一。然后每次都要做两次处理，鼠标滑过的提示x坐标内容 和 水平x显示的刻度要不一样，或者把外部的数据传入到内部进行切割。
更好的做法，提示的显示全部，水平的刻度单独做处理。
xAxis: [ { type: "category", axisLabel: { formatter: (value) => { const val = value?.split(' ')[1]?.split(':')[0] // 2026-1-20 20:00 return val } }, axisTick: { show: false }, data: [] } ],// 提示内容 - 适合小程序的配置样式
tooltip: {
trigger: "axis",
borderColor: '#eee', // 设置边框颜色为透明
shadowOffsetX: 0, // 不使用水平偏移
shadowOffsetY: 0, // 不使用垂直偏移
valueFormatter,
// position: ['30%', '30%'],
textStyle:{
fontSize: 11, // 设置字体大小
textShadowColor:'transparent', // 阴影
textShadowBlur:10
}
}
移动端提示框内部 有阴影，去掉的方式设置 textShadowColor:'transparent'。
设置 坐标的数据最小值不为0，设置如下 yAxis: [{ type: "value", min: 'dataMin', max: 'dataMax', }], 防止有小数点，取证用这个方式 ：yAxis: { type: "value", scale: true }。
设置多个Y坐标的方式如下： 在series设置 yAxisIndex: 1 ，要显示坐标的方式如下：axisLine: {show: true},
列表横坐标空数据，那就设置为空显示。
const option = { title: { text: '暂无数据', x: 'center', y: 'center', textStyle: { fontSize: 16 } } }; // 方法1：禁用合并（推荐） chart.setOption(option, true);
设置水平线的方式。
再一个series数据中某一个类型中设置如下的。
series: [ { markLine: { data: [ { yAxis:maxData, name: '最小值', lineStyle: { color: 'red', type: 'dashed' } }, // 最小值2，红色虚线 { yAxis: minData, name: '最大值', lineStyle: { color: 'red' , type: 'dashed'} } ] } } ]
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。