Project scenario:
When displaying multiple data charts, sometimes it is necessary to display some content in the legend, for example, the official way: when the mouse hovers, the data of the point is displayed
Problem Description
但是，官方提供的样式有时不适用所有的开发场景
My project needs to realize that when the mouse hovers over a certain point, only the data of the line is displayed, as well as some data not shown in the chart. Referring to the prototype diagram, in addition to the time and success rate represented by the horizontal axis and the vertical axis, I hope to display two additional data, and the small dots should be the same color as the line (there is ambiguity in the prototype diagram)
solution:
formatter of tooltip : used to format legend text, supports two forms of string template and callback function.
Here it is mainly implemented in the form of a callback function. Please refer to the ECharts official website for specific writing methods.
myChart.setOption({
tooltip: {
trigger: 'item', // axis显示该列下所有坐标轴对应数据，item只显示该点数据
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
var res = `
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color: ${
params.color}'
>●</div>
<span>${
'时间：2023-03-01 16:57:07'}</span>
</div>
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color: ${
params.color}'
>●</div>
<span>${
'成功率：10.00%'}</span>
</div>
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color: ${
params.color}'
>●</div>
<span>${
'订单总数量：0'}</span>
</div>
<div>
<div
style='display: inline-block;
width: 10px;
height: 20px;
color: ${
params.color}'
>●</div>
<span>${
'订单成功数量：0'}</span>
</div>
`
return params.name + res
}
},
legend: {
data: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff'] // 顶部图例的名字
},
grid: {
// 图例的位置
top: 80,
left: '4.2%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
splitLine: {
show: false },
boundaryGap: false,
data: [67,43,78,12,34,32], // X轴
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 1
}
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value} %'
},
name: '成功率',
// 此处是固定Y轴的刻度以及刻度间距，没有的话则会根据数据自行展示
max: 100, // 设置最大值
min: 0, // 设置最小值
interval: 10 // 设置刻度间距
}],
series: [10,20,30,40,50,60] // Y轴
})
The renderings are as follows
