目前echart官方api 目前可以自定义的样式
第一种：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
rotate: 60
}
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};第二种：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
formatter (name) {
return name.split('').join('\n')
}
}
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};我们的产品要求是超过省略：
然后echart拉伸的时候，字在逐渐显示出来，这目前我没有从官方api找到解决方案。产品就说给你一两天调研一下。
接下来 就开始找实现方案了，一开始想着从官方formater看看能不能多输出一些信息
可以看出输出的是 类目轴(我这里是标题) 以及 数字(就是第几个)，然后没有其它信息了。然后echart本身如果你不设置都必须显示的话，它是会自动计算标题文字是否重复，如果重复，就会间隔显示的。如果我们找到他的计算判断方法，这个问题也就解决了，然而一番折腾，没有实现.....
最后想到 标题 和 刻度索引，我可以用div来实现 。flex弹性布局就可以了，将fomatter回调的结果放入一个数组中 不就可以了，最终实现了。
// 这个formatter在echarts更新的时候会重复调用，所以得计数一下，
// 如果又是从0开始 数组要清空
formatter: (name, id) => {
if (id === 0) {
maxNum = 0
this.axisData = [{name, id}]
} else {
this.axisData.push({name, id})
}
maxNum = Math.max(maxNum, this.viewNum[id])
this.maxTxtLen = (maxNum.toString()).length
return ' ' //这个必须要有返回 不然会有问题
},最后一个列表循环就搞定了，这里面如果你不是，每一个坐标刻度都显示的话，可能还需要探索一下。
紧接着，第二个需求来了
鼠标hover在x轴的标题上，要显示:
一看到这个，这不是hover在坐标的时候显示的吗。echart没有提供hover文字也有这效果，首先想的是，继续从源码找找看看，说不定是啥私有方法，遇事不决，就搞源码....。耗费了时间又没有发现，继续手撸吧。
这个用div是都可以实现的，只需要计算坐标就可以了。
总结：
时间比较少的情况，第三方库代码又很多的情况，不建议撸源码，应该先hack实现，有时间再看看
