1、🥇需求描述
我們日常在使用ECharts實現曲線圖或柱狀圖的時候，x軸上的座標都是等距離顯示的。
有時候我們可能有這個需求：
x軸上的座標距離按照對應資料的比例進行顯示。
打個比方，假設x軸上有5個點，正常情況下，我們每個點之間的距離都是30px。
這不是我們想要的效果，我們想要的效果是，第一個點和第二個點之間的距離為30px，第二個點和第三個點之間的距離為50px，第三個點和第四個點之間的距離為87px，第四個點和第五個點之間的距離為111px……，也就是根據每個點的具體業務需求（間隔的實際距離）來動態顯示間隔的距離。
2、🥈具體實現
實現思路：
- 先隱藏x軸相關預設設定；
- 在透過
markLine屬性來繪製x軸資料。
2.1、隱藏x軸相關預設設定
首先，我們應該隱藏掉x軸預設的顯示，具體設定如下：
xAxis: {
type: 'value',
axisTick: { show: false }, //隱藏刻度線
axisLabel: { show: false }, //隱藏刻度值
//網格線，參考文件：https://echarts.apache.org/zh/option.html#xAxis.splitLine
splitLine: {
show: false //隱藏分割線
}
},
2.2、設定y軸相關設定
y軸相關設定如下所示：
yAxis: [
{
type: 'value'
}
],
2.3、設定series
接下來我們就可以在series設定markLine來實現x軸座標資料自定義間隔距離了，具體設定如下所示：
series: [
{
name: '圖例1',
type: 'line',
z: 10, //控制曲線的浮動層級，避免在markLine下方被遮住
data: [
[0.312, 0],
[0.426, 43],
[0.582, 52],
[0.795, 53],
[1.077, 60],
[1.472, 62],
[2.016, 73],
[2.745, 76],
[3.193, 85],
[3.482, 87],
[3.762, 95],
[4.37, 100],
[4.723, 100],
[5.109, 100]
],
markLine: {
symbol: '', //取消箭頭
silent: true, //取消滑鼠hover事件
label: {
//標線的文字，模擬x軸顯示的內容
position: 'start', //改變label位置
rotate: 45, //設定文字旋轉度數（注意：ECharts官網文件居然沒有rotate這個屬性的說明）
// backgroundColor:'#fff'
// color:'#f00',//文字顏色
formatter: (data) => {
return data.name;
}
},
lineStyle: { color: '#e0e6f1', type: 'solid' },
data: [
{
name: '0.075',
xAxis: 0.312
},
{
name: '0.15',
xAxis: 0.426
},
{
name: '0.3',
xAxis: 0.582
},
{
name: '0.6',
xAxis: 0.795
},
{
name: '1.18',
xAxis: 1.077
},
{
name: '2.36',
xAxis: 1.472
},
{
name: '4.75',
xAxis: 2.016
},
{
name: '9.5',
xAxis: 2.475
},
{
name: '13.2',
xAxis: 3.193
},
{
name: '16',
xAxis: 3.482
},
{
name: '19',
xAxis: 3.762
},
{
name: '26.5',
xAxis: 4.37
},
{
name: '31.5',
xAxis: 4.723
},
{
name: '37.5',
xAxis: 5.109
}
]
}
}
]
說明：
- z：控制曲線的浮動層級，如果不設定，到時候曲線顯示的層級會在markLine線條的下方，會被遮住；
- data：控制x軸座標的資料來源以及對應y軸的資料，如[37.5, 100]代表x軸的座標點在37.5這個位置的時候y軸的資料為100；
- markLine：自定義繪製的x軸座標資料
- symbol：取消繪製的箭頭符號；
- silent：取消滑鼠hover事件；
- label.position：繪製的x軸文字顯示的位置；
- label.formatter：自定義顯示繪製的x軸文字內容；
- lineStyle：繪製的樣式；
- data：要顯示的x軸資料，xAxis需要和series.data中的陣列中的第一個值保持一致，name為x軸上展現的內容。
2.4、最終效果
最終效果如下圖所示：
3、🥉完整程式碼
【2.4、最終效果】中的完整實現程式碼（下面的完整程式碼包含了一些其他設定，如：圖例、圖例預設顯示圖否、線條的顏色、自定義提示框等設定，如果不需要可自行移除），如下所示（可將如下程式碼直接複製到ECharts官網線上編輯器中執行檢視）：
option = {
grid: {
// show: true,//是否顯示外邊框線
// borderColor: '#f00',//外邊框線顏色
top: 45,
left: 30,
right: 5,
bottom: 45,
containLabel: true
},
//提示框元件，參考文件：https://echarts.apache.org/zh/option.html#tooltip
tooltip: {
trigger: 'axis',
formatter: function (datas, ticket) {
return datas && datas[0].data.length > 1
? datas[0].seriesName +
'（' +
datas[0].data[0] +
'）' +
'：' +
datas[0].data[1] +
'kg'
: datas[0].data;
}
},
//頂部的標題，參考文件：https://echarts.apache.org/zh/option.html#title
title: [
{
show: true,
text: 'ZZZZ標準曲線圖',
left: 'center',
top: 5,
textStyle: {
fontSize: 18,
fontWeight: 'normal'
}
},
{
show: true,
text: 'XXXX尺寸（mm）',
left: 'center',
bottom: 5,
textStyle: {
fontSize: 12,
fontWeight: 'normal'
}
}
],
//圖例，參考文件：https://echarts.apache.org/zh/option.html#legend
legend: {
left: 'right',
data: ['圖例1', '圖例2'],
selected: {
圖例1: true, //顯示
圖例2: false //不顯示
},
selectedMode: 'multiple' //用於控制圖例的選擇模式（single：單選、multiple：多選、false：禁止選擇）
},
xAxis: {
type: 'value',
axisTick: { show: false }, //隱藏刻度線
axisLabel: { show: false }, //隱藏刻度值
//網格線，參考文件：https://echarts.apache.org/zh/option.html#xAxis.splitLine
splitLine: {
show: false //隱藏分割線
}
},
yAxis: [
{
type: 'value',
name: 'YYYY測試標題',
nameGap: 30,
nameRotate: 90,
nameLocation: 'middle',
splitLine: {
show: true,
lineStyle: {
color: '#e0e6f1', //'#e0e6f1',
type: 'solid'
}
},
splitNumber: 10 //設定y軸分隔的段數，如0~100之間預設情況可能會按照0、20、40、60……的間隔顯示，設定相應的數字後就會根據實際情況顯示的更細，如0、10、20、30……
}
],
series: [
{
name: '圖例1',
type: 'line',
//設定資料點形狀（實心），參考文件：https://echarts.apache.org/zh/option.html#series-line.symbol
symbol: 'circle',
z: 10, //控制曲線的浮動層級，避免在markLine下方被遮住
//線條的顏色
lineStyle: {
color: '#409EFF'
//線條型別（solid：實線、dashed：粗虛線、dotted：細虛線）
// type: 'dotted',
},
//線條上資料點的顏色
itemStyle: {
color: '#409EFF'
},
//曲線資料點的設定，參考文件：https://echarts.apache.org/zh/option.html#series-line.label
label: {
show: true, //顯示曲線上的某個點的數值
formatter: function (data) {
return data.value && data.value.length > 1
? data.value[1] + 'kg'
: data.value;
}
},
data: [
[0.312, 0],
[0.426, 43],
[0.582, 52],
[0.795, 53],
[1.077, 60],
[1.472, 62],
[2.016, 73],
[2.745, 76],
[3.193, 85],
[3.482, 87],
[3.762, 95],
[4.37, 100],
[4.723, 100],
[5.109, 100]
],
markLine: {
symbol: '', //取消箭頭
silent: true, //取消滑鼠hover事件
label: {
//標線的文字，模擬x軸顯示的內容
position: 'start', //改變label位置
rotate: 45, //設定文字旋轉度數（注意：ECharts官網文件居然沒有rotate這個屬性的說明）
// backgroundColor:'#fff'
// color:'#f00',//文字顏色
formatter: (data) => {
return data.name;
}
},
lineStyle: { color: '#e0e6f1', type: 'solid' },
data: [
{
name: '0.075',
xAxis: 0.312
},
{
name: '0.15',
xAxis: 0.426
},
{
name: '0.3',
xAxis: 0.582
},
{
name: '0.6',
xAxis: 0.795
},
{
name: '1.18',
xAxis: 1.077
},
{
name: '2.36',
xAxis: 1.472
},
{
name: '4.75',
xAxis: 2.016
},
{
name: '9.5',
xAxis: 2.475
},
{
name: '13.2',
xAxis: 3.193
},
{
name: '16',
xAxis: 3.482
},
{
name: '19',
xAxis: 3.762
},
{
name: '26.5',
xAxis: 4.37
},
{
name: '31.5',
xAxis: 4.723
},
{
name: '37.5',
xAxis: 5.109
}
]
}
},
{
name: '圖例2',
type: 'line',
symbol: 'circle',
z: 10,
lineStyle: {
color: '#67C23A'
},
itemStyle: {
color: '#67C23A'
},
data: [
[0.212, 0],
[0.326, 43],
[0.482, 52],
[0.695, 53],
[0.977, 60],
[1.372, 62],
[1.916, 73],
[2.645, 76],
[3.093, 85],
[3.382, 87],
[3.662, 95],
[4.27, 100],
[4.623, 100],
[5.009, 100]
],
markLine: {
symbol: '',
silent: true,
label: {
position: 'start',
rotate: 45,
formatter: (data) => {
return data.name;
}
},
lineStyle: { color: '#e0e6f1', type: 'solid' },
data: [
{
name: '0.065',
xAxis: 0.212
},
{
name: '0.05',
xAxis: 0.326
},
{
name: '0.2',
xAxis: 0.482
},
{
name: '0.5',
xAxis: 0.695
},
{
name: '1.08',
xAxis: 0.977
},
{
name: '2.26',
xAxis: 1.372
},
{
name: '4.65',
xAxis: 1.916
},
{
name: '9.4',
xAxis: 2.375
},
{
name: '12.2',
xAxis: 3.093
},
{
name: '15',
xAxis: 3.382
},
{
name: '18',
xAxis: 3.662
},
{
name: '25.5',
xAxis: 4.27
},
{
name: '30.5',
xAxis: 4.623
},
{
name: '36.5',
xAxis: 5.009
}
]
}
}
]
};