{ tooltip: {}, legend: { show: false }, xAxis: { show: false }, yAxis: { data: ['a', 'b', 'c', 'd'], axisTick: { show: false }, axisLine: { show: false } }, series: [ { name: '警情数', type: 'bar', data: [ { value: 19, label: '+3', index: 1 }, { value: 23, label: '-2', index: 0 }, { value: 27, label: '+9', index: 1 }, { value: 34, label: '+5', index: 1 } ], label: { normal: { show: true, position: 'right', formatter: function (params) { return ( '{percent|' + params.value + '起}' + (params.data.index == 1 ? '{title1|' + params.data.label + '}' : '{title2|' + params.data.label + '}') ); } } }, itemStyle: { normal: { color: function (params) { return '#479DFF'; } } } // barWidth:, } ], grid: { containLabel: true } }

这段代码使用 ECharts 绘制了一个水平柱状图。具体实现如下：

option = {
    tooltip: {},  // 提示框
    legend: {
        show: false  // 不显示图例
    },
    xAxis: {
        show: false  // 不显示 x 轴
    },
    yAxis: {
        data: ['a', 'b', 'c', 'd'],  // y 轴数据
        axisTick: {
            show: false  // 不显示 y 轴刻度线
        },
        axisLine: {
            show: false  // 不显示 y 轴线
        }
    },
    series: [
        {
            name: '警情数',
            type: 'bar',
            data: [
                { value: 19, label: '+3', index: 1 },
                { value: 23, label: '-2', index: 0 },
                { value: 27, label: '+9', index: 1 },
                { value: 34, label: '+5', index: 1 }
            ],
            label: {
                normal: {
                    show: true,  // 显示标签
                    position: 'right',  // 标签显示在右侧
                    formatter: function (params) {
                        return (
                            '{percent|' +  // 百分号
                            params.value +  // 数据项的值
                            '起}' +
                            (params.data.index == 1
                                ? '{title1|' + params.data.label + '}'  // 加号标签
                                : '{title2|' + params.data.label + '}')  // 减号标签
                        );
                    },
                    rich: {
                        // 使用富文本样式
                        percent: {
                            color: '#666',
                            fontSize: 14
                        },
                        title1: {
                            color: '#F00',
                            backgroundColor: '#FAECEC',
                            padding: [0, 2],
                            fontSize: 14,
                            borderRadius: 2
                        },
                        title2: {
                            color: '#0F0',
                            backgroundColor: '#EAFEEC',
                            padding: [0, 2],
                            fontSize: 14,
                            borderRadius: 2
                        }
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: function (params) {
                        return '#479DFF';  // 柱状图颜色
                    }
                }
            }
        }
    ],
    grid: {
        containLabel: true  // 包含标签在内的所有内容都绘制在网格中
    }
};

在这个示例中，`xAxis` 和 `legend` 都设置为不显示。`yAxis` 中的 `data` 属性设置为 `['a', 'b', 'c', 'd']`，表示 y 轴的标签。`series` 中的 `type` 属性设置为 `'bar'`，数据项通过 `data` 属性进行设置，其中每个数据项包含了 `value`、`label` 和 `index` 三个属性。`label` 属性中的 `formatter` 函数将显示在柱状图的右侧，通过 `{percent|}`、`{title1|}` 和 `{title2|}` 等富文本样式来分别设置百分号、加号标签和减号标签的样式。`itemStyle` 属性中的 `color` 函数设置柱状图的颜色为 `#479DFF`。`grid` 属性中的 `containLabel` 属性设置为 `true`，表示包含标签在内的所有内容都绘制在网格中。