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 ''; } }, |
以上属性是我在开发过程中遇到的一些需求,进行了修改,并对样式的操作进行了记录,方便大家使用,后期使用的会补录到此文档