echarts繪圖最騷的一波，一條線設置多色和單色

話很少說，上內容：業務需求以下圖：

分析：若是單色的話，直接使用line就能夠知足，修改顏色就ok，將線寬設置下便可知足需求，可是會有多色的狀況，而此時使用line就沒法知足需求

代碼：

定義的color:

{        

     globalCoord:true,

     type:'liner',

     x:0,

     y:0,

     x2:0,

     y2:1, 

     colorStops:[

         {

             offset:0,

             color:'rgb(0,194,0)'

         },{

             offset:0.47,

             color:'rgb(0,194,0)'

         },{

             offset:0.47,

             color:'rgb(0, 0, 0)'

         },{

             offset:0.53,

             color:'rgb(0, 0, 0)'

         },{

             offset:0.53,

             color:'rgb(255, 255, 0)'

         },{

             offset:1,

             color:'rgb(255, 255, 0)'

         }         

     ],

     global:false,//缺省爲false       

  },

複製代碼

//處理數據設置color

for(let l=0;l< option.series[1].data.length;l++){

            if(option.series[1].data[l]!==option.series[1].data[l + 1]){

                option.series[1].data[l]=null;

                option.visualMap[5].pieces.push(

                    {  gt:option.visualMap[5].pieces.length === 0 ? 0 : option.visualMap[5].pieces[option.visualMap[5].pieces.length-1].gt,

                        lte:l,

                        color:getPowerColor(this.props.infos.drawData[4].value[l])

                    }

                )

            }

        }

//series

{

            name:"xxx",

            type: 'line',

            xAxisIndex: 2,

            yAxisIndex: 2,

            connectNulls: false,

            barWidth:2,

            barGrap:0,

            hoverAnimation: false,

            data: [],

        },

複製代碼

使用此種方式的時候，返現color 定義單色是能夠的，也就是說：color必須是 color:'red' 這種

策略：通過昏天黑地的調試，嘗試，忽然發現了一個有趣的問題

{

            name:"xxx",

            type: 'bar',

            xAxisIndex: 2,

            yAxisIndex: 2,

            connectNulls: false,

            barWidth:2,

            barGrap:0,

            hoverAnimation: false,

            data: [],

        },

複製代碼

當類型改成bar時候，盡然能夠設置多色，兩種方式實現思路以下：

本次這個項目使用框架echarts的時候一路抱怨過來的，到最後的確以爲還行吧，畢竟使用框架的時候侷限性很大，不少都須要本身實現，可是有不會改，只能勉勉強強用框架湊出來，初版用框架作，第二版就原生實現吧，期待第二版會碰見什麼問題，哈哈！