天天看點

echarts折線圖柱狀圖的坐标軸的顔色及樣式的設定

一、圖例legend的設定。

1.字型和顔色的設定

textStyle:{

                fontSize:15,

                color:'#fff'

            }      

2.樣式的設定

echarts折線圖柱狀圖的坐标軸的顔色及樣式的設定
legend: {
           data:systemName,
           itemWidth:40,
           itemHeight:20,
           textStyle:{
               fontSize:15,
               color:'#fff'
           }
       }      

  可以根據需求自己設定。

 二、工具箱toolbox的設定

echarts折線圖柱狀圖的坐标軸的顔色及樣式的設定

三、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'

                   }

               }

           }

       ]      

繼續閱讀