當(dāng)數(shù)值過(guò)多時(shí)，顯示所有柱條看著會(huì)很凌亂且文字會(huì)擠在一起，于是就需要監(jiān)聽(tīng)datazoom的滑動(dòng)，拿到對(duì)應(yīng)的閾值后做出相應(yīng)的配置。
“dataZoom” 事件通常用于響應(yīng)用戶對(duì)圖表進(jìn)行數(shù)據(jù)縮放的操作。
這里是datazoom官網(wǎng)api地址：點(diǎn)擊跳轉(zhuǎn)至官網(wǎng)文檔的datazoom介紹
初始時(shí)狀態(tài)如下圖：
滑動(dòng)x軸至設(shè)定范圍內(nèi)時(shí)：
監(jiān)聽(tīng)datazoom
myChart為圖表元素，在 “dataZoom” 事件上綁定了一個(gè)回調(diào)函數(shù)，當(dāng)用戶在圖表上使用數(shù)據(jù)縮放時(shí)，這個(gè)回調(diào)函數(shù)會(huì)被觸發(fā)。
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.on("dataZoom", function (params) {
})
params值
這里可以獲取到當(dāng)前datazoom的開(kāi)始位置(start)和結(jié)束位置(end)
獲取圖表的option
myChart.getOption() 和 myChart.setOption(newoption) 是 Echarts 中常用的兩個(gè)方法，它們分別用于獲取當(dāng)前圖表的配置選項(xiàng)和設(shè)置新的配置選項(xiàng)。
myChart.getOption():
作用：該方法用于獲取當(dāng)前圖表的配置選項(xiàng)對(duì)象?？梢栽谛枰@取當(dāng)前配置選項(xiàng)時(shí)調(diào)用該方法，例如在事件回調(diào)中根據(jù)當(dāng)前配置進(jìn)行進(jìn)一步處理或修改。
返回值：返回一個(gè)包含當(dāng)前圖表配置的 JavaScript 對(duì)象，可以包含圖表類型、數(shù)據(jù)系列、樣式設(shè)置等信息。
以下為myChart.getOption()返回的值，若有其他需要控制的，都可以舉一反三，根據(jù)這些值的位置對(duì)其進(jìn)行設(shè)置，不局限于本文的控制柱條的寬度以及數(shù)值的顯示隱藏。
myChart.setOption(newoption):
作用：該方法用于設(shè)置新的配置選項(xiàng)對(duì)象，即更新圖表的顯示內(nèi)容和樣式。通過(guò)設(shè)置新的配置選項(xiàng)，可以動(dòng)態(tài)改變圖表的展示效果，包括數(shù)據(jù)、樣式、主題等。
參數(shù)：接受一個(gè)新的配置選項(xiàng)對(duì)象作為參數(shù)，用于更新圖表的配置。 返回值：并不返回特定的數(shù)值，但會(huì)觸發(fā)圖表的重新渲染以反映新的配置選項(xiàng)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-850438.html
控制柱條寬度及數(shù)值的顯示與隱藏
這里通過(guò)循環(huán)圖表的option配置中的series數(shù)組，設(shè)置其數(shù)值文本是否顯示，以及柱條寬度
series.label.show 和 series.barWidth文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-850438.html
// 在用戶使用數(shù)據(jù)縮放時(shí)觸發(fā)該事件
myChart.on('dataZoom', function (params) {
// 輸出參數(shù)信息到控制臺(tái)
console.log('params', params);
// 獲取當(dāng)前圖表的配置選項(xiàng)
var newoption = myChart.getOption();
// 獲取數(shù)據(jù)縮放的起始位置和結(jié)束位置
var dataZoomStart = params.start;
var dataZoomEnd = params.end;
// 根據(jù)數(shù)據(jù)縮放的范圍對(duì)圖表進(jìn)行調(diào)整
if (dataZoomEnd - dataZoomStart > 80) {
// 如果數(shù)據(jù)縮放范圍大于80，設(shè)置柱狀圖的標(biāo)簽不顯示并設(shè)置柱狀寬度為5
newoption.series.forEach(function (series) {
series.label.show = false;//隱藏頂部數(shù)值
series.barWidth = 5;//柱條寬度為5
});
} else {
// 如果數(shù)據(jù)縮放范圍小于等于80，設(shè)置柱狀圖的標(biāo)簽顯示并設(shè)置柱狀寬度為'auto'
newoption.series.forEach(function (series) {
series.label.show = true;//顯示頂部數(shù)值
series.barWidth = 'auto';//柱條寬度自適應(yīng)
});
}
// 根據(jù)調(diào)整后的配置選項(xiàng)更新圖表
myChart.setOption(newoption);
});
// 設(shè)置圖表的初始配置選項(xiàng)
option && myChart.setOption(option);
全部代碼(echarts示例可直接粘貼使用)
let colors = [
{
color: {
botom: "rgba(253, 234, 60,0)",
top: "rgba(253, 234, 60,1)",
},
},
{
color: {
botom: "rgba(252, 140, 27,0)",
top: "rgba(252, 140, 27,1)",
},
},
{
color: {
botom: "rgba(100, 218, 217,0)",
top: "rgba(100, 218, 217,1)",
},
},
];
var shadowColors = [];
colors.forEach((item) => {
var colorobj = {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: item.color.botom, // 0% 處的顏色
},
{
offset: 1,
color: item.color.top, // 100% 處的顏色
},
],
};
shadowColors.push(colorobj);
});
console.log('shadowColors',shadowColors);
option = {
color: shadowColors,
dataZoom: [
{
type: "slider", // 設(shè)置為滑動(dòng)條
show: true, // 顯示滑動(dòng)條
start: 0, // 滑動(dòng)條起始位置
end: 40, // 滑動(dòng)條結(jié)束位置
bottom: 10, // 滑動(dòng)條距離底部的距離
textStyle: {
color: "#fff",
},
backgroundColor: "#acb7c3", // 設(shè)置背景顏色
handleStyle: {
color: "#2a82e4", // 設(shè)置左右兩邊的可滑動(dòng)收縮豎線顏色
},
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow", // 顯示陰影指示器
},
formatter: function (indexs) {
var data = [];
indexs.forEach((item) => {
data.push({
seriesName: item.seriesName,
value: item.value,
});
});
var content = "";
data.forEach((item) => {
content += item.seriesName + ": " + item.value + "<br>";
});
return content;
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
type: 'bar',
name:'name1',
barWidth: 10,
barGap: 1, //柱子之間間距
label: {
show: true,
position: "top",
color: "white",
rotate: 60,
textStyle: {
color: colors[0].color.top
},
},
},
{
data: [110, 250, 110, 80, 90, 120, 160,110, 250, 110, 80, 90, 120, 160,110, 250, 110, 80, 90, 120, 160],
type: 'bar',
name:'name2',
barWidth: 10,
barGap: 1, //柱子之間間距
label: {
show: true,
position: "top",
color: "white",
rotate: 60,
textStyle: {
color: colors[1].color.top
},
},
},
{
data: [20, 220, 140, 70, 70, 100, 30,20, 220, 140, 70, 70, 100, 30,20, 220, 140, 70, 70, 100, 30],
type: 'bar',
name:'name3',
barWidth: 10,
barGap: 1, //柱子之間間距
label: {
show: true,
position: "top",
color: "white",
rotate: 60,
textStyle: {
color: colors[2].color.top
},
},
},
]
};
myChart.on("dataZoom", function (params) {
var newoption = myChart.getOption();
var dataZoomStart = params.start;
var dataZoomEnd = params.end;
if (dataZoomEnd - dataZoomStart > 70) {
newoption.series.forEach(function (series) {
series.label.show = false;
});
}else {
newoption.series.forEach(function (series) {
series.label.show = true;
});
}
myChart.setOption(newoption);
})
到了這里，關(guān)于echarts圖表動(dòng)態(tài)監(jiān)聽(tīng)dataZoom滑動(dòng)，控制柱條的寬度以及數(shù)值的顯示隱藏的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
