これはルーチンのないフロントエンドブロガーです。彼はあらゆる種類のフロントエンド指向の操作に熱心です。彼は思いついたときにどこでもよく書きます。テクノロジーとフロントエンド効果に興味がある場合は、メッセージを残してください〜ブロガーそれを見た後は皆のためにピットを踏みます The~
ホームページ:オリバー・ユンのホームページ
モットー: 転んでも立ち上がる~
I.はじめに
この記事は実際の大画面需要から来ています. かなり寄り道したので、意図的に記録しました. 主な目的は、 echarts のスタック ヒストグラムのデフォルト選択とタイミング切り替え選択効果を実現することです。
2. レンダリング
一般的な効果図は次のとおりです。
3. 効果の実感
切り替えの中核は、echarts 公式 Web サイト (公式 Web サイトのアドレスは次のとおりです: https://echarts.apache.org/zh/api.html#action.highlight )が提供する APIdispatchActionメソッド、このメソッドには 2 つのパラメータがあります。 type item (と ) 、これら 2 つのパラメータがここで使用されます。これら 2 つのパラメータの説明は次のとおりです。highlightshowTip
3.1 ハイライト
ハイライトの主な機能はグラフをハイライトすることです。つまり、ヒストグラムのこの設定により、ヒストグラムをハイライト状態にすることができます。
// 如果要高亮系列：
dispatchAction({
type: 'highlight',
// 用 index 或 id 或 name 来指定系列。
// 可以使用数组指定多个系列。
seriesIndex?: number | number[],
seriesId?: string | string[],
seriesName?: string | string[],
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex?: number | number[],
// 可选，数据项名称，在有 dataIndex 的时候忽略
name?: string | string[],
});
特定のハイライト効果、効果:
ここの白い背景のバーはハイライト効果です。
3.2 ヒントの表示
このパラメータの機能は、上の凡例の小さな白いボックスであるヒントをアクティブに表示することです。
dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex?: number,
// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex?: number,
// 可选，数据项名称，在有 dataIndex 的时候忽略
name?: string,,
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
position: number[] | string | Function,
})
このコードを実行すると、画像のヒント表示を指定できます。
3.3 実装コード
ヒントをハイライトして表示する API を知っておくと便利です
// 取消之前高亮的图形
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,
});
ここで、強調表示を実行するときに結果が期待どおりであることを確認するために、安全のため、強調表示を実行する前に前の強調表示をキャンセルする必要があることに注意してください。
3.4 コード全体
以下は完全なコードです。具体的な効果は、この記事の第 2 章の効果です。
<!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. まとめ
echarts の機能は非常に強力で、この記事でのデフォルトの選択とタイミングの切り替えは主にdispatchAction APIのハイライトとshowTipを借用しており、ハイライト
でグラフィックのハイライトを指定し、 **showTipでプロンプトウィンドウを表示し、最後にタイミングを実行しています。 setInterval スイッチングを使用すると、この要件が満たされます (もちろん、setInterval には特定の問題があり、再帰的な setTimeout によって解決できます)。