柱状图+条形图echarts '; } } } }, "data": [12780,16233,22426,25617,23523,21991,21958], }, { "name": "活跃用户(新)", "type": "bar", "stack": "总量", "itemStyle": { "normal": { "color": "#B3E6D8", "barBorderRadius": 0, "label": { "show": true, "position": "insideTop", "color":'#808080配置项内容和展示

用来描述活跃和新增用户的趋势

配置项如下
      option = {
    // D3D3D3
    // FFFAF0
    
    // BE7889
    // 0AA0E6
    backgroundColor: "#FFFFFF",
    "title": {
        text: "2020年1月-7月Boss骑士月活",
        left: "center",
        top: "5%",
        textStyle: {
            color: "#808080",
            fontSize: 20,

        }
    ,
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#808080"
            }

        },
    },
      "grid": {
        top: '20%',
        left: '10%',
        right: '10%',
        bottom: '10%',
        containLabel: true,
    },
    
    "legend": {
        x: '85%',
        top: '7%',
        textStyle: {
            color: '#808080',
            fontSize: 14,
        },
        "data": [ '活跃用户总数','活跃用户(新)', '活跃用户(老)']
    },

    "calculable": true,
    "xAxis": [{
        "type": "category",
         "boundaryGap": "false",
        "axisLine": {
            lineStyle: {
                color: '#808080'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "data": [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        ]
,
    }],
    "yAxis": [{
        'name': '人数',
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            lineStyle: {
                color: '#808080'
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            formatter: '{value}',
            "interval": 0,

        },
        "splitArea": {
            "show": false
        },

    }],
    "series": [{
            "name": "活跃用户(老)",
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": "#ADC5D9",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#808080 "
                        },
                        "position": "insideTop",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [12780,16233,22426,25617,23523,21991,21958],
        },

        {
            "name": "活跃用户(新)",
            "type": "bar",
            "stack": "总量",
            "itemStyle": {
                "normal": {
                    "color": "#B3E6D8",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "insideTop",
                        "color":'#808080',
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [3241,2938,12766,9695,8995,9815,10769]
        }, {
            "name": "活跃用户总数",
            "type": "line",
            "symbol": 'circle',
            "stack": "总量",
            symbolSize:10,

            "itemStyle": {
                "normal": {
                    "color": "#54AFEB",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        "color":'#808080',
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": [16021,19171,35192,35272,32518,31806,32637]
        },
    ]
}
    
截图如下