여기에 디렉토리 제목을 쓰세요
툴팁이란 무엇입니까?
도구 설명은 프롬프트 상자 구성 요소로, 실제로 차트 위로 마우스를 이동한 후 표시되는 유사한 데이터 포인트 세부 정보에 대한 설명입니다.
1단계 디렉터리에 있는 옵션 구성 항목에서 툴팁은 시리즈, xAxis, yAxis와 동일한 수준에 있습니다.
포맷터를 구성하는 방법은 무엇입니까?
공식 문서: https://echarts.apache.org/zh/option.html#tooltip.formatter
포맷터에는 두 가지 구성 방법이 있습니다: ① 문자열 템플릿 ② 콜백 함수
①문자열 템플릿
formatter: '{b0}: {c0}<br />{b1}: {c1}'
{a}, {b}，{c}，{d}，{e}시리즈 이름, 데이터 이름, 데이터 값 등을 각각 나타내는 템플릿 변수가 있습니다. 트리거가 '축'인 경우 여러 개의 데이터 계열이 있게 되는데, 이때 계열의 인덱스는 {a0}, {a1}, {a2} 다음에 인덱스로 표시할 수 있습니다. 서로 다른 차트 유형에서 {a}, {b}, {c}, {d}는 서로 다른 의미를 갖습니다.
변수 {a}, {b}, {c}, {d}는 다양한 차트 유형의 데이터를 나타내며 그 의미는 다음과 같습니다.
| 차트 종류 | 의미 |
|---|---|
| 라인(영역) 차트, 컬럼(막대) 차트, K-라인 차트 | {a}(시리즈 이름), {b}(범주 값), {c}(값), {d}(없음) |
| 산점도(버블) 도표 | {a}(시리즈 이름), {b}(데이터 이름), {c}(숫자 배열), {d}(없음) |
| 지도 | {a}(시리즈 이름), {b}(지역 이름), {c}(결합된 값), {d}(없음) |
| 원형 차트, 대시보드, 깔때기형 차트 | {a}(시리즈 이름), {b}(데이터 항목 이름), {c}(값), {d}(백분율) |
요약: 문자열 템플릿의 자유도는 상대적으로 낮으며,
각각 시리즈 이름을 나타내는 {a}, {b}, {c}, {d}, {e}와 같은 확립된 여러 템플릿 변수를 기반으로 해야 합니다. , 데이터 이름, 데이터 값 등 스플라이싱을 사용하여 표시할 경우 표시된 차트에 표시된 데이터만 표시할 수 있으며, 가로 및 세로 좌표를 제외한 다른 숨겨진 데이터 필드를 표시하는 경우 문자열 템플릿은 무력합니다. .
문자열 템플릿 예:
효과:
코드:
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis',
formatter: "类目值：{b0}<br/> {a0}:{c0}封 <br/>{a1}:{c1}个 <br/>{a2}:{c2}条"
},
legend: {
data: ['Email', 'Direct', 'Search Engine']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
②콜백 기능
콜백 함수 형식:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
콜백 함수의 상황은 조금 더 복잡하므로, 예제에서 바로 시작하여 예제의 설명을 주목해 보겠습니다.
콜백 함수 예:
let res = [ // 接口数据返回格式
{
"num":1,
"supplyTime": 34,
"supplySort": "1",
"podCode": "X0005",
"startTime": "2023-01-14 05:54:44",
},
{
"num":2,
"supplyTime": 28,
"supplySort": "1",
"podCode": "X005",
"startTime": "2023-01-14 09:54:44",
},
{
"num":3,
"supplyTime": 17,
"supplySort": "1",
"podCode": "X000",
"startTime": "2023-01-14 08:54:44",
},
{
"num":4,
"supplyTime": 2,
"supplySort": "1",
"podCode": "X035",
"startTime": "2023-01-14 09:54:44",
},
{
"num":5,
"supplyTime": 26,
"supplySort": "1",
"podCode": "0035",
"startTime": "2023-01-14 19:54:44",
},
]
option = {
tooltip: {
formatter: (params) => {
// 打印确认params是对象还是数组
console.log(params)
// 对象：取鼠标悬浮当前项索引params.dataIndex
// 数组：取鼠标悬浮当前项索引params[0].dataIndex
let index = params.dataIndex
let obj = res[index] // 通过索引取当前项完整的接口返回值
let str = `出发顺序：${
obj.supplySort}<br/>
仓位码：${
obj.podCode}<br/>
任务生成时间：${
obj.startTime}<br/>`
return str
}
},
xAxis: {
type: 'category',
data: res.map(i => {
return i.num})
},
yAxis: {
type: 'value'
},
series: [
{
data: res.map(i => {
return i.supplyTime}),
type: 'bar',
}
]
}
위의 첫 번째 매개변수 params는 포맷터에 필요한 데이터 세트로, 마우스를 올렸을 때 현재 열의 일부 데이터입니다. 어떤 것이 사용될 수 있는지 확인하기 위해 이를 인쇄합니다. 인쇄를 보면 알 수 있듯이 params만 가로 및 세로 축의 값
, 색상 및 기타 데이터는 물론 표시하려는 시작 순서, 위치 코드 및 기타 데이터도 없습니다. 그러나 현재 항목의 인덱스를 얻을 수 있으며 dataIndex, 인덱스 params.dataIndex와 인터페이스 반환 값 res를 함께 사용하면 현재 막대의 전체 객체, 즉 를 직접 얻을 수 있습니다 res[params.dataIndex]. 여기서 주목해야 할 점은 인쇄된 매개변수가 객체인지 배열인지 먼저 확인해야 한다는 것입니다. 위의 예에서는 객체이고 배열인 경우 인덱스는 입니다 params[0].dataIndex.
최종적으로 분석해보면 어떤 방법을 사용하더라도 formatter의 반환값은 결국 문자열이므로 우리가 해야 할 일은 string splicing이다. 속성을 호출하는 방법으로 원하는 것을 얻을 수 있으며 값을 더 읽기 쉽습니다.