Echarts：【2019全国职业技能大赛大数据技术】任务四-可视化：3-酒店直销、分销订单及比率（堆叠柱状图）

濯一一

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2024-01-18 10:11:56 发布 1k 阅读 AI 写同款· GEO 优化 ›

数据可视化之柱状图：特点，应用场景，以及效果展示与代码绘制大数据之数据可视化，柱状图：特点，应用场景，以及效果展示与代码绘制阅读详情

赛题：

（后期更新）

知识点笔记：

stack: '总量', //设置堆叠在一起

label: {
show: true, //显示值
position: 'insideRight' //靠柱体的右边显示
},

option = {
    title:{
        text: '酒店直销、分销订单及比率',
        textStyle:{
            color:'red',
            fontStyle:'italic',
            fontWeight:'bolder'
        },
        left:'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['酒店直销', '酒店分销','酒店分销率'],
        left:30,
    },
    xAxis: [
        {
            type: 'category',
            data: ['山水时尚酒店北京梨园店', '北京大宝饭店',  '北京普乐门白领公寓 798 精品店', '北京长得福宾馆', 
        '北京中联鑫华酒店西客站店', '北京瑞祥居宾馆',  '北京花神假日酒店'],
            axisLabel:{
                interval:0,
                rotate:-40
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销售数量',
            min: 0,
            max: 200,
            interval: 50,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '分销(比例)',
            min: 0,
            max: 0.8,
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name: '酒店直销',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [50, 55, 38, 80, 70, 45, 60]
        },
        {
            name: '酒店分销',
            type: 'bar',
            stack:'总量',
            label:{
                show: true,
                position:'insideRight'
            },
            data: [50, 55, 62, 10, 28, 50, 15]
        },
        {
            name: '酒店分销率',
            type: 'line',
            yAxisIndex: 1,
            data: [0.500000, 0.500000, 0.620000, 0.111111, 0.285714, 0.200000,0.000000]
        }
    ]
};