清新曲线echarts category配置项内容和展示

      
// markLine可用空格将label推向末尾
option = {
    grid:{
        left: '10%',
        right: '3%',
        top: '10%',
        bottom: '10%'
    },
    tooltip:{
        show:true,
        trigger: 'axis',

        axisPointer:{
            type:'line',
            lineStyle:{
                color:'#00aaff',
                width:1,
                type:'solid',
            },
            z:-100
        },
        formatter: function (params) {
            console.log(params)
            var res='<div><p>时间：'+params[0].name+'</p></div>'
            for(var i=0;i<params.length;i++){
                res+='<p>'+params[i].seriesName+'：'+params[i].data+'kW.h</p>'
            }
            return res;
        }
    },
    xAxis: {
        boundaryGap: false,
        type: 'category',
        axisTick:{
            show:false
        },

        axisLine: {
            lineStyle: {
                type: 'solid',
                color: '#808080',//左边线的颜色
                width:'1'//坐标线的宽度
            }
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel:{
            interval:0
        }
    },
    yAxis: {
        type: 'value',
        name:"单位：kW.h",
        nameLocation:"end",
        nameGap:-10,
        nameTextStyle:{
            color:"#808080",
            padding:[0, 0,0,90]
        },
        max: function(value) {
            if(value.max<1){
                return 800
            }else{
                return value.max+200
            }
            // return value.max - 20;
        },
        axisTick:{
            show:false
        },
        splitLine:{
            show:false
        },
        axisLine: {
            lineStyle: {
                type: 'solid',
                color: '#808080',//左边线的颜色
                width:'1'//坐标线的宽度
            }
        },
    },
    series: [{

        data: [820, 932, 901, 934, 1290, 1330, 1320],
        name:"用电量",
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ],
            lineStyle:{
                color:"rgba(200,200,200,1)",
                width:2
            },
            symbol:"none",
            label:{
                show:true,
                position:'middle',
                formatter: function (params) {
                    var res='            '+params.name+'：'+params.value;
                    return res;
                }

            },
        },
        type: 'line',
        smooth: true,
        areaStyle: {
            color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: 'rgba(184,232,255,0.8)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(184,246,249,0.6)' // 100% 处的颜色
                }],
                global: false // 缺省为 false

            },
            shadowOffsetX:0,
            shadowOffsetY:10,
            shadowBlur:0,
            shadowColor:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: 'red' // 0% 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }

        },
        lineStyle:{
            color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0, color: '#00ABFF' // 0% 处的颜色
                }, {
                    offset: 1, color: '#00E3E6' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            shadowColor:'rgba(0,197,243,0.5)',
            shadowBlur: 6,
            shadowOffsetY: 8,

            width:3
        },
        symbol:"circle",
        symbolSize:6,
        showAllSymbol:false,
        itemStyle:{
            color:"white",
            borderColor:"#00aaff",
            borderWidth:2
        }
    }]
};