echarts 踩坑记
1. x轴类型。
当Y轴 type = value:
1.1 x 轴 type = category,series的data类型为一维数组即可。
1.2 不设置 min/max,需再设置 scale: true,才能自动计算最小值保证坐标轴刻度的均匀分布。文档没有很明确提到这点,超级坑。scale:是否脱离0值比例。
1.3 设置min/max后,scale失效。
X轴 type = time:
1. splitNumber 有效,但echarts仍然会自动计算。
xAxis : { splitLine: { show: true, //x轴网格 lineStyle:{ color: '#f7f7f7', } }, splitNumber: dyadicData.length -1, }
2. axisLabel.showMinLabel: true 显示最小 tick 的 label, 默认自动判定(即如果标签重叠,不会显示最小 tick 的 label) showMaxLabel 同。
3. axisLable.formatter(value, index){ 刻度标签的内容,也可以将 X轴数据格式化成对应的字符串 }
4. x轴传入毫秒数,不同浏览器格式化结果差异较大。可手动formatter:
type: 'time', axisLabel : { formatter: function (value, index) { return new Date(value).toLocaleDateString() } },
2. 双数值轴
2.1 series data 为二维数组: [[x.value[0], y.value[0]], [x.value[1], y.value[1]]] 。否则数据不展示。(详见官网实例)
2.2 为什么 boundaryGap 失效? 不管是time还是value轴。但留给开发的时间不多了,只好曲线救国。给 data 数组首尾插入空字符串。
series : [{ name : "随便什么名反正会影响legend", type : 'line', itemStyle: {color: '#71EAD3'}, lineStyle: { type : 'solid', color: '#71EAD3' }, data : ['', ...dyadicData.slice(0,-1), ''] }, ]