ECharts3实例定制图例、XY轴、叠加柱状图-蒲公英云

ECharts3实例定制图例、XY轴、叠加柱状图

前言

 实现如下效果图

在这里插入图片描述

解决方法

option = { 
    tooltip: { 
        trigger: 'axis',
         backgroundColor: "rgba(255,255,255)", //设置背景图片 rgba格式
          color: "black",
          borderColor: "gray", //设置边框颜色
          textStyle: { 
            color: "red" //设置文字颜色
          },
    },
    legend: { 
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        icon: "roundRect", 
        itemWidth: 10,  // 设置宽度
        itemHeight: 10, // 设置高度
        left: '50px' ,
        textStyle: { 
            color: 'red' 
        }
    },
    // grid: { 
    // left: '3%',
    // right: '4%',
    // bottom: '3%',
    // containLabel: true
    // },
    yAxis: { 
        type: 'value',
        axisLabel: { 
            formatter: '{value} ml',
            color: '#fff'
        },
         axisLine:{ 
            lineStyle:{ 
                color:'#fff'
            }
        },
        splitLine:{ 
            lineStyle: { 
                type: 'dashed',
                width: 2,
                color: 'red'
            }
    　　}
    },
    xAxis: { 
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
     axisPointer: { 
            type: 'shadow'
        },
        axisLabel: { 
            color: 'red'
        },
        axisTick: {  show: false },
        //设置轴线的属性
        axisLine:{ 
            lineStyle:{ 
                color:'#ddd'
            }
        } 
    },
    series: [
        { 
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: { 
                show: true
            },
            barMaxWidth: 40,
            itemStyle: { 
                color: 'red'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
        },
        { 
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            label: { 
                show: true
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        { 
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            label: { 
                show: true
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        { 
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            label: { 
                show: true
            },
            data: [150, 212, 201, 154, 190, 330, 410]
        },
        { 
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            label: { 
                show: true
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
        }
    ]
};