japlus的博客

问题产品希望柱状图显示在坐标轴刻度的右侧，这样就不会在特殊情况下遮挡纵坐标。横坐标轴为value轴，这样才能更好实现非等间距坐标效果。非等间距坐标实现，参考Echarts 配置不等间距坐标轴刻度方案记录。echarts官方并未提供柱状图的偏移配置，series.boundaryGap、series.barGap、series.barCategoryGap均未想到有很好的实现。方案制定1.移动横坐标区间使整体柱状图不压住y轴，首先想到的是使整个x轴的x值减少半个柱状图宽度的

横坐标的值为 yyyy-MM-DD HH:mm:ss如果直接使用这个字符串作为x轴的label来展示，那太占空间了。对于一些小的宽度小的图表不友好。因此，需要将，年、时、分、秒去掉 只展示MM-DD。使用xAxis.axisLabel.formatter 函数即可实现。这样就带来了一个问题。会有许多重复的x label。

先说结果：悬浮高亮导致。这可能使echarts的bug。正常情况出现这种问题，一般是setOption 中没有配置notMerge 导致新的配置与旧配置合并。但是我这里始终配置notMerge: true，但仍然出现这种问题。最后发现与鼠标悬浮有关。

调整axisLabel.width 控制横坐标间距

需求图表x轴的是不等间距的。比如，仅需展示2,5,10,20,50的刻度。展示数据的横坐标是天数、年份等数值，且不固定。使用类目轴（category）去实现，则每个类目间的距离是相同的。方案评估整理1. 用html dom元素绘制计算好位置，用border画出刻度虚线，position:absolute与图表位置重合。canvas / svg 会用的话，也可以用这两种技术去画线。然后定位与echarts 重合。这个方案就略显麻烦，没有去实践。2. 用xAxis.type:'c

echarts 树图的连接线上加箭头与文字方案1：箭头作为一个节点方案2：富文本rich配置

场景图表横轴长，占满整个屏幕，为了让用户观看右侧部分曲线时，可以参考右测y轴。需要将右侧坐标轴设置成与左侧相同关键代码此方案中心思想是通过两个轴配置相同的min和max来达到效果根据官方文档，max 和min 可以传回调函数，在第一个y轴max，min回调中记录最大最小值，再在第二个y轴min，max中还原最大最小值。回调的参数为可见数据的min/max对象，这意味着在dataZoom拖动的时候也可以正确得到min/max根据打印的日志，发现这些min,max的回调调用顺序是固定

希望达到的效果要点展示第一个坐标的年份由于横坐标过多时，echarts会自动隐藏掉一些横坐标，因此，需要得到显示的横坐标，使用axisLabel.formatter可以获取到显示的横坐标，通过外部变量，保存已展示的年份，遍历横坐标时，判断年份是否已存在，换行加上年份展示竖线使用echarts的label.rich 富文本编辑器，控制文字大小，将竖线' | '调整到合适位置。文字加粗，让颜色更清晰。（可以设置宽度0，通过borderColor来画竖线，但是不好调整位置，所.