C'est un blogueur front-end sans routines. Il aime toutes sortes d'opérations orientées front-end. Il écrit souvent où il pense. Si vous êtes intéressé par la technologie et les effets front-end, vous pouvez laisser un message ~ Le blogueur marchera sur la fosse pour tout le monde après l'
avoir vu
.
Introduction
Cet article vient de la demande réelle du grand écran. Depuis que j'ai fait un détour pendant longtemps, je l'ai délibérément enregistré. Le but principal est de réaliser les effets de sélection par défaut et de sélection de commutation temporelle de l'histogramme empilé dans les echarts ;
2. Rendu
Le diagramme d'effet général est le suivant :
3. Réalisation de l'effet
Le cœur de la commutation réside dans dispatchActionla (l'adresse du site officiel est la suivante : https://echarts.apache.org/zh/api.html#action.highlight ), cette méthode a deux paramètres dans le type item, qui sont highlightet showTip, ces deux paramètres sont utilisés ici. La description de ces deux paramètres est la suivante :
3.1 point culminant
La fonction principale de la surbrillance est de mettre en surbrillance le graphique , en d'autres termes, ce paramètre dans l'histogramme peut mettre l'histogramme en surbrillance
// 如果要高亮系列：
dispatchAction({
type: 'highlight',
// 用 index 或 id 或 name 来指定系列。
// 可以使用数组指定多个系列。
seriesIndex?: number | number[],
seriesId?: string | string[],
seriesName?: string | string[],
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex?: number | number[],
// 可选，数据项名称，在有 dataIndex 的时候忽略
name?: string | string[],
});
Effet de surbrillance spécifique, effet :
la barre d'arrière-plan blanche est ici l'effet de surbrillance ;
3.2 afficherAstuce
La fonction de ce paramètre est d'afficher activement les conseils, qui est la petite case blanche dans la légende ci-dessus
dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex?: number,
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex?: number,
// 可选，数据项名称，在有 dataIndex 的时候忽略
name?: string,,
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
position: number[] | string | Function,
})
Après avoir exécuté ce code, vous pouvez spécifier les conseils d'affichage de l'image ;
3.3 Code d'implémentation
Connaître l'API pour mettre en évidence et afficher des astuces, alors ce sera pratique
// 取消之前高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: option.yAxis.data.length,
dataIndex: app.currentIndex,
});
// 计算下一个高亮的位置
app.currentIndex =
app.currentIndex - 1 > -1
? app.currentIndex - 1
: option.yAxis.data.length;
// 执行高亮
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
// 执行
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
Il convient de noter ici qu'avant d'effectuer une surbrillance, il est nécessaire d'annuler la surbrillance précédente par souci de sécurité , afin de s'assurer que les résultats sont conformes aux attentes lors de la réalisation de la surbrillance ;
3.4 Code global
Ce qui suit est le code complet, l'effet spécifique est l'effet du deuxième chapitre de cet article ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.main {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #333333;
}
</style>
</head>
<body>
<div class="main" id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script>
<script>
let chart = echarts.init(document.getElementById("app"));
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
// Use axis to trigger tooltip
type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
},
},
legend: {
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
series: [
{
name: "Direct",
type: "bar",
stack: "total",
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [320, 302, 301, 334, 390, 330, 320],
},
{
name: "Mail Ad",
type: "bar",
stack: "total",
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "Affiliate Ad",
type: "bar",
stack: "total",
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [220, 182, 191, 234, 290, 330, 310],
},
],
};
chart.setOption(option);
var app = {
currentIndex: option.yAxis.data.length,
};
setInterval(() => {
// 取消之前高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: option.yAxis.data.length,
dataIndex: app.currentIndex,
});
app.currentIndex =
app.currentIndex - 1 > -1
? app.currentIndex - 1
: option.yAxis.data.length;
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex,
});
}, 1000);
</script>
</body>
</html>
4. Résumé
La fonction des echarts est très puissante. La sélection par défaut et le changement de synchronisation dans cet article empruntent principalement le surlignage et le showTip dans l' API dispatchAction ; spécifiez le surlignage graphique via highlight , puis affichez la fenêtre d'invite via **showTip , et enfin exécutez le timing via setInterval Switching complète cette exigence (bien sûr, setInterval a certains problèmes, qui peuvent être résolus par setTimeout récursif);