echarts字體大小調整，坐標軸name設置等一些問題

關於echarts的一些配置

一下記錄中的記錄規則，盡量以echarts對應的數據進行說明，#prop#表示可以設置的值

總結一下echarts的配置，方便擴展
（-）字體調整
1.1 坐標軸字體大小調整：

"yAxis":[{"axisLabel":fontSize:#fontSize#}] 或者 "xAxis":[{"axisLabel":fontSize:#fontSize#}]

 

 

 1.2 圖表標題大小調整：

"title":[{textStyle:{"fontSize" : #fontSize#}}]

 

1.3 坐標軸的name大小設置：

"yAxis":[{"nameTextStyle":{ "fontSize":#fontSize#}}] 
或者 

"xAxis":[{"nameTextStyle":{ "fontSize":#fontSize#}}]

 

1.4坐標軸label字體旋轉 

"xAxis"：[{"axisLabel":{"rotate":60}}] 或者 "yAxis"：[{"axisLabel":{"rotate":60}}] 

 

 （二）顏色調整

 1.1：坐標軸字體顏色調整

"xAxis":[{"nameTextStyle":{"color":"red"}}]    坐標軸name顏色 

 

 

   "xAxis":[{"axisLabel":{"color":"red"}}]          坐標軸刻度label顏色

 

 1.2：坐標軸背景顏色調整

 "backgroundColor":"black"

 

  1.3：柱子顏色調整

"series":[{
                "itemStyle": {   
                        //通常情況下：
                        normal:{
                                //每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
                            color: function (params){
                                return "#FFF";
                            }
                        }
                    }
     }]

 

  1.4：柱子顏色循環顯示

"series":[{
                "itemStyle": {
                        normal:{
                                //每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
                            color: function (params){
                                var colorList = ['#000000','#FF0000','#00FF00','#0000FF','#00FFFF','#C0C0C0'];
                                var colorIndex = params.dataIndex;
                                if(params.dataIndex >= colorList.length){
                                        colorIndex = params.dataIndex % colorList.length == 0?0:params.dataIndex % colorList.length;
                                }
                                return colorList[colorIndex];
                            }
                        }
                    }
     }]

 

 （三）數據取整數 echarts默認坐標軸數據出險小數

 "xAxis":[{ "minInterval": 1}]

 

 （四）柱子大小調整

   1.1：柱子大小調整

"series":[{"barWidth":18}]

 

 （六）坐標軸數據做運算二次處理

"yAxis":[{"axisLabel":
                                             formatter: function(params){
                                                        return (params/1000) + "k";
                                                }
                                             }]

 

 （七）折線實心

 "series":[{
                                "symbol": 'circle',     //折點設定為實心點
                                    "symbolSize": 15,   //設定實心點的大小
                }]

 (8)圖表位置調整 【轉載自https://www.cnblogs.com/weixing/p/9578535.html】

條形圖/樹狀圖
        grid:{
                    x:25,
                    y:45,
                    x2:5,
                    y2:20,
                    borderWidth:1
                }
或者

grid:{
                    left:'8%',
                    right:'0',
                    bottom:'1%',
                    containLabel:true
                }

 [此圖轉載其他地方 https://www.cnblogs.com/weixing/p/9578535.html ]

 

 

 

餅圖："series":[{"type": "pie",
                              "center": [
                                     "20%",  //x 左上角
                                     "30%"   //y 左上角
                                 ]
                        }]