版本： echarts@5.0.2
測試使用案例： https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
折線hover后的加粗如何取消
解決方法： 同時設置 lineStyle 和 emphasis.lineStyle即可解決hover折線加粗問題
series: [
{
name: 'MA5',
type: 'line',
data: calculateMA(5),
showSymbol: false, // 取消值點的空心樣式，只有在hover時顯示
smooth: true, // 折線平滑
lineStyle: {
// opacity: 0.5,
width: 1, // 正常時的折線寬度
},
emphasis: {
lineStyle: {
width: 1, // hover時的折線寬度
}
}
},
]
參考博客：
https://blog.csdn.net/weixin_29491885/article/details/113870075
markline 標記線和折線的交點樣式
- 設置 itemStyle.opacity 為 0 即可取消交點的樣式
- 設置 color 和 itemStyle.emphasis.color 同色，即可解決交點的空心樣式問題（使得空心顏色和折線顏色一致）
series: [
{
name: 'MA5',
type: 'line',
data: calculateMA(5),
showSymbol: false, // 取消值點的空心樣式，只有在hover時顯示
smooth: true, // 折線平滑
lineStyle: {
// opacity: 0.5,
width: 1, // 正常時的折線寬度
},
emphasis: {
lineStyle: {
width: 1, // hover時的折線寬度
}
},
color: '#ff0000',
itemStyle: {
opacity: 0, // 取消交點的樣式，即hover交點時沒有效果
emphasis: {
color: '#ff0000', // hover交點空心處的顏色
}
}
},
]
參考博客：(注意： 博客中設置的itemStyle.normal的border樣式沒有效果，只有itemStyle.normal.color覆蓋了外部設置的color，可能是版本問題)
https://blog.csdn.net/qq_38918953/article/details/109387063
x軸label條件顯示
需求： 只顯示 第一個和最后一個label
問題： label文字過長，導致只顯示一半（第一個顯示后半部分，最后一個顯示前半部分）
interval 和 formatter 都可以進行篩選
xAxis: {
type: 'category',
data: data0.categoryData,
axisLabel: {
// interval: data0.categoryData.length - 2, // 只顯示 第一個和最后一個label，或者使用formatter
formatter: (value, index) => {
if (index === 0 || index === data0.categoryData.length - 1) { // 只顯示 第一個和最后一個label
return value;
}
},
}
},
對於label顯示不全問題，使用了formatter 和 rich 屬性搭配解決
xAxis: {
type: 'category',
data: data0.categoryData,
axisLabel: {
interval: data0.categoryData.length - 2,
formatter: (value, index) => {
if (index === 0) {
return `{a|${value}}`;
} else {
return `{b|${value}}`;
}
},
rich: {
a: {
padding: [0, 0, 0, 40],
},
b: {
padding: [0, 40, 0, 0],
}
}
}
},
x軸label條件顯示2
需求： x軸label想要顯示三個，只顯示 第一個、最后一個label和中間的label
問題1： 使用 interval: Math.floor((_this.date.length-3)/2), 始終無法准確顯示最后一個和中間一個
問題2： 使用 formatter 回調進行index判斷顯示(第一個、中間一個、最后一個)，但是回調調用混亂
解決：
此處必須與 interval: 0 搭配使用，因為默認會自動添加interval:auto 導致label過多
如果 interval: 0 不配置，formatter會被循環調用兩次（第一次是遍歷，第二次是按照interval: auto）
xAxis: {
type: 'category',
data: this.date,
axisLine: {
show: false,
lineStyle: {
color: axisLabelColor
}
},
axisTick: {
show: false,
},
axisLabel: {
// interval: Math.floor((_this.date.length-3)/2),
interval: 0,
formatter(value, index) {
// 此處必須與 interval: 0 搭配使用，因為默認會自動添加interval
if (index === 0) {
return `{a|${_this.formatDate(value)}}`;
} else if (index === _this.date.length - 1) {
return `{b|${_this.formatDate(value)}}`;
} else if (index === Math.floor(_this.date.length/2)) {
return `{c|${_this.formatDate(value)}}`;
}
},
rich: {
a: {
...textCommonStyle,
padding: [0, 0, 0, this.calcEchartPx(55)]
},
b: {
...textCommonStyle,
padding: [0, this.calcEchartPx(55), 0, 0]
},
c: {
...textCommonStyle,
},
},
// margin會導致label被遮擋（顯示不全）
// margin: this.calcEchartPx(8),
},
// X 軸相對於默認位置的偏移
offset: this.calcEchartPx(8)
},
十字線效果
坐標軸axisPointer （例如xAxis.axisPointer、yAxis.axisPointer） 表示對應坐標軸的的指示器，默認不顯示，但是優先級最高（會覆蓋tooltip.axisPointer）
tooltip.axisPointer 表示tooltip的指示器，默認顯示，一般是x軸的指示器
// 區別於tooltip中的axisPointer，默認不顯示，但是優先級更高
xAxis: {
axisPointer: {
show: true,
type: "line",
label: {
show: false
},
lineStyle: {
type: "solid",
color: '#00ff00',
}
},
},
tooltip: {
trigger: "axis",
triggerOn: "mousemove|click", // tooltip觸發事件
hideDelay: 2000, // tooltip 延遲2s消失
// 區別於axisPointer，此次是十字線的橫向線
axisPointer: {
type: "cross", // 十字線，表示啟用兩個正交的軸，還可為'line'，'none'，'shadow'
axis: 'y', // 可以定義軸 'x','y','radius','angle'，一般是x軸
label: {
show: false
},
crossStyle: {
// type: "solid",
color: '#ff0000',
}
},
},
markline標記線不准確問題
markLine.precision設置數值精度
series: [
{
name: 'MA5',
type: 'line',
data: calculateMA(5),
//... 其他配置
markLine: {
symbol: ['none', 'none'],
precision: 4, // 標記線的值精度，表示小數點
data: [
// 0值標記線
{
yAxis: 0,
name: `0.00%`,
lineStyle: {
color: '#000000',
width: 1
},
label: {
formatter: `0.00%`,
position: "insideStartTop",
offset: [-8, 0],
},
},
// 最小值標記線
{
// type: "min",
yAxis: minValue,
// name: `${Number(minValue * 100).toFixed(2)}%`,
lineStyle: {
type: "solid",
color: '#ff0000',
width: 1,
},
label: {
formatter: `${Number(minValue * 100).toFixed(2)}%`,
position: "insideEndBottom",
offset: [8, 0],
},
},
// 最大值標記線
{
// type: "max",
yAxis: maxValue,
// name: `${Number(maxValue * 100).toFixed(2)}%`,
lineStyle: {
type: "solid",
color: '#ff0000',
width: 1,
},
label: {
formatter: `${Number(maxValue * 100).toFixed(2)}%`,
position: "insideEndTop",
offset: [8, 0],
},
}
]
}
},
]
參考博客：
https://blog.csdn.net/qq_40287461/article/details/86740922
tooltip的顯示和隱藏事件
tooltip的簡單配置
注意：triggerOn觸發事件有 mousemove click，沒有 touch 事件選項
在源碼中發現處理事件的為zrender庫，閱讀zrender源碼的event.ts，handle.ts，handleProxy后發現，在echarts中把touchstart事件分發為了mouseover，touchmove事件分發為touchmove，touchend事件分發為mouseup事件。
同時對於手動使用showTip來觸發tooltip顯示，需使用被echarts代理的event對象中的zrX和zrY（分別對應鼠標、手指位置對應echarts canvas的位置）來計算當前的x軸index。
echarts文檔 - ECharts事件和行為： https://echarts.apache.org/zh/tutorial.html#ECharts 中的事件和行為
tooltip: {
trigger: "axis",
triggerOn: "mousemove|click", // tooltip觸發事件
hideDelay: 2000, // tooltip 延遲2s消失
// ...
}
移動端touch事件結束時，隱藏tooltip和十字線
document.getElementById("chart").addEventListener("touchend", () => {
console.log("touchend")
// 即時隱藏tooltip
myChart.dispatchAction({
type: 'hideTip',
});
// 即時隱藏十字線
myChart.dispatchAction({
type: 'updateAxisPointer',
currTrigger: 'leave'
});
})