ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用)
ECharts柱狀圖過(guò)多添加滾動(dòng)條的步驟(親測(cè)可用)
echarts引用js需較新版本,否則會(huì)不顯示
附ECharts官網(wǎng)地址
添加echarts柱狀圖滾動(dòng)條,步驟如下:
首先添加js用來(lái)判斷當(dāng)前視圖要顯示幾個(gè)及是否顯示滾動(dòng)條:
var _DEPTNUMER = []; //存入所有科室
var showEchart = false;
var namenum = 0;
if (_DEPTNUMER.length > 0) {
namenum = Math.floor(100 / (_DEPTNUMER.length / 3)); //這個(gè)3可以順便調(diào)整是用來(lái)判斷當(dāng)前視圖要顯示幾個(gè)
if (_DEPTNUMER.length > 3) { //3也可以調(diào)整用來(lái)判斷是否顯示滾動(dòng)條
showEchart = true;
} else {
showEchart = false;
}
}添加echarts滾動(dòng)條:
dataZoom: [
{
type: 'slider',
realtime: true,
start: 0,
end: namenum, // 數(shù)據(jù)窗口范圍的結(jié)束百分比。范圍是:0 ~ 100。
height: 5, //組件高度
left: 5, //左邊的距離
right: 5, //右邊的距離
bottom: 10, //下邊的距離
show: showEchart, // 是否展示
fillerColor: "rgba(17, 100, 210, 0.42)", // 滾動(dòng)條顏色
borderColor: "rgba(17, 100, 210, 0.12)",
handleSize: 0, //兩邊手柄尺寸
showDetail: false, //拖拽時(shí)是否展示滾動(dòng)條兩側(cè)的文字
zoomLock: true, //是否只平移不縮放
moveOnMouseMove: false, //鼠標(biāo)移動(dòng)能觸發(fā)數(shù)據(jù)窗口平移
//zoomOnMouseWheel: false, //鼠標(biāo)移動(dòng)能觸發(fā)數(shù)據(jù)窗口縮放
//下面是自己發(fā)現(xiàn)的一個(gè)問(wèn)題,當(dāng)點(diǎn)擊滾動(dòng)條橫向拖拽拉長(zhǎng)滾動(dòng)條時(shí),會(huì)出現(xiàn)文字重疊,導(dǎo)致效果很不好,以此用下面四個(gè)屬性進(jìn)行設(shè)置,當(dāng)拖拽時(shí),始終保持顯示六個(gè)柱狀圖,可結(jié)合自己情況進(jìn)行設(shè)置。添加這個(gè)屬性前后的對(duì)比見(jiàn)**圖二**
startValue: 0, // 從頭開(kāi)始。
endValue: 6, // 最多六個(gè)
minValueSpan: 6, // 放大到最少幾個(gè)
maxValueSpan: 6, // 縮小到最多幾個(gè)
},
{
type: "inside", // 支持內(nèi)部鼠標(biāo)滾動(dòng)平移
start: 0,
end: namenum,
zoomOnMouseWheel: false, // 關(guān)閉滾輪縮放
moveOnMouseWheel: true, // 開(kāi)啟滾輪平移
moveOnMouseMove: true // 鼠標(biāo)移動(dòng)能觸發(fā)數(shù)據(jù)窗口平移
}
]如下圖:

圖二更改前(鼠標(biāo)放到滾動(dòng)條上面左右拖拽拉長(zhǎng)時(shí)):

更改后:

擴(kuò)展:
echarts使用getZr()事件獲取柱狀圖當(dāng)前點(diǎn)擊列的數(shù)據(jù)
var t = document.getElementById("cardChart");
t.style.width = window.offsetWidth + "px";
var cardChart = echarts.init(t),
options = {
color: ['#3398DB'],
title: {
left: "right",
//text: new Date().getFullYear() + "年數(shù)據(jù)",
textStyle: {
color: "#2c2c2c",
fontSize: 14,
fontWeight: 500
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線,可選為:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: "category",
data: dataYearCountName,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0, //強(qiáng)制文字產(chǎn)生間隔
rotate: 45, //文字逆時(shí)針旋轉(zhuǎn)45°
textStyle: { //文字樣式
color: "black",
fontSize: 14,
fontFamily: 'Microsoft YaHei'
}
}
}],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "例數(shù)",
type: "bar",
barWidth: "60%",
data: dataYearCountNum
}
]
};
//-----------------從這里開(kāi)始 -----------------
//cardChart 柱狀圖名稱
cardChart.setOption(options);
cardChart.off('click'); //防止觸發(fā)兩次點(diǎn)擊事件
cardChart.getZr().on('click', (params) => {
let pointInPixel = [params.offsetX, params.offsetY];
if (cardChart.containPixel('grid', pointInPixel)) {
let pointInGrid = cardChart.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0]; //索引
let handleIndex = Number(xIndex);
let seriesObj = cardChart.getOption(); //圖表object對(duì)象
var op = cardChart.getOption();
//獲得圖表中點(diǎn)擊的列
var month = op.xAxis[0].data[handleIndex]; //獲取點(diǎn)擊的列名
console.log(month);
console.log(handleIndex, seriesObj);
};
});到此這篇關(guān)于ECharts柱狀圖過(guò)多添加滾動(dòng)條(親測(cè)可用)的文章就介紹到這了,更多相關(guān)ECharts柱狀圖滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript獲取當(dāng)前url根目錄(路徑)
本文主要介紹JavaScript獲取當(dāng)前url根目錄的方法,比較實(shí)用,需要的朋友可以參考一下。2016-06-06
JavaScript Typescript基礎(chǔ)使用教程
TypeScript是Microsoft(微軟)開(kāi)發(fā)的一種開(kāi)源編程語(yǔ)言,它充分利用了JavaScript原有的對(duì)象模型,并在此基礎(chǔ)上進(jìn)行了擴(kuò)充,TypeScript設(shè)計(jì)目標(biāo)是開(kāi)發(fā)大型應(yīng)用,它可以編譯成純JavaScript,編譯出來(lái)的JavaScript可以運(yùn)行在任何一種JS運(yùn)行環(huán)境中2022-12-12
JavaScript中forEach的錯(cuò)誤用法匯總
js中foreach是用于遍歷數(shù)組的方法,將遍歷到的元素傳遞給回調(diào)函數(shù),遍歷的數(shù)組不能是空的要有值,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach的錯(cuò)誤用法,需要的朋友可以參考下2022-06-06
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能(函數(shù)防抖)
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能(函數(shù)防抖),需要的朋友可以參考下2019-09-09
sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)
這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報(bào)錯(cuò)的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-02-02
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName,需要的朋友可以參考一下2013-03-03
JavaScript中null與undefined的區(qū)別總結(jié)
在JavaScript中,null和undefined是兩個(gè)特殊的值,這篇文章主要介紹了JavaScript中null與undefined區(qū)別的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-09-09

