图表

## chart
### 代码演示
<div class="textDiv">
<button style="border: 0.5px solid #dddddd;padding: 2px 10px; display: inline-block; text-align: center;">查询数据</button>
<button style="border: 0.5px solid #dddddd;padding: 2px 10px; display: inline-block; text-align: center;">render</button>
<br/>
<br/><br/><br/><br/>

------------
数据维护: 新增、删除、修改 && personStore

------------
代码示例如下
```html
<template>
    <div>
        <el-button size="mini" @click="query">查询数据</el-button>
        <el-button size="mini" @click="render">render</el-button>
        <div style="height:300px;width:50%">
       <hi-chart ref="chart" :dataSource="deptStore" :opts="opts" :options="options" @click="chartClickFn"></hi-chart>
       </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                models:[
            {
                "fid": "B28B0D37-7130-26A9-D0CE-29E78238A1ED",
                "note": "2-2",
                "fguid": "34EDBC88-75C5-C4AD-FDBE-4D630185743F",
                "name": "2-2"
            },
            {
                "fid": "06E3AA24-3F3B-173C-E6EE-0E23E8311A38",
                "note": "1-1",
                "fguid": "7AB49D1F-513C-D554-3B3A-4A84AB3CF733",
                "name": "1-1",
                "leaf": true
            },
            {
                "fid": "7AB49D1F-513C-D554-3B3A-4A84AB3CF733",
                "note": "1-1-1",
                "fguid": "C099311C-C4C2-500E-2872-2A3B7F8BB4D4",
                "name": "1-1-1"
            }
        ],

options:{
                     toolbox: {
                        feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ["line", "bar"] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                        }
                    },
                },
                opts :{

legend:{show:false},
    "xAxis":[{
        "type": "category",
        "fieldName":"FGUID",
        "data": [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun"
        ]
    }],
    "yAxis": {
        "type": "value"
    },
    "series": [
        {
            // "data": [
            //     120,
            //     200,
            //     150,
            //     80,
            //     70,
            //     110,
            //     130
            // ],
            center: ["25%", "50%"],
            "type": "line",
            "fieldName":"FTIME",
            "name":"FNUMBER",
            "showBackground": true,
            "backgroundStyle": {
                "color": "rgba(180, 180, 180, 0.2)"
            }
        },{
            center: ["75%", "50%"],
            "type": "bar",
            "fieldName":"FTIME",
            "name":"FGUID",
        }
    ]
},
                dsContainer: null,
                //部门数据集实例
                deptStore: null,
                //部门数据集配置
                deptCfg: {
                    modelFile: "eap5csxm.pro/23391CeShi.dir/CeShiZhengTi.moduledir/dataset.datadir/JiaBanDengJi.bizstore|jas226gf.BizEntity~_extFile",
                    //数据集配置  部门
                    id: "dept",
                    //主键
                    primary: ["id"],
                    //操作权限
                    operations: ["oinsert", "odelete", "oquery", "omodify"],
                    //字段顺序,自动填充的顺充
                    sortFields: ["id", "name"],

fields: {
                        fguid: {
                            name: "fguid", //字段ID
                            label: "fguid", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,
                            readonly: true,
                            length: 50,
                            rules: [],
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + new Date().valueOf()
                                },
                            },
                        },
                        id: {
                            name: "id", //字段ID
                            label: "部门ID", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,
                            readonly: true,
                            length: 50,
                            rules: [],
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + new Date().valueOf()
                                },
                            },
                        },
                        desc: {
                            name: "desc", //字段ID
                            label: "部门描述", //字段描述
                            dbtype: "dbString", //数据类型
                            fireTarget: ["name"],
                            validateList: [{
                                "expr": function(value, store, data) {
                                    //throw new Error("出错了")
                                }
                            }],

length: 10,
                        },
                        totalDesc:{
                            name: "totalDesc", //字段ID
                            label: "汇总子部门", //字段描述
                            dbtype: "dbString", //数据类型
                            //redundant:true,
                            readonly:true,
                        },
                        name: {
                            name: "name", //字段ID
                            label: "部门名称", //字段描述
                            length:50,
                            dbtype: "dbString", //数据类型
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + (data.desc || data.id);
                                },
                            },
                        },
                        updateTime: {
                            name: "updateTime", //字段ID
                            label: "更新时间", //字段描述
                            dbtype: "dbDatetime", //数据类型
                        },
                    },
                },
                //部门数据集实例
                personStore: null,
                //人员数据集配置
                personCfg: {
                    modelFile: "person.xml",
                    relation: {
                        //parentId:"dept"
                        selfField: ["id","FNUMBER"],
                        parentField: ["id","FC1"]
                    },
                    //数据集配置  部门
                    id: "person",
                    //主键
                    primary: ["id"],
                    //操作权限
                    operation: ["insert", "delete", "query", "modify"],
                    //字段元素
                    element: {
                        eleSort: {
                            field: "FSORT",
                        },
                        eleNumber: {
                            field: "FNUMBER"
                        }
                    },
                    //字段顺序,自动填充的顺充
                    sortFields: ["id", "name"],
                    fields: {
                        id: {
                            name: "id", //字段ID
                            label: "部门ID", //字段描述
                            dbtype: "dbString", //数据类型

default: {
                                //默认值
                                rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "人员" + new Date().valueOf();
                                },
                            },
                        },
                        desc: {
                            name: "desc", //字段ID
                            label: "部门1111", //字段描述
                            dbtype: "dbString", //数据类型
                            fireTarget: ["name"],
                             default:{
                                exps: (data) => {
                                    //填充表达式
                                    return 9;
                                },
                            },
                            summaryUpdates:[{
                                summaryType:"sum",
                                targetEntity:"dept",
                                targetField:"totalDesc"
                            }]
                        },
                        totalDesc:{
                            name: "totalDesc", //字段ID
                            label: "汇总部门", //字段描述
                            dbtype: "dbString", //数据类型
                            redundant:true,
                        },
                        name: {
                            name: "name", //字段ID
                            label: "部门名称", //字段描述
                            dbtype: "dbString", //数据类型
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + data.desc || data.id;
                                },
                            },
                        },
                        updateTime: {
                            name: "updateTime", //字段ID
                            label: "更新时间", //字段描述
                            dbtype: "dbDatetime", //数据类型
                        },
                    },
                },
            };
        },
        methods: {
            render(){
                this.opts.series.pop();
                this.$refs.chart.refreshData([]);
            },
            addMasterSlave(){
                let data=[
                    {
                        id:(new Date()).valueOf(),
                        desc:"主表部门",
                        person:[
                            { 
                                id:(new Date()).valueOf(),
                                desc:20
                            }
                        ]
                    },
                    {
                        id:(new Date()).valueOf()+"mm",
                        desc:"主表部门1",
                        person:[
                            { 
                                id:(new Date()).valueOf()+"mm",
                                desc:10
                            },
                             {  id:(new Date()).valueOf()+"mm",
                                desc:30,
                            }
                        ]
                    }
                ]
                this.deptStore.add(data);
                console.log(this.deptStore.curRecord)
            },
            setMasterSlave1(){
                 this.deptStore.models[0].set({
                        id:"11111",
                        desc:"主表部门2",
                        person:[
                            { id:"99",
                            desc:99,},
                             { id:(new Date()).valueOf()+"2",
                            desc:10,}
                        ]
                    },{childrenClear:true})
                    
                    console.log(this.deptStore.getSavePack())
            },
            setMasterSlave(){
                let data=[
                    {
                        id:"11111",
                        desc:"主表部门",
                        person:[
                            { id:"99",
                            desc:20,}
                        ]
                    },
                    {
                        id:(new Date()).valueOf()+"mm",
                        desc:"主表部门1",
                        person:[
                            { id:(new Date()).valueOf()+"mm",
                            desc:10},
                             { id:(new Date()).valueOf()+"mm",
                            desc:30,}
                        ]
                    }
                ]
                this.deptStore.setData(data);
                console.log(this.deptStore.curRecord)
            },
            //从表删除
            subremove() {
                let curData = this.personStore.curRecord
                if (curData) {
                    this.personStore.remove(curData)
                }
            },
            subpush(){
                this.personStore.data.hiPush({})
            },
            setData() {

},
            query() {
                console.log(this.deptStore.createEmptyData());
                this.deptStore.load();
            },
            //添加数据
            addData() {
                let val = new Date().valueOf();
                this.deptStore.add({
                    // name: val,
                    desc: "34"
                });
                //this.deptStore.data.hiPush({name:val+"1"},{name:val+"2"})
                this.showData();
            },
            push() {
                let val = new Date().valueOf();

this.deptStore.data.hiPush({
                    name: val + "push1",
                }, {
                    name: val + "push2",
                });
            },
            unshift() {
                let val = new Date().valueOf();
                this.deptStore.data.hiUnshift({
                    name: val + "unshift1",
                }, {
                    name: val + "unshift2",
                });
            },
            pop() {
                this.deptStore.data.hiPop();
            },
            shift() {
                this.deptStore.data.hiShift();
            },
            splice() {
                let val = new Date().valueOf();
                this.deptStore.data.hiSplice(
                    1,
                    1, {
                        name: val + "splice1",
                    }, {
                        name: val + "splice2",
                    }
                );
            },
            //修改数据
            editData() {
                let val = this.deptStore.curRecord.name;
                this.deptStore.curRecord.name = val + 1;
                this.showData();
            },
            editDesc() {

this.deptStore.curRecord.desc = "abc";
                this.showData();
            },
            //修改数据
            editData1() {
                let curModel = this.deptStore.getCurModel();
                let editData = Object.assign({}, curModel.data);

this.deptStore.curRecord.name = "asfdasdf";
                this.deptStore.clearUp();

editData.name = new Date().valueOf();
                curModel.set(editData);
                this.showData();
            },
            //删除数据
            delData() {
                let val = this.deptStore.curRecord;
                this.deptStore.remove(this.deptStore.models)
                //this.deptStore.remove(val);
                this.showData();
            },
            //保存
            save() {
                this.deptStore
                    .save()
                    .then((res) => {
                        console.log(res);
                    })
                    .catch((res) => {
                        console.log(res);
                    });
            },
            clearUp() {
                this.deptStore.clearUp();
                this.deptStore.remove(this.deptStore.first());
                this.deptStore.save();
            },
            //还原
            reset() {
                this.deptStore.reset();
                this.showData();
            },
            chartClickFn(_this,param){
console.log(param)
            },
            addSubData() {

this.personStore.add({})
            },
            // 显示数据
            showData() {
                var data = this.deptStore.data;
                console.log(JSON.parse(JSON.stringify(data)));
            },
            _adjustOrderTest() {
                let configs = [{
                        "id": "a",

},
                    {
                        "id": "b",

}, {
                        "id": "c"
                    }, {
                        "id": "d",
                        "relation": {
                            "parentId": "e",

},
                    },
                    {
                        "id": "e",
                        "relation": {
                            "parentId": "f",

},
                    },
                    {
                        "id": "f",
                    }
                ]

let orderConfigs = this.$dsContainer._adjustOrder(configs);
            }
        },
        created(){
            this.deptStore = this.$dsContainer.createDataSet(this.deptCfg);
        },
        mounted() {
            this._adjustOrderTest();

this.deptStore.on("fieldvalidateerror", function(value, store, model, rule) {

})
           // this.personStore = this.$dsContainer.createDataSet(this.personCfg, this.deptStore);
            // this.deptStore = this.$dsContainer.createDataSet({
            //     modelFile: "entity",
            //     sortFields: ["id","name"],
            // });

this.deptStore.on("beforesave", (store, options) => {

//store.cancel=true;
            });

this.deptStore.on("beforeadd", (data, store) => {
                console.log("beforeadd");
                console.log(data);
                console.log(store);
            });

this.deptStore.on("afteradd", (data, store) => {
                console.log("afteradd");
                console.log(data);
                console.log(store);
            });
            this.deptStore.on("dirtychange", (store, dirty) => {

});
        },
    };
</script>
```

</div>

### Attributes

| 参数         | 说明  | 类型     | 可选值 | 默认值 |
|------------|-----|--------|-----|-----|
| dataSource | 数据集 | Object |     |     |
| height     | 高度  | String |     |     |
| opts       | 配置项 | Object |     |     |
| theme      | 皮肤  | String |     |     |
| options    | 配置项 | Object |     |     |

详细 API 请<a href="https://doc.hieap.cn/web/#/8?page_id=933">查看 API 文档</a>

</style>