echarts折线图拐点和曲线属性

我不是女神ヾ 2022-05-20 01:26 633阅读 0赞

# [echarts折线图个性化填充、线条、拐点样式][echarts] #

由于每组数据的拐点样式、线条颜色都不一样，所以series里的每组数据都需要单独设置样式。

首先先来看一下完成后的效果吧

![996661-20170412160511861-982278476.jpg][]

具体设置如下

<table style="border:1px solid #C0C0C0;background:none;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
 <tbody style="background:none;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
  <tr style="background:none;border-top:0px;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;background:none;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;color:rgb(175,175,175);"> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      1 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      2 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      3 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      4 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      5 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      6 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      7 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      8 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      9 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      10 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      11 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      12 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      13 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      14 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      15 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      16 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      17 
    </div></td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;background:none;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
    <div style="background:none;border:0px;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">series: [</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">{ </code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">name:systemName[0],</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">type:</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">'line'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">,</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">symbol:</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">'star'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">,</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,130,0);">//拐点样式</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">symbolSize: 8,</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,130,0);">//拐点大小</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">itemStyle : { </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">normal : { </code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">lineStyle:{ </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">width:3,</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,130,0);">//折线宽度</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">color:</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">"#FF0000"</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,130,0);">//折线颜色</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">}</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">}</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">},</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">data:data[0]</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">}</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">]</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

每一组折线的数据都如上图所示设置。

拐点的样式有：

![996661-20170412164511376-832523882.png][]

[echarts]: https://www.cnblogs.com/my-freedom/p/6699684.html
[996661-20170412160511861-982278476.jpg]: /images/20220520/df73c4738fd74c47afcbe1f212655105.png
[996661-20170412164511376-832523882.png]: /images/20220520/2c668bcc373e460d982f9d95e5ed6402.png