小程式 antv繪制曲線圖折線圖，把圓點置于曲線後方，點曲線樣式自定義！

最近用antv在小程式繪制圖表，出現一個問題，看下圖，曲線顯示在了小圓點上方，很不美觀，需要效果入下下圖，小圓點置于最上層，不要被擋住，好了問題說明白了，就來看代碼：

圖一代碼如下：

chart.point().position('showData*value').style('showControl', { 
          stroke: 'rgb(222,174,255)',
          fill: '#fff',
          lineWidth: 1,
    }).color('rgb(222,174,255)');
    chart.line().position("showData*value").color("showControl","rgb(222,174,255)"); //繪制折線
    chart.render();
    return chart;
    
           

圖一

圖二代碼如下：

chart.line().position("showData*value").color("showControl","rgb(222,174,255)"); //繪制折線
    chart.point().position('showData*value').style('showControl', { 
          stroke: 'rgb(222,174,255)',
          fill: '#fff',
          lineWidth: 1,
    }).color('rgb(222,174,255)');
    chart.render();
    return chart;
           

圖二

怎麼樣，是不是一看就明白了，我什麼都沒做，隻是吧兩行代碼調換了一下位置，我自己的了解是，他這個繪圖是按你的js邏輯來按順序繪制的，chart.line()是繪制折線，chart.point()是繪制圓點，你把chart.line()放在chart.point()前，那就是先繪制了曲線，是以圖層就在下方，後繪制的圓點自然就顯示在了曲線上方，相反吧chart.line()放在chart.point()後，就是一樣的道理，就會出現圖一的樣式，希望幫你解決了問題。