E-charts使用總結

繪圖網格圖表的相關配置

• 配置代碼

let opt = {
    // 控制整個圖表
    grid:{
        top:20
    }
}

• 文檔地址：http://echarts.baidu.com/option.html#grid

圖表指標展現按鈕位置設置：

配置代碼：

let opt ={

    // 指標按鈕控制： 但是設置的參數有 left 、top 、right、bottom ... 等等 
    legend:{
        bottom : 10
    },
};

• 文檔地址 ： http://echarts.baidu.com/option.html#legend

圖表內容區的配置 series

• 配置代碼

let opt ={
    series: {
        type:'line', // 圖表類型必須配置
        
        smooth: false,   // 是否平滑過渡( 直線或者弧線 )
        
        lineStyle:{ //折線樣式
            width:4
        },
        animation:true, // 繪製動畫
        
        //折線圖座標小圓點 ，若是 false 則只有在 鼠標 hover 的時候顯示。
        showSymbol: false
    },
};

座標軸配置

• 配置代碼

let opt = {
    legend:{
        bottom : 10
    },
    // X軸配置
    xAxis: {
        type: 'category',                    
        boundaryGap: true,// 兩側留白
        
        splitLine:{show: false},//去除網格線
        
        // splitArea : {show : true},//保留網格區域 
        
        //座標軸配置
        axisLine: {
            show:true,
            lineStyle: {
                // type: 'solid',
                color: '#999999',//左邊線的顏色
                // width:'2'//座標線的寬度
            }
        },
        // 刻度線設置
        axisTick:{
            show:true,
            inside:true
        },
        // 座標軸文字設置
        nameTextStyle:{
            align: 'center'
        }
    },
    // Y軸配置
    yAxis :{
        type : 'value',
        splitLine:{show: false},//去除網格線
        axisLine: {
            show:true,
            lineStyle: {
                color:'#999999',
            }
        }, 
        axisTick:{
            show:true,
            inside:true
        },
        min:10                                   
    }
}

• 文檔地址：http://echarts.baidu.com/option.html#xAxis