echarts 踩坑记

最新推荐文章于 2023-12-05 16:27:27 发布

转载最新推荐文章于 2023-12-05 16:27:27 发布 · 682 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dodocie/p/9134032.html

文章标签：

#javascript #ViewUI

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