zoukankan      html  css  js  c++  java
  • 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:{
                       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属性

  • 相关阅读:
    深度排序与alpha混合 【转】
    SVN服务器配置说明 【转】
    3D空间中射线与轴向包围盒AABB的交叉检测算法 【转】
    Linux系统管理员不可不知的命令:sudo
    Linux 系统实时监控的瑞士军刀 —— Glances
    shell定期转移日志文件到云盘并定期删除云盘文件
    zabbix监控第二块网卡是否连通
    Gitlab自动触发Jenkins构建打包
    shell脚本检测网络是否畅通
    Prometheus入门
  • 原文地址:https://www.cnblogs.com/yunyin/p/13889794.html
Copyright © 2011-2022 走看看