ECharts图表设置x轴和y轴显示数值

ECharts图表设置x轴和y轴显示数值

未设置的效果：

想要达到的效果：

重要代码：

xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示
// 设置y轴显示的最大值和最小值
yAxis.min = 0,
yAxis.max: function (value) {
    return value.max + 50;
},
yAxis.splitNumber: 3,

完整代码：

option = {
    color: ['#5983FE'],  // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
    legend: {
        icon: 'circle',
        itemHeight: 6,  // 改变圆圈大小
        itemWidth: 10,//图标宽
        itemHeight: 6,//图标高
        orient: 'horizontal',
        left: '7%',
        textStyle: {
            fontSize: 12,
            color: '#666'
        }
    },
    grid: {
        top: 30,
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,  // 是否显示刻度标签
    },
    tooltip: {
        trigger: 'axis',
        position: this.toolTipPos,
        formatter: function (param) {
            var usage = param[0].value === "" ? "-- " : Math.abs(param[0].value);
            var html = '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + param[0].color + ';"></span>';
            html += param[0].axisValue + " " + param[0].seriesName + '：' + usage + 'kWh';
            return html;
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false, // 不留白，从原点开始
        axisLine: {       // 坐标轴 轴线
            show: true,  // 是否显示
            symbol: ['none', 'arrow'],  // 是否显示轴线箭头
            symbolSize: [6, 6], // 箭头大小
            symbolOffset: [0, 7],  // 箭头位置
            lineStyle: {
                color: '#ccc',
                width: 1,
                type: 'solid'
            }
        },
        axisTick: {    // 坐标轴刻度
            show: true,  // 是否显示
            inside: true,  // 是否朝内
            length: 3,     // 长度
            lineStyle: {   // 默认取轴线的样式
                color: '#ccc',
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {    // 坐标轴标签
            show: true,  // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 5, // 刻度标签与轴线之间的距离
            color: '#999',  // 默认取轴线的颜色 
            interval: 5
        },
        data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00']
    },
    yAxis: {
        min: 0,
        max: function (value) {
            return value.max + 50;
        },
        splitNumber: 3,
        axisLine: {    // 坐标轴 轴线
            show: true,  // 是否显示
            symbol: ['none', 'arrow'],  // 是否显示轴线箭头
            symbolSize: [6, 6],  // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            lineStyle: {
                color: '#ccc',
                width: 1,
                type: 'solid'
            }
        },
        axisTick: {      // 坐标轴的刻度
            show: true,    // 是否显示
            inside: true,  // 是否朝内
            length: 3,      // 长度
            lineStyle: {
                color: '#ccc',  // 默认取轴线的颜色
                width: 1,
                type: 'solid'
            }
        },
        axisLabel: {      // 坐标轴的标签
            show: true,    // 是否显示
            color: '#999',  // 默认轴线的颜色
        },
        splitLine: {    // gird 区域中的分割线
            show: true,   // 是否显示
            lineStyle: {
                color: '#E5E5E5',
                width: 0.7,
                type: 'dashed'   // dashed
            }
        },

    },
    series: [
        {
            name: '用电量',
            data: [820, '', 301, 434, 290, 330, 320, 111, 345, 345, 234, 678, 456, 678],
            type: 'line',
            symbol: 'true',  // 设置小圆点消失
            smooth: 0,
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#5983FE'
                    }
                }
            },
        }
    ],
}