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做顯示設置才能正常顯示出來。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM