eCharts折線圖延伸曲線至與y軸相交

先上效果圖:
在這裏插入圖片描述

步驟:
1、在數據前面加一組虛擬數據,x軸爲空,y軸的值比第一個數據稍小一些
2、數據標籤修改第一個不顯示

formatter: function(param){
	var index = param.dataIndex;
    if (index === 0) {
        return "";//虛擬數據上不顯示標籤
    } else {
        return param.value + "人";
    }
}

3、標記修改第一個不顯示

symbolSize: function(value, param) {
	var index = param.dataIndex;
	if (index === 0) {
		return 0;//虛擬數據上不顯示標點
	} else {
		return 4;
	}
}

下面是完整echarts圖的代碼

option = {
    tooltip: {},
    xAxis: {
        type: 'category',
        data: ['', '2014年', '2015年', '2016年', '2017年', '2018年'],//第一個數據爲空
        boundaryGap: false,
        min: 0
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    series: [{
        type: 'line',
        smooth: true,
        data: ['74', '84', '110', '160', '200', '238'],//第一個虛擬數據設置的比實際數據的第一個小一些,這樣呈一個上升趨勢就好
        label: {
            show: true,
            formatter: function(param){
                var index = param.dataIndex;
                if (index === 0) {
                    return "";//虛擬數據上不顯示標籤
                } else {
                    return param.value + "人";
                }
            }
        },
        symbolSize: function(value, param) {
            var index = param.dataIndex;
            if (index === 0) {
                return 0;//虛擬數據上不顯示標點
            } else {
                return 4;
            }
        }
    }]
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章