Echarts:10-5-2:柱狀圖(座標軸刻度與標籤對齊)

她最近有點懶...發表於2020-10-05

10-5-2 柱狀圖(座標軸刻度與標籤對齊)

option = {
    title: {
        text: '柱狀圖(座標軸刻度與標籤對齊)'
    },
    color: ['#02f3f2'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 座標軸指示器,座標軸觸發有效
            type: 'shadow'        // 預設為直線,可選為:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'],
            axisTick: {//座標軸刻度與標籤對齊
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '數值',//單個類別直接在這定義即可,相當於legend: {data: ['數值'] },
            type: 'bar',
            barWidth: '50%',
            data: [120, 142, 220, 334, 490, 430, 320]
        }
    ]
};

相關文章