echarts 横向柱状图 且y轴刻度名称显示在柱子的上方 值显示在柱子的右方

ECharts是一款非常强大的JavaScript数据可视化库，可以创建各种图表，包括横向柱状图（Bar Chart in horizontal orientation）。要设置y轴刻度名称显示在柱子上方，值显示在柱子右侧，你可以按照以下步骤配置：

1. 首先，在HTML中引入ECharts的库文件：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2. 然后，在JavaScript中初始化图表并指定配置：

let myChart = echarts.init(document.getElementById('chart'));

// 配置选项
var option = {
    type: 'bar', // 柱状图类型
    xAxis: { // x轴（横坐标）
        type: 'category', // 类别轴
        data: ['A', 'B', 'C', 'D', 'E'], // 刻度标签
    },
    yAxis: { // y轴（纵坐标）
        type: 'value', // 数值轴
        splitLine: { // 分割线
            show: false // 隐藏分割线，让刻度名称直接显示
        },
        name: '名称', // y轴标题
        nameTextStyle: { // 名称文字样式
            position: 'top inside', // 放置在柱子上方
            verticalAlign: 'middle' // 文字居中
        },
        axisLabel: { // 标签样式
            formatter: function(value) { // 显示每个柱子的值
                return value + '值';
            },
            position: 'right' // 文字放在柱子右侧
        }
    },
    series: [
        {
            name: '数据',
            data: [12, 23, 34, 45, 56], // 数据点
            barWidth: '30%', // 柱子宽度
            label: { // 标签
                show: true,
                position: 'top right', // 标签位置
            }
        }
    ]
};

// 设置并展示图表
myChart.setOption(option);