echarts细节调整整理

墨蓝 2022-03-12 05:06 382阅读 0赞

1.xy轴坐标线

<table> 
 <tbody> 
  <tr> 
   <td> <p>splitLine:{show: false},</p> </td> 
  </tr> 
 </tbody> 
</table>

2.显示x坐标轴的信息

<table> 
 <tbody> 
  <tr> 
   <td> <p>axisLabel:{ </p> <p>&nbsp; &nbsp; interval:4,//横轴信息全部显示 0 auto</p> <p>&nbsp; &nbsp; rotate: 0,//60度角倾斜显示</p> <p>},</p> </td> 
  </tr> 
 </tbody> 
</table>

3.单位

<table> 
 <tbody> 
  <tr> 
   <td> <p>type : "value",</p> <p>name: 'Yuan/t',</p> </td> 
  </tr> 
 </tbody> 
</table>

4.坐标线样式

<table> 
 <tbody> 
  <tr> 
   <td> <p>axisLine:{ </p> <p>&nbsp; &nbsp; lineStyle:{ </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; color:"#000",</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; width:0.5,</p> <p>&nbsp; &nbsp; }</p> <p>},</p> </td> 
  </tr> 
 </tbody> 
</table>

5.折线点和折线的颜色

<table> 
 <tbody> 
  <tr> 
   <td> <p>itemStyle : { </p> <p>&nbsp; &nbsp; normal : { </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; color:'#CEC3DA',</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; lineStyle:{ </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:1,</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:"#CEC3DA"</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; }</p> <p>&nbsp; &nbsp; }</p> <p>},</p> </td> 
  </tr> 
 </tbody> 
</table>

6.标识样式

![20190305110937342.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>data: [</p> <p>&nbsp; &nbsp; { </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; name:"&lt;?=$dataName[0]?&gt;",</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; icon : 'line',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; textStyle:{fontWeight:''}</p> <p>&nbsp; &nbsp; }</p> <p>]</p> </td> 
  </tr> 
 </tbody> 
</table>

7.显示直角坐标系网络

<table> 
 <tbody> 
  <tr> 
   <td> <p>grid:false,</p> </td> 
  </tr> 
 </tbody> 
</table>

8.图形透明度

![20190305111059617.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p>series : [</p> <p>{ </p> <p>&nbsp; &nbsp; name:"&lt;?=$dataName[0]?&gt;",</p> <p>&nbsp; &nbsp; type:"line",</p> <p>&nbsp; &nbsp; itemStyle : { </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; normal : { </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label:{show:true},</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0,</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:"#759CCB",</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lineStyle:{ </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width:2,</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color:"#759CCB"</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</p> <p>&nbsp; &nbsp; }</p> <p>},</p> <p>data:&lt;?=json_encode($dataXY[0])?&gt;</p> <p>},</p> </td> 
  </tr> 
 </tbody> 
</table>

9.双曲线图双Y坐标轴

<table> 
 <tbody> 
  <tr> 
   <td> <p>nameGap:10, //坐标轴名字里坐标系的距离</p> <p>splitNumber:5,//坐标轴的分割段数</p> <p>min:300,//Y坐标轴的最小值</p> <p>max:1800,//Y坐标轴的最大值</p> <p>interval:350,//步长</p> </td> 
  </tr> 
 </tbody> 
</table>

10.横坐标最大值

<table> 
 <tbody> 
  <tr> 
   <td> <p>max:'dataMax',</p> </td> 
  </tr> 
 </tbody> 
</table>

11.X轴数据翻转

<table> 
 <tbody> 
  <tr> 
   <td> <p>inverse:true,</p> </td> 
  </tr> 
 </tbody> 
</table>

12.控制图形的位置

<table> 
 <tbody> 
  <tr> 
   <td> <p>grid: [</p> <p>&nbsp; &nbsp; {x: '15%', y: '7%', width: '38%', height: '38%'},</p> <p>&nbsp; &nbsp; {x2: '7%', y: '7%', width: '38%', height: '38%'},</p> <p>&nbsp; &nbsp; {x: '7%', y2: '7%', width: '38%', height: '38%'},</p> <p>&nbsp; &nbsp; {x2: '7%', y2: '7%', width: '38%', height: '38%'}</p> <p>],</p> </td> 
  </tr> 
 </tbody> 
</table>

13.控制Y轴和坐标单位名称的间距

<table> 
 <tbody> 
  <tr> 
   <td> <p>nameGap:10</p> </td> 
  </tr> 
 </tbody> 
</table>

14.去除折线图的空白样式

<table> 
 <tbody> 
  <tr> 
   <td> <p>symbol:'none';</p> <p>symbolSize: 20, 大小</p> </td> 
  </tr> 
 </tbody> 
</table>

修改前：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkVHJ1ZUxvdmU_size_16_color_FFFFFF_t_70][]

修改后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkVHJ1ZUxvdmU_size_16_color_FFFFFF_t_70 1][]

15.折线图显示数据，如果Y轴数据为0不显示

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;show: true,<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formatter: function (params) { &nbsp;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (params.value &gt; 0) { <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return params.value;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else { <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return '';<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

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

[20190305110937342.png]: /images/20220312/28b094712141441ba66d6b92a07a4501.png
[20190305111059617.png]: /images/20220312/eaea67f47b434b7992195f11efb0a9e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkVHJ1ZUxvdmU_size_16_color_FFFFFF_t_70]: /images/20220312/588afa1b4ffb444aa73f789bd6e5dc81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkVHJ1ZUxvdmU_size_16_color_FFFFFF_t_70 1]: /images/20220312/cbb88e594900444184bd0ddfc31d1419.png