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), '']
            },
]
原文地址:https://www.cnblogs.com/dodocie/p/9134032.html