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 '';                                 }                             },

 

以上属性是我在开发过程中遇到的一些需求，进行了修改，并对样式的操作进行了记录，方便大家使用，后期使用的会补录到此文档