Skip to content

条形图

常规使用

</>

参数

参数名介绍类型
id图表IDString
height图表高度String
width图表宽度String
showCheckbox是否显示CheckBoxBoolean
showTips是否显示消息提示Boolean
className图表样式名String
optionsecharts 配置选项Object
dataecharts 绑定数据Object
paramsecharts 配置参数Object
loading加载图表时是否显示loadingBoolean

params

属性名介绍类型
showToolBox是否显示工具栏Boolean
isCross柱状图是否为横向Boolean
dataset源数据是否为 dataset 格式Boolean
showAverage是否显示平均线Boolean
stackLabel指定堆叠标识,相同 label 的图形堆叠在一起Array
stackIndex堆叠图形下标值Array

事件

事件名介绍参数
chart-click点击图表(非图例、提示框等辅助元素)时触发params
chart-dblclick双击图表时触发params
chart-mousedown鼠标按钮在图表上被按下时触发params
chart-mousemove鼠标在图表区域内移动时触发params
chart-mouseup鼠标按钮在图表上释放时触发params
chart-mouseover鼠标移动到图表上某个元素上时触发params
chart-mouseout鼠标离开图表上某个元素时触发params
chart-globalout鼠标完全离开图表区域时触发params
chart-contextmenu在图表上触发右键点击时(通常用于打开上下文菜单)触发params
chart-legendselectchanged图例中的某个系列(series)的选中状态发生变化时触发params

接口数据结构

json
{
    xAxis: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
    ],
    series: [
        {
            name: 2023,
            data: [0.97, 0.97, 1.03, 1.05, 1.05, 1.07, 1.08, 1.09, 1.1, 1.12, 1.14, 1.16],
        },
        {
            name: 2024,
            data: [1.08, 1.11, 1.14, null, null, null, null, null, null, null, null, null],
        },
    ],
    row: [
        {
            month: '2024-01',
        },
        {
            month: '2024-02',
        },
        {
            month: '2024-03',
        },
        {
            month: '2023-04',
        },
        {
            month: '2023-05',
        },
        {
            month: '2023-06',
        },
        {
            month: '2023-07',
        },
        {
            month: '2023-08',
        },
        {
            month: '2023-09',
        },
        {
            month: '2023-10',
        },
        {
            month: '2023-11',
        },
        {
            month: '2023-12',
        },
    ],
    msg: '研发人效指数=单位时间内关闭NPI项目的总标准工时/上述项目的全期间申报工时',
};

v-echarts-ui design by Vivien