Skip to content

带搜索的折线图

常规使用

</>

参数

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

事件

事件名介绍参数
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
changeAfter当搜索条件发生变化时触发,返回包含变动字段名称和变动值的对象val: { props:'', value: '' }

接口数据结构

接口数据结构与基础图表一致

json
{
    xAxis: ['1周', '2周', '3周', '4周', '5周', '6周', '7周'],
    series: [
        {
            name: 2023,
            data: [1.76, 1.03, 1.1, 1.09, 0.08, 1.09, 1.1],
        },
        {
            name: 2024,
            data: [1.6, 1.28, 1.37, 1.01, 1.13, 1.14, 1.13],
        },
    ],
    row: [
        {
            week: '1',
        },
        {
            week: '2',
        },
        {
            week: '3',
        },
        {
            week: '4',
        },
        {
            week: '5',
        },
        {
            week: '6',
        },
        {
            week: '7',
        },
    ],
    msgTitle: '计算方法',
    msg: '研发人效指数=单位时间内项目标准工时/单位时间内项目申报工时',
}

v-echarts-ui design by Vivien