echarts横向显示百分比柱状图

要实现横向显示百分比柱状图，可以使用ECharts中的『水平柱状图』和『百分比堆叠』两个组件。

以下是一个示例代码：

var option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value',
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value}%'
            },
            max: 100,
            min: 0
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                formatter: '{c}%'
            },
            data:[10, 20, 30, 40, 50, 60, 70],
            itemStyle: {
                normal: {
                    color: '#1E90FF'
                }
            }
        },
        {
            name:'邮件营销',
            type:'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                formatter: '{c}%'
            },
            data:[20, 30, 40, 50, 60, 70, 80],
            itemStyle: {
                normal: {
                    color: '#FF69B4'
                }
            }
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                formatter: '{c}%'
            },
            data:[30, 40, 50, 60, 70, 80, 90],
            itemStyle: {
                normal: {
                    color: '#32CD32'
                }
            }
        },
        {
            name:'视频广告',
            type:'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                formatter: '{c}%'
            },
            data:[40, 50, 60, 70, 80, 90, 100],
            itemStyle: {
                normal: {
                    color: '#FFA500'
                }
            }
        },
        {
            name:'搜索引擎',
            type:'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'insideRight',
                formatter: '{c}%'
            },
            data:[50, 60, 70, 80, 90, 100, 110],
            itemStyle: {
                normal: {
                    color: '#9932CC'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

注意：

- 需要设置 `xAxis` 的 `type` 为 `value`，并设置 `max` 和 `min` 的值为 0 和 100。
- 需要设置 `label` 的 `formatter` 属性为 `{c}%`，以显示百分比。
- 需要设置 `grid` 的 `containLabel` 属性为 `true`，以确保柱状图不会超出容器范围。