echarts的使用

改变x轴y轴的颜色

            xAxis : [
                {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],    
                    //设置轴线的属性
                    axisLine:{
                        lineStyle:{
                            color:'#FF0000',
                            8,//这里是为了突出显示加上的
                        }
                    } 
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    //设置轴线的属性
                    axisLine:{
                        lineStyle:{
                            color:'#00FF00',
                            8,//这里是为了突出显示加上的
                        }
                    } 
                }
            ],
                

柱状图的宽度

            series: [{
                name: '登录次数',
                type: 'bar',
                data: [500, 200, 136, 100, 90, 80, 70, 60, 50, 40],
                barWidth:'10px', //宽度
                color:'#12BA1D', //颜色
            }]

坐标轴刻度线

 axisTick: {           //坐标轴刻线
    show: true
},

 安全基线

            visualMap: {
                show: true,
                pieces: {
                        color: '#03d6d6',
                    }
            },

 x轴和y轴的线条(在xAxis里设置)

splitLine: {
   show: true,
   interval: 'auto',
    lineStyle: {
    color: '#F6F6F6',
     }
 },

            legend: {
                data:['登录次数'],
                x:'650px',
            },

　　

Echarts属性trigger:axis、axisPointer效果展示

tooltip: {
    trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
    axisPointer: {  //坐标轴指示器，坐标轴触发有效，
        type: 'line', //默认为line，line直线，cross十字准星，shadow阴影
        crossStyle: {
            color: '#fff'
        }
    }
}

 改变面积区域颜色渐变

                    areaStyle:{
                                normal:{
                                    //右，下，左，上
                                    color:new echarts.graphic.LinearGradient(0,0,0,1,[
                                        {
                                            offset:0,
                                            color:'#d8fdda'
                                        },
                                        {
                                            offset:1,
                                            color:'#fbfefb'
                                        }
                                    ],false)
                                    
                                }