echarts 折線圖 areaStyle顏色重疊問題

 

 

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data: ['蘋果', '香蕉', '橘子'], // 設置具體項
        icon:"rect",   // 設置legend圖標
        bottom:"bottom",  //設置legend位置
        itemGap:50 //設置legend項之間的間距
    },
    xAxis: [
        {
            type: 'category',
            data: ['鄭州', '南陽', '洛陽', '信陽', '新鄉', '開封', '駐馬店', '商丘', '許昌', '周口', "濟源", '濮陽'],
            axisPointer: {  //設置x軸指示器樣式
                type: 'shadow'
            },
            axisTick:{show:false},
            axisLine:{
               lineStyle:{
                   width:2
               }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 0,
            max: 250,
            interval: 50,
            axisTick:{show:false},
            axisLine:{show:false}
            
        },
        {
            type: 'value',
            min: 0,
            max:50,
            interval: 10,
            axisLabel: {
                formatter: '{value} %'
            },
            axisTick:{show:false},
            axisLine:{show:false}
        }
    ],
    series: [
        {
            name: '蘋果',
            type: 'line',
            data: [20., 49, 70, 26, 66, 76, 100, 142, 32, 20, 6, 50],
            itemStyle:{
                color:"#3fa7dc" //設置折線圖顏色
            },
            smooth:true,  // 線條是否平滑
            symbol:"none", // 是否顯示節點
            stack:"總量",  //areaStyle顏色重疊問題,添加相同的stack屬性即可
            areaStyle: {
                opacity:0.3
            }
        },
        {
            name: '香蕉',
            type: 'line',
            stack:"總量",
            data: [230, 130, 160, 184, 90, 120, 100, 90, 48, 18, 10, 30],
            itemStyle:{
                color:"orange"   //設置折線圖顏色
            },
            smooth:true,
            symbol:"none", // 是否顯示節點
            areaStyle: {
                opacity:0.3
            }
        },
        {
            name: '橘子',
            type: 'line',
            data: [60, 80, 90, 120, 63, 102, 240, 234, 230, 165, 120, 62],
            itemStyle:{
                color:"#ff3a00"   //設置折線圖顏色
            },
            symbolSize:10,  // 設置節點大小
            symbol:"circle"  // 設置節點樣式  
            
        }
    ]
};

 

設置areaStyle屬性后，發現顏色重疊，如果不想重疊，給series的項添加相同的stack屬性