echarts折線圖柱狀圖的坐標軸的顏色及樣式的設置


基本用法請查看echarts官網。

一、圖例legend的設置。

1.字體和顏色的設置

textStyle:{
                fontSize:15,
                color:'#fff'
            }

2.樣式的設置

 legend: {
            data:systemName,
            itemWidth:40,
            itemHeight:20,
            textStyle:{
                fontSize:15,
                color:'#fff'
            }
        }

  可以根據需求自己設置。

 二、工具箱toolbox的設置

三、tooltip懸浮提示框

{
    type: 'line',
    lineStyle: {
        color: '#48b',
        width: 2,
        type: 'solid'
    },
   textStyle:{
      color:'#fff'
   }
}

三、x軸坐標xAxis的字體顏色大小,坐標線顏色,以及網格線的設置

xAxis : [
            {
                type: 'category',
                boundaryGap: false,
                data: time,
                splitLine:{show: false},//去除網格線
                splitArea : {show : true},//保留網格區域
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//左邊線的顏色
                        width:'2'//坐標線的寬度
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',//坐標值得具體的顏色

                    }
                }
            }
        ]

四、yAsix的設置相同

 yAxis : [
            {
                type : 'value',
                splitLine:{show: false},//去除網格線
                splitArea : {show : true},//保留網格區域
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color:'#fff',
                        width:'2'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ]

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM