1.柱状图

1.1 横向 加堆叠 并显示百分比数据

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一', '周二', '周三']
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight'
            },
            data: [320, 302, 301]
        },
        
        {
            name: '搜索引擎',
            type: 'bar',
            barWidth : 50,//柱图宽度
            stack: '总量',
            // 设置label样式
            label: {
                show: true, // 是否显示
                position: 'insideRight',  // 显示位置 
                formatter: function(v) {   // 格式化
                    var val = v.data;
                    return val + '（'+ val +'%）';
                    // return val + '\n'+ val +'%';
                },
                color: 'red', // 颜色
                fontSize: 16, // 字号
            },
            data: [820, 832, 901]
        }
    ]
};
position 支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
 // 绝对的像素值
  position: [10, 10],
  // 相对的百分比
  position: ['50%', '50%']