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属性

 

posted @ 2020-10-28 10:57  云里知音  阅读(5424)  评论(1编辑  收藏  举报