|
|
@@ -1,121 +1,87 @@
|
|
|
-## vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
|
|
|
-效果如下所示：
|
|
|
+# 仿钉钉流程图
|
|
|
+#### 仿钉钉流程图 Api包括：一维数组传参，获取单节点数据，返回所有节点组成的一位数组 生成每个节点的父节点Id集合
|
|
|
+<p>
|
|
|
+ 很多公司后台管理系统都需要画流程图，功能大同小异，所以，仿照钉钉管理系统 花了一个流程图
|
|
|
+ 效果如下
|
|
|
+ <img src="./flow.png">
|
|
|
+</p>
|
|
|
+ 以下为此插件 入口与出口的数据结构，暴露的事件以及公共类所在目录及修改方式 （小部分需要修改源代码，不难找，有问题可以call我）
|
|
|
|
|
|
-<img src="https://img-blog.csdnimg.cn/20201004170925190.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW9sdW50aWFu,size_16,color_FFFFFF,t_70#pic_center"/>
|
|
|
+#### 入口数据格式
|
|
|
|
|
|
-### 参考文档：
|
|
|
-[这是参考的文档](https://www.jianshu.com/p/c816d242e261)
|
|
|
-
|
|
|
-### 起因：
|
|
|
-最近有朋友有需求需要用echarts，在地图上显示柱状图，并添加点击事件，网上有demo,但是比较老，用原生html+js写的，并且是非组件性质，使用起来并不友好，故而，写了这个echarts组件
|
|
|
+整个流程图分为四种节点 分别为 root end row(占一整行) col(列元素)
|
|
|
+```javascript
|
|
|
+ class rootNode{
|
|
|
|
|
|
-[Git地址 开源不易 求star 谢谢了](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)
|
|
|
+ }
|
|
|
+ class rowNode{
|
|
|
+
|
|
|
+ }
|
|
|
+ class colNode{
|
|
|
+
|
|
|
+ }
|
|
|
+ class endNode{
|
|
|
+
|
|
|
+ }
|
|
|
+```
|
|
|
+传参进来的数据格式
|
|
|
+``` javascript
|
|
|
|
|
|
-### 配置文档：
|
|
|
-在git地址拉下代码 ，echarts 组件地址是 src\components\echarts
|
|
|
-
|
|
|
+// 生成流程图时会自动组装数据 除了造假数据之外可以不用关心
|
|
|
+Array<node>
|
|
|
+class Node {
|
|
|
+ id // 如果是开始节点请写死 "root" 节点id
|
|
|
+ groupId // 组ID
|
|
|
+ type // 1|2|3|4|5|6 开始，抄送 条件 审批 结束 流转至 配置性文件
|
|
|
+ title // "标题",
|
|
|
+ groupPid //如果col元素 会以他们的groupId虚拟一个包裹层，包裹层的groupId 是所包裹的所有col元素的groupPid
|
|
|
+ content // "显示内容",
|
|
|
+ isRow // 是否为行元素
|
|
|
+ isRoot // 是否是根节点
|
|
|
+ data // {}
|
|
|
+ pids //非必填 无需关心（因项目需求需要向后端解析上一关联节点需要） 目前只有在触发 subData()时生成
|
|
|
+}
|
|
|
+```
|
|
|
+暴露出去的数据格式 Array
|
|
|
|
|
|
-把组件放到自己项目里 正常引用
|
|
|
-
|
|
|
-使用方式
|
|
|
-
|
|
|
-默认是北京地图 数据自己胡乱写的， 实际应用的时候可按如下方式传参： 详情见demo
|
|
|
+``` JavaScript
|
|
|
+Array<node>
|
|
|
+class node {
|
|
|
|
|
|
-```html
|
|
|
-<echarts-demo
|
|
|
- :areaData="areaData"
|
|
|
- :option="option"
|
|
|
- :cityConfig="cityConfig"
|
|
|
- :areaItems="areaItems"
|
|
|
- ></echarts-demo>
|
|
|
+}
|
|
|
```
|
|
|
-传参格式 请参照如下配置
|
|
|
+暴露的方法
|
|
|
+``` javascript
|
|
|
+getResData() //获取所有节点组成的一维数组
|
|
|
+nodeChange(changeRes) // 当前节点发生变化时可手动去触发 //触发方式1.this.$refs.refsName.nodeChange(newNode) 2. 引入event-bus this.$emit('nodeChange',newNode)
|
|
|
+```
|
|
|
+暴露的事件
|
|
|
```javascript
|
|
|
-areaData : [{ //与业务结合
|
|
|
- {
|
|
|
- areaName: "丰县", // 地域名字
|
|
|
- DateItems: [ // 柱状图配置
|
|
|
- {
|
|
|
- title: "标题1", //柱状图 x轴标题名字
|
|
|
- value: "10" // 数值
|
|
|
- },
|
|
|
- {
|
|
|
- title: "标题2",
|
|
|
- value: "20"
|
|
|
- },
|
|
|
- {
|
|
|
- title: "标题3",
|
|
|
- value: "30"
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
-}],
|
|
|
-
|
|
|
-option: {
|
|
|
- backgroundColor: "#02AFDB",
|
|
|
- tooltip: {},
|
|
|
- geo: {
|
|
|
- map: "徐州市",
|
|
|
- roam: true,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: "rgba(0,0,0,0.4)"
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- borderColor: "rgba(0, 0, 0, 0.2)"
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- areaColor: null,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowOffsetY: 0,
|
|
|
- shadowBlur: 20,
|
|
|
- borderWidth: 0,
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- colorList:[], // 每条柱子的颜色 传颜色数组 如["red","yellow","#F4E001"]
|
|
|
- areaItems: { 丰县: [116.59957, 34.69972] }, //需要填充的坐标 例如 网上有 可以自己去编辑
|
|
|
- cityConfig: {
|
|
|
- name: "徐州市",
|
|
|
- dataJson: mapJson // 你自己下载的地域json
|
|
|
- },
|
|
|
+@clickNode // 点击当前节点时触发 返回当前节点
|
|
|
```
|
|
|
+基本所有的功能都能实现了，抽屉部分 每个公司里面的东西不一样，点击节点之后拿到数据自己去写吧。
|
|
|
|
|
|
-### 由于各公司业务不同，需要用到不同的地图，以下是地图修改的方式
|
|
|
-方法一： 在网上下载相应地区的json [这里是下载地址](https://blog.csdn.net/xingchen678/article/details/100928135)
|
|
|
-#### 详情见[DEMO](https://gitee.com/xiaoyaoluntian/imitating-dingding-flow-chart/tree/comdemo/)中echartDemo页面
|
|
|
-懒得看git的同学请继续看，我尽量描述的详细些
|
|
|
-1. 在[这里](https://blog.csdn.net/xingchen678/article/details/100928135)下载地图geoJson把后缀改成.json
|
|
|
-2. 在项目中引入
|
|
|
-```javascript
|
|
|
-let mapJson = require("./json/xuzhou.json");
|
|
|
-cityConfig: {
|
|
|
- name: "徐州市",
|
|
|
- dataJson: mapJson
|
|
|
- },
|
|
|
+// 到这儿 已经可以用了 更加详细的配置 之后再写
|
|
|
+
|
|
|
+## Project setup
|
|
|
+```
|
|
|
+yarn install
|
|
|
```
|
|
|
-3. 当作参数传进组件
|
|
|
- ```html
|
|
|
- <echarts-demo
|
|
|
- :areaData="areaData"
|
|
|
- :option="option"
|
|
|
- :cityConfig="cityConfig"
|
|
|
- :areaItems="areaItems"
|
|
|
- ></echarts-demo>
|
|
|
- ```
|
|
|
|
|
|
-方法二：1.进入到 src\components\echarts\echartsSimple.vue 页面
|
|
|
-修改以下引入方式
|
|
|
-2.修改option中 map相对应的名字
|
|
|
-
|
|
|
-以上就是一个开箱即用的echarts简单组件，之后会维护 自定义样式，标题，等功能，如有需要请点赞留言，非常感谢，开源不易 求star 谢谢了
|
|
|
+### Compiles and hot-reloads for development
|
|
|
+```
|
|
|
+yarn serve
|
|
|
+```
|
|
|
|
|
|
+### Compiles and minifies for production
|
|
|
+```
|
|
|
+yarn build
|
|
|
+```
|
|
|
|
|
|
+### Lints and fixes files
|
|
|
+```
|
|
|
+yarn lint
|
|
|
+```
|
|
|
|
|
|
+### Customize configuration
|
|
|
+See [Configuration Reference](https://cli.vuejs.org/config/).
|
xiaoyang