gitlab相关功能与使用介绍

http://gitlab.10jqka.com.cn/datav/gitlabIntroduce 欢迎在issue中，多多沟通交流

线上demo

http://datav.iwencai.com/

测试环境demo 172.19.80.181 qadatav.iwencai.com

demo项目gitlab 地址 http://gitlab.10jqka.com.cn/datav/chartPlatform

命令

• 安装 npm install 静待所有包安装完成..............
• 开发 npm start， 访问 http://localhost:8080/demo/xxx.html
• 打包 npm run build
• 文档 npm run docs

创建新图表/组件

1. 在src/chart或src/component目录下新建文件夹，如src/chart/example；
2. 每个图表/组件至少包含两个文件（ExampleModel.js和index.js，如有视图需要渲染则还需要ExampleView.js），在src/chart/example目录下新建三个js文件，分别命名为ExampleModel.js、ExampleView.js以及index.js;
3. 首先编写src/chart/example/ExampleModel.js；
   • 图表类型继承src/model/Series，组件类型继承src/model/Component；
   • 同时为静态属性和实例属性添加type属性，同图表/组件类型名称；
   • 如有需要为图表/组件Model添加update方法，用于绘图数据准备计算；
   • 通过设置ExampleModel的defaultOption属性为图表/组件添加默认参数,或直接用static声明为静态属性；
4. 然后编写src/chart/exampleExampleView.js；
   • 图表类型继承src/view/Chart，组件类型继承src/view/Component；
   • 同时为静态属性和实例属性添加type属性，同图表/组件类型名称以及对应Model的type属性；
   • 如有需要为图表/组件View添加render方法，用于数据更新后的视图渲染；
   • 建议使用继承自src/util/ShapeStorage的setShape和setShapeGroup方法创建相关shape，详见方法注释；
   • 有View必须有对应的Model，Model不一定需要View；
5. 再在src/chart/example/index.js中进行图表/组件Model和View的注册，通过registerComponent方法；
6. 最后在src/index.js中引用该图表/组件模块, 对应的调用页面见demo/examplechart.html;

约定

1. 在配置参数中，某组件对依赖其他组件的参数名使用$为前缀，目前只支持使用Index进行指定依赖，例如 $dataIndex、$[依赖的组件名]Index、$xxxIndex

2. 若创建的图表需要使用legend组件，data的格式规则：

   • data若为对象，则应包含名为values、value或data的属性，该属性可以为数组或对象，每一项需指定name属性，或者直接指定name；

   • 若为数组，每一项需指定name属性，同对象格式下的values；

     示例如下：

       {
           min: 0,
           max: 100,
           title: '互联网服务与终端',
           values: [
               { value:  100, name: 'item1', color: '#0092ff'},
               { value:  120, name: 'item2', color: '#fe2d8d'},
               { value:  200, name: 'item3', color: '#fbe44b'},
               { value:  500, name: 'item4', color: '#02c0c9'},
           ]
       }

     或者

       {
           value:  100, 
           name: 'item1', 
           color: '#0092ff'
       }

     或者

       [
           { value:  100, name: 'item1', color: '#0092ff'},
           { value:  120, name: 'item2', color: '#fe2d8d'},
           { value:  200, name: 'item3', color: '#fbe44b'},
           { value:  500, name: 'item4', color: '#02c0c9'},
       ]

3. 若创建的图表需要使用tooltip组件，且由item触发tooltip显示时，则在render方法内创建shape时，对于需要触发tooltip的shape添加seriesIndex属性，以及dataIndex属性或name属性，用于寻找shape对应的数据项，dataIndex适用于数组类型的data，name适用于对象类型的data；

利用zrender构建自己想要的形态：

1. 在src/shape目录下创建一个js文件，比如：Circle.js。
2. 在Circle.js中引入“zrender/lib/graphic/Path”，Path作为扩展函数进行形态扩展。
3. 编写Circle.js：
   • ①指定type类型，命名自定义，比如type：“circle”。
   • ②设置shape对象，在shape中设定画形状时所必要的参数，比如画一个圆，需要圆心横坐标x、圆心纵坐标y、圆半径r、起始弧度startRad、结束弧度endRad以及顺逆时针方向anticlockwise。 所以shape对象中包含着五个参数（x、y、r、startRad、endRad、anticlockwise)。
   • ③定义buildPath方法，传入shape中定义的参数至该方法中，进行路线规划，比如画一个圆，用canvas底层方法arc进行绘制。（在此方法中只能写关于路径的canvas底层方法，比如lineTo方法、moveTo方法、arcTo方法等等，而旋转、平移、变形、填充颜色、开始路径等方法在zrender中已经封装完成。）
4. 补充：
   • ①除了引入zrender中的Path,可任意引入自己需要的方法来完成形态的设计。
   • ②除了要指定type类型、shape参数和buildPath方法外，还可以扩展一些其他的方法来帮助形态的实现。