先展示效果图如下:

实现方法是通过官网提供的配置项


实现的思路为:
算出每组数据的最大值,将每组数据分割为相同的段数,为了每段刻度数据展示优雅,我将每组的数据的最大值向上取整到整十整百等等,根据实际的数据来定,源代码针对项目对echarts做了二次封装,以下展示部分主要代码
// 处理每组数据的类方法
class ChartDataHandle {
constructor (arr) {
this.arr = arr
}
clacMax () {
const newArr = this.arr
newArr.sort((a, b) => a - b)
return newArr[newArr.length-1]
}
interval (count) {
const theMax = this.clacMax()
const thisMaxStr = theMax + ''
const start = Number(thisMaxStr.substr(0, 1))
if (start < 9) {
return (start+1)*Math.pow(10, thisMaxStr.length-1)/count
}
return Math.pow(10, thisMaxStr.length)/count
}
}
export default ChartDataHandle
...
// 应用
if (props.isMultipleYAxes) {
for (let i=1, len=data.chartData.length; i<len; i++) {
const j = i-1;
const chartDataHandle = new ChartDataHandle(data.chartData[i])
yAxis.push({
"type": "value",
"name": data.chartData[i][0],
"position": i%2 === 0 ? 'right' : 'left',
"offset": Math.floor((i-1)/2)*60,
"axisLine": {
"lineStyle": {
"color": BAR_COLOR[j]
}
},
"splitNumber": 5,
"interval": chartDataHandle.interval(5)
});
}
}
网友评论