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

基本用法請查看echarts官網。

一、圖例legend的設置。

1.字體和顏色的設置

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

2.樣式的設置

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

可以根據需求自己設置。

 二、工具箱toolbox的設置

三、tooltip懸浮提示框

{
    trigger: 'axis',
　  axisPointer: { // 坐標軸指示器，坐標軸觸發有效
　　　type: 'line', // 默認為直線，可選為：'line' | 'shadow'
　　　lineStyle: { 
　　　　　color: 'rgb(248,175,18)' // 線的顏色
　　　}
　　},
   textStyle:{
      color:'#fff'
   },    
   formatter: function (params) {  // 自定義顯示          
       var value = params.name + ': ' + params.value;
       return value
    }                  
}

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

xAxis : [
            {
                type: 'category',
　　　　　　　　　　name: '分鍾',
　　　　　　　　　nameGap: 4, // 坐標軸名稱與軸線之間的距離
                boundaryGap: false,
                data: time,
                splitLine:{show: false},//去除網格線
                splitArea : {show : true},//保留網格區域
                axisTick: {
                axisTick: {
                    show: false, //隱藏刻度線
                 },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//坐標線的顏色
                        width:'2'//坐標線的寬度
                    }
                },
                axisLabel: {
                    textStyle: {
　　　　　　　　　　　　　　show:true,//不顯示坐標軸的數字
                        color: '#fff',//坐標值得具體的顏色
 　　　　　　　　　　　　　　formatter:function(value){
　　　　　　　　　　　　　　　if (value < 0) { //橫坐標的負半軸的  "坐標軸" 上顯示是正數
　　　　　　　　　　　　　　　　return -value;
　　　　　　　　　　　　　　}else {
　　　　　　　　　　　　　　　　return value;
　　　　　　　　　　　　　}
                    }
                }
            }
        ]

四、yAsix的設置相同

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

五、series的設置

series: [
            {
                name: '支出',
                type: 'bar',
                stack: '總量',
                label: {
                    normal: {
                        show: true,
                        /*
                        *處理橫坐標負半軸這邊的  "柱狀"  顯示的數
                        *后台傳過來是負數，顯示時是正數
                          */
                        formatter: function (value) {
                            if(value.data < 0){
                                return -value.data;
                            }
                        },
                    }
                },
                data: [-120, -132, -101, -134, -190, -230, -210]
            },
            {
                name: '收入',
                type: 'bar',
                stack: '總量',
                label: {
                    show: true
                },
                data: [200, 170, 240, 244, 200, 220, 210]
            }
        ]

 

原文鏈接：https://www.cnblogs.com/my-freedom/p/6699271.html