echarts經常使用方法，legend顏色自定義，折線label顯示問題（五）

問題描述1：折線圖，柱狀圖結合的雙y軸圖表的展現，使用通用屬性設置echarts的legend時顏色不對，須要手動修改顏色，讓顏色和柱圖折線圖一致。

問題復現：

一般咱們使用是定義顏色會經過以下方式定義：（此方法會出現上圖問題）

let option = { color: colorArr,//legend自定義顏色值數組
 legend:{ right:'4%', show:lgendItem && legendShow, itemWidth:12, itemHeight:12, data:lgendItem }, ...... }

修改成以下代碼可解決：

seriesData.push({ name:item, type:"bar", data:ydata[item], yAxisIndex:0, barWidth: "auto", itemStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color:itemSty[index%colg][0]  // 0% 處的顏色
 },{ offset: 1, color: itemSty[index%colg][1] // 100% 處的顏色
 }], globalCoord: false } }, color:colorArr[index%colg], //柱圖對應的legend的顏色
})

seriesData.push({ name:item, type:"line", yAxisIndex:1, data: ydata[item], smooth:lineSmooth, symbol: 'circle', symbolSize: 5, showSymbol:symbolShow, lineStyle:{ color: colorArr[index%colg], shadowColor:colorArr[index%colg], shadowBlur: 20, shadowOffsetX: 1, shadowOffsetY: 0, opacity:1 }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color:areaSty[index%colg][0]  // 0% 處的顏色
 },{ offset: 1, color: areaSty[index%colg][1] // 100% 處的顏色
 }], globalCoord: false }, opacity:areaOpacity, }, color:colorArr[index%colg], //折線圖對應的legend顏色
 })

 

問題描述2：折線圖上方的數據顯示問題。若是設置折線上的item隱藏，則label數據值不顯示。item設置爲顯示後，對摺線圖的label作顯示設置才能正常顯示出來。