Ø 在datavConfig.js文件的对应位置添加组件模板数据
以下以动态环图为例(目前datav的组件以全部添加,后续datav官网扩展组建后会涉及到对应扩展):
模板数据中的基本必要属性结构:
1. {
2. type: 'chart',//图表类型
3. name: '折线图',//图表中文名称
4. alias: 'line',//图表别名
5. height: 220,//图表高度初始值
6. width: 300,//图表宽度初始值
7. x: 10,//x坐标初始值
8. y: 10,//y坐标初始值
9. zIndex: 1,//图层初始值
10. state:1,//关联元素key,处理数据变化时控件刷新
11. icon: require("@/assets/img/datav/icon-line.png"),//图表组件图标
12. desc:'',//图表备注
13. options: {
14. dataFrom:'database',//图表外部数据来源(默认为database,来源于关联查询)
15. dataAlias:'',//关联查询别名
16. xField:{alias:'',desc:'',dbType:'varchar'},//x坐标字段,以图表实际结构为准
17. yField:[],//y坐标字段,以图表实际结构为准
18. designApply: false,//设计时应用数据模型配置
19. refresh:{//定时刷新
20. on: false,
21. rate:5,
22. rule:'second',
23. },
24. tipFormatter:'{c}',//tooltip :formatter
25. config:{}//datav组件数据
26. }
27. },
Ø 在DatavConfigPanel.vue文件中添加属性设置代码
主要是样式和数据属性设置
Ø 在DatavChartsBuild.js中添加解析options数据逻辑代码
Ø 在DesignDatavItem.vue文件中引入组件
Ø 在预览及front应用端引入
Manage预览文件中引入:
Front端预览文件中引入: