echarts細節調整整理

1.xy軸座標線

splitLine:{show: false},

2.顯示x座標軸的信息

axisLabel:{

    interval:4,//橫軸信息全部顯示 0 auto

    rotate: 0,//60度角傾斜顯示

},

3.單位

type : "value",

name: 'Yuan/t',

4.座標線樣式

axisLine:{

    lineStyle:{

        color:"#000",

        width:0.5,

    }

},

5.折線點和折線的顏色

itemStyle : {

    normal : {

        color:'#CEC3DA',

        lineStyle:{

            width:1,

            color:"#CEC3DA"

        }

    }

},

6.標識樣式

data: [

    {

        name:"<?=$dataName[0]?>",

        icon : 'line',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

        textStyle:{fontWeight:''}

    }

]

7.顯示直角座標系網絡

grid:false,

8.圖形透明度

series : [

{

    name:"<?=$dataName[0]?>",

    type:"line",

    itemStyle : {

        normal : {

          label:{show:true},

          opacity: 0,

          color:"#759CCB",

          lineStyle:{

               width:2,

               color:"#759CCB"

          }

    }

},

data:<?=json_encode($dataXY[0])?>

},

9.雙曲線圖雙Y座標軸

nameGap:10, //座標軸名字裏座標系的距離

splitNumber:5,//座標軸的分割段數

min:300,//Y座標軸的最小值

max:1800,//Y座標軸的最大值

interval:350,//步長

10.橫座標最大值

max:'dataMax',

11.X軸數據翻轉

inverse:true,

12.控制圖形的位置

grid: [

    {x: '15%', y: '7%', width: '38%', height: '38%'},

    {x2: '7%', y: '7%', width: '38%', height: '38%'},

    {x: '7%', y2: '7%', width: '38%', height: '38%'},

    {x2: '7%', y2: '7%', width: '38%', height: '38%'}

],

13.控制Y軸和座標單位名稱的間距

nameGap:10

14.去除折線圖的空白樣式

symbol:'none';

symbolSize: 20, 大小

修改前：

修改後：

15.折線圖顯示數據，如果Y軸數據爲0不顯示

                       show: true,
                            formatter: function (params) {  
                                if (params.value > 0) {
                                    return params.value;
                                } 
                                else {
                                    return '';
                                }
                            },

 

以上屬性是我在開發過程中遇到的一些需求，進行了修改，並對樣式的操作進行了記錄，方便大家使用，後期使用的會補錄到此文檔