Echarts 柱狀圖隱藏顯示刻度之類的
option = {
? tooltip: {
? ? trigger: 'axis', // 提示框觸發(fā)類型,鼠標(biāo)移動(dòng)到軸上時(shí)觸發(fā)顯示提示框
? ? axisPointer: {
? ? ? type: 'shadow' // 坐標(biāo)軸指示器類型為陰影指示器
? ? }
? },
? legend: {
? ? data: ['Income'] // 圖例(圖例是用來解釋圖表的符號(hào)和顏色的)數(shù)據(jù),這里只有一個(gè)名稱為 'Income' 的圖例
? },
? grid: {
? ? left: '3%', // 圖表距離容器左邊的距離
? ? right: '4%', // 圖表距離容器右邊的距離
? ? bottom: '3%', // 圖表距離容器底部的距離
? ? containLabel: true // grid 區(qū)域是否包含坐標(biāo)軸的刻度標(biāo)簽,默認(rèn)為 false,這里設(shè)置為 true 表示包含
? },
? xAxis: [
? ? {
? ? ? type: 'value', // x 軸為數(shù)值軸
? ? ? show:false, // 是否顯示 x 軸
? ? }
? ],
? yAxis: [
? ? {
? ? ? type: 'category', // y 軸為類目軸
? ? ? axisTick: {
? ? ? ? show: false // 是否顯示刻度線
? ? ? },
? ? ? axisLabel:{
? ? ? ? show:false // 是否顯示刻度標(biāo)簽
? ? ? },
? ? ? axisLine:{show:false}, // 是否顯示坐標(biāo)軸軸線
? ? ? splitLine:{show:false}? // 是否顯示分割線
? ? }
? ],
? series: [
? ? {
? ? ? name: 'Income', // 數(shù)據(jù)系列的名稱
? ? ? type: 'bar', // 柱狀圖
? ? ? stack: 'Total', // 同類別的數(shù)據(jù)堆疊在一起
? ? ? barWidth: 20, // 柱狀圖的寬度
? ? ? label: {
? ? ? ? show: true, // 是否顯示標(biāo)簽
? ? ? ? position:'right', // 標(biāo)簽位置在柱形的右側(cè)
? ? ? ? formatter: '{c}%' // 標(biāo)簽的內(nèi)容格式,這里顯示數(shù)據(jù)值并添加百分號(hào)
? ? ? },
? ? ? emphasis: {
? ? ? ? focus: 'series' // 高亮顯示系列
? ? ? },
? ? ? data: [8, 9, 12, 15, 18, 20, 22] // 數(shù)據(jù)已轉(zhuǎn)換為百分比
? ? },
? ??
? ]
};
