kre-form/dist/@kre-form/abc/src/lib/board/kre-form-abc-src-lib-board.metadata.json

本项目由 Angular8+ 编写的表单设计器和表单应用，所有的配置都是 JSON 结构体组成,PC 端是基于 ANT 组件库封装

{"__symbolic":"module","version":4,"metadata":{"BoardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"demo-board","template":"<div class=\"header\">\n  <button nz-button nzType=\"link\" (click)=\"saveFinalObj()\" class=\"btn-text\">\n    保存数据\n  </button>\n</div>\n<div class=\"wrap\" cdkDropListGroup>\n  <div class=\"sider\">\n    <div class=\"sider-title\">\n      数据源\n      <button\n        nz-button\n        nzType=\"link\"\n        class=\"btn-text\"\n        (click)=\"changeData($event)\"\n      >\n        更改数据源\n      </button>\n    </div>\n    <hr />\n    <div *ngIf=\"dataSourceItem\">\n      <div class=\"sider-title\">\n        <h4>字段</h4>\n        <button\n          nz-button\n          nzType=\"link\"\n          class=\"btn-text\"\n          style=\"font-size: 1rem\"\n        >\n          <i class=\"icon-time\"></i>\n        </button>\n      </div>\n      <p>\n        <i\n          style=\"font-size: 1rem; color: deepskyblue; margin-right: 1rem\"\n          class=\"icon-DuoJiLuQu\"\n        ></i>\n        {{ dataSourceItem.title }}\n      </p>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"dataSourceItem.columns\"\n        (cdkDropListDropped)=\"drop($event)\"\n      >\n        <div\n          class=\"data-list\"\n          *ngFor=\"let item of dataSourceItem.columns\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStarted()\"\n          (cdkDragEnded)=\"dragEnded()\"\n        >\n          <i class=\"icon-Edit03\"></i>{{ item.title }}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"main\">\n    <div\n      id=\"row\"\n      class=\"main-list\"\n      [ngClass]=\"isLight ? 'main-list-hover' : ''\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      [cdkDropListData]=\"term.row\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      <div class=\"title\">维度</div>\n      <!--维度（行） -->\n      <div\n        *ngFor=\"let item of term.row; let i = index\"\n        cdkDrag\n        class=\"drag-list\"\n        (mouseenter)=\"hover(item, 'on')\"\n        (mouseleave)=\"hover(item, 'off')\"\n      >\n        <div nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\">\n          <i class=\"icon-KT-Down\"></i>\n          <span>{{ item.title }}</span>\n        </div>\n        <i\n          [ngClass]=\"item.closeBtn == 'on' ? 'on' : 'off'\"\n          (click)=\"closeLabel(term.row, i)\"\n          class=\"icon-KT-Close\"\n        ></i>\n      </div>\n    </div>\n\n    <div\n      id=\"target\"\n      class=\"main-list\"\n      [ngClass]=\"isLight ? 'main-list-hover' : ''\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      [cdkDropListData]=\"term.target\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      <div class=\"title\">指标</div>\n      <div\n        *ngFor=\"let item of term.target; let i = index\"\n        cdkDrag\n        class=\"drag-list target-list\"\n        (mouseenter)=\"hover(item, 'on')\"\n        (mouseleave)=\"hover(item, 'off')\"\n      >\n        <div nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\">\n          <i class=\"icon-FenGeXian\"></i>\n          <span>{{ item.title }}</span>\n        </div>\n        <i\n          [ngClass]=\"item.closeBtn == 'on' ? 'on' : 'off'\"\n          (click)=\"closeLabel(term.target, i)\"\n          class=\"icon-KT-Close\"\n        ></i>\n      </div>\n    </div>\n\n    <div\n      id=\"condition\"\n      class=\"main-list\"\n      [ngClass]=\"isLight ? 'main-list-hover' : ''\"\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      [cdkDropListData]=\"term.condition\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      <div class=\"title\">过滤条件</div>\n      <div\n        *ngFor=\"let item of term.condition; let i = index\"\n        cdkDrag\n        class=\"drag-list condition-list\"\n        (mouseenter)=\"hover(item, 'on')\"\n        (mouseleave)=\"hover(item, 'off')\"\n      >\n        <div nz-dropdown nzTrigger=\"click\" [nzDropdownMenu]=\"menu\">\n          <i class=\"icon-FenGeXian\"></i>\n          <span>{{ item.title }}</span>\n        </div>\n        <i\n          [ngClass]=\"item.closeBtn == 'on' ? 'on' : 'off'\"\n          (click)=\"closeLabel(term.condition, i)\"\n          class=\"icon-KT-Close\"\n        ></i>\n      </div>\n    </div>\n    <div class=\"echarts-wrap\">\n      <nz-empty\n        [nzNotFoundContent]=\"contentTpl\"\n        *ngIf=\"\n          term.row.length <= 0 || term.target.length <= 0 || !chartCondition\n        \"\n      >\n        <ng-template #contentTpl>\n          <p *ngIf=\"term.row.length <= 0 || term.target.length <= 0\">\n            请选择维度和指标\n          </p>\n          <p *ngIf=\"!chartCondition\">请选择右侧图标类型</p>\n        </ng-template>\n      </nz-empty>\n      <div *ngIf=\"chartOptions\" style=\"height: 600px\">\n        <echart-dom\n          [option]=\"chartOptions\"\n          (echartClick)=\"echartClickHandler($event)\"\n        ></echart-dom>\n      </div>\n    </div>\n  </div>\n  <div class=\"right\">\n    <echart-options-dom\n      [colorList]=\"colorList\"\n      [echartsList]=\"echartsList\"\n      [(chartCondition)]=\"chartCondition\"\n      (echartOptionsChange)=\"getEchartOptions($event)\"\n      (echartShapeChange)=\"getEchartShape($event)\"\n    ></echart-options-dom>\n  </div>\n</div>\n\n<nz-dropdown-menu #menu=\"nzDropdownMenu\">\n  <ul nz-menu nzSelectable>\n    <li nz-menu-item>1st menu item</li>\n    <li nz-menu-item>2nd menu item</li>\n    <li nz-menu-item>3rd menu item</li>\n  </ul>\n</nz-dropdown-menu>\n","styles":[":host .header{height:60px;display:flex;justify-content:flex-end;align-items:flex-end}:host .wrap{background:#f4f6f9;display:flex;height:calc(100% - 60px)}:host .wrap .sider{padding:10px 0 0 15px;width:250px;border-right:1px solid #e9e9e9}:host .wrap .sider .btn-text{color:#0db3a6}:host .wrap .sider .data-list{cursor:pointer;font-size:12px;padding:10px 0;display:flex;flex-direction:row;align-items:center;box-sizing:border-box}:host .wrap .sider ul li{list-style:none;cursor:pointer;height:26px;line-height:26px}:host .wrap .sider .sider-title{display:flex;justify-content:space-between;align-items:baseline}:host .wrap .main{padding:10px 15px;flex-grow:1}:host .wrap .main ul li{list-style:none}:host .wrap .main .main-list{line-height:34px;background:#fff;position:relative;margin-bottom:10px;border:1px dashed #d9d9d9;border-radius:3px;display:flex;flex-direction:row;align-items:center}:host .wrap .main .main-list .title{display:inline-block;width:80px}:host .wrap .main .main-list .drag-list{cursor:pointer;border-radius:100px;color:#fff;background:#0db3a6;height:24px;line-height:24px;padding:0 10px 0 6px;margin:0 3px}:host .wrap .main .main-list .drag-list span{padding:0 4px}:host .wrap .main .main-list .drag-list .on{opacity:1}:host .wrap .main .main-list .drag-list .off{opacity:0}:host .wrap .main .main-list .target-list{background:#00bfff}:host .wrap .main .main-list .condition-list{background:#7fffd4}:host .wrap .main .echarts-wrap p{text-align:center}:host .wrap .main .main-list-hover{background-color:rgba(212,242,231,.4);border:1px dashed #0ff}:host .wrap .right{width:300px;padding-right:15px}.cdk-drag-preview{display:inline-block;box-sizing:border-box;background-color:#fff;width:80px;overflow:hidden;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}:host ::ng-deep hr{border:none;border-bottom:1px solid #eee}:host ::ng-deep .ant-select{width:100%}:host ::ng-deep .ant-dropdown-trigger{display:inline-block}"]}]}],"members":{"colorList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"echartsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"dataSourceItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"term":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"chartCondition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"chartOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"changeDataSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"changeEchartsParams":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ng-zorro-antd/message","name":"NzMessageService","line":41,"character":21},{"__symbolic":"reference","module":"ng-zorro-antd/modal","name":"NzModalService","line":42,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"editChartOptions":[{"__symbolic":"method"}],"getEchartShape":[{"__symbolic":"method"}],"getEchartOptions":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"dragStarted":[{"__symbolic":"method"}],"dragEnded":[{"__symbolic":"method"}],"hover":[{"__symbolic":"method"}],"changeData":[{"__symbolic":"method"}],"closeLabel":[{"__symbolic":"method"}],"saveFinalObj":[{"__symbolic":"method"}],"echartClickHandler":[{"__symbolic":"method"}]}},"BoardModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":32,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BoardComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"}],"imports":[{"__symbolic":"reference","module":"ng-zorro-antd/input-number","name":"NzInputNumberModule","line":35,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/grid","name":"NzGridModule","line":36,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/input","name":"NzInputModule","line":37,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/empty","name":"NzEmptyModule","line":38,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/modal","name":"NzModalModule","line":39,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/message","name":"NzMessageModule","line":40,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/button","name":"NzButtonModule","line":41,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/select","name":"NzSelectModule","line":42,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/checkbox","name":"NzCheckboxModule","line":43,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/radio","name":"NzRadioModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":45,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/tabs","name":"NzTabsModule","line":46,"character":4},{"__symbolic":"reference","module":"ng-zorro-antd/dropdown","name":"NzDropDownModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":48,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":49,"character":4}],"exports":[{"__symbolic":"reference","name":"BoardComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"}],"entryComponents":[{"__symbolic":"reference","name":"BoardComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"}],"providers":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"echart-options-dom","template":"<h2>图标类型</h2>\n<div class=\"chart-wrap\">\n  <ng-container *ngFor=\"let item of chartsType\">\n    <div (click)=\"choiceChart(item.type)\" class=\"chart-type\">\n      {{ item.title }}\n    </div>\n  </ng-container>\n</div>\n<ng-container *ngIf=\"currentChildChartsType\">\n  <div>{{ currentChildChartsType.title }}类型</div>\n  <div class=\"chart-wrap\">\n    <ng-container *ngFor=\"let item of currentChildChartsType.children\">\n      <div (click)=\"choiceSubChart(item.type)\" class=\"chart-type\">\n        {{ item.title }}\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"chartCondition\">\n  <nz-radio-group\n    [(ngModel)]=\"chartCondition.input.nzTabPosition\"\n    name=\"nzTabPosition\"\n  >\n    <label nz-radio-button [nzValue]=\"'setting'\">功能配置</label>\n    <label nz-radio-button [nzValue]=\"'style'\">组件样式</label>\n  </nz-radio-group>\n\n  <div *ngIf=\"chartCondition.input.nzTabPosition === 'setting'\">\n    <div *ngIf=\"chartCondition?.condition\">\n      <!-- 折线图 面积图 -->\n      <ng-container *ngIf=\"chartCondition?.condition.lineStyle\">\n        <h4>线条样式</h4>\n        <div>\n          <nz-radio-group\n            name=\"lineSmooth\"\n            [(ngModel)]=\"chartCondition.input.lineSmooth\"\n            (ngModelChange)=\"lineSmoothChange('event')\"\n          >\n            <label nz-radio nzValue=\"0\">普通</label>\n            <label nz-radio nzValue=\"1\">曲线</label>\n          </nz-radio-group>\n        </div>\n        <!-- <div>\n      标记点 <label nz-checkbox [(ngModel)]=\"checked\">显示数据标记点</label>\n    </div> -->\n        <hr />\n      </ng-container>\n      <ng-container *ngIf=\"chartCondition?.condition.x\">\n        <h4>坐标x轴</h4>\n        标签文字显示方向\n        <nz-select\n          [ngModelOptions]=\"{ standalone: true }\"\n          [(ngModel)]=\"chartCondition.input.xAxisrRotate\"\n          (ngModelChange)=\"xAxisrRotateChange($event)\"\n          nzAllowClear\n          nzPlaceHolder=\"Choose\"\n        >\n          <nz-option nzValue=\"0\" nzLabel=\"横向\"></nz-option>\n          <nz-option nzValue=\"90\" nzLabel=\"竖向\"></nz-option>\n          <nz-option nzValue=\"30\" nzLabel=\"左倾斜\"></nz-option>\n          <nz-option nzValue=\"-30\" nzLabel=\"右倾斜\"></nz-option>\n        </nz-select>\n\n        <div>\n          <label\n            nz-checkbox\n            name=\"axisLabelInterval\"\n            [(ngModel)]=\"chartCondition.input.axisLabelInterval\"\n            (ngModelChange)=\"intervalChange('event')\"\n            >强制显示所有标签</label\n          >\n        </div>\n\n        <hr />\n      </ng-container>\n      <h4>标题</h4>\n      <!-- <label\n        nz-checkbox\n        name=\"dataLabeChecked\"\n        [(ngModel)]=\"chartCondition.condition.title\"\n        (ngModelChange)=\"isShowTitle($event)\"\n        >显示标题</label\n      > -->\n      <ng-container>\n        <input\n          nz-input\n          placeholder=\"标题\"\n          name=\"title\"\n          [(ngModel)]=\"chartCondition.input.title\"\n          [ngModelOptions]=\"{ updateOn: 'blur' }\"\n          (ngModelChange)=\"titleChange($event)\"\n        />\n\n        <div>\n          <span class=\"label\">标题坐标X：</span>\n          <nz-input-number\n            [(ngModel)]=\"chartCondition.input.titleX\"\n            [nzMin]=\"0\"\n            [nzMax]=\"100\"\n            [nzStep]=\"1\"\n            [nzFormatter]=\"formatterPercent\"\n            [nzParser]=\"parserPercent\"\n            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n            (ngModelChange)=\"titleChange($event)\"\n          ></nz-input-number>\n        </div>\n        <div>\n          <span class=\"label\">标题坐标Y：</span>\n          <nz-input-number\n            [(ngModel)]=\"chartCondition.input.titleY\"\n            [nzMin]=\"0\"\n            [nzMax]=\"100\"\n            [nzStep]=\"1\"\n            [nzFormatter]=\"formatterPercent\"\n            [nzParser]=\"parserPercent\"\n            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n            (ngModelChange)=\"titleChange($event)\"\n          ></nz-input-number>\n        </div>\n        <div>\n          <span class=\"label\">标题大小：</span>\n          <nz-input-number\n            [(ngModel)]=\"chartCondition.input.titleSize\"\n            [nzMin]=\"0\"\n            [nzMax]=\"100\"\n            [nzStep]=\"1\"\n            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n            (ngModelChange)=\"titleChange($event)\"\n          ></nz-input-number>\n        </div>\n      </ng-container>\n\n      <hr />\n      <ng-container *ngIf=\"chartCondition?.condition.y\">\n        <h4>坐标y轴</h4>\n\n        <input\n          nz-input\n          placeholder=\"最大值\"\n          name=\"yAxisMax\"\n          [(ngModel)]=\"chartCondition.input.yAxisMax\"\n          [ngModelOptions]=\"{ updateOn: 'blur' }\"\n          (ngModelChange)=\"yAxisMaxBlur($event)\"\n        />\n        <input\n          nz-input\n          placeholder=\"最小值\"\n          name=\"yAxisMin\"\n          [(ngModel)]=\"chartCondition.input.yAxisMin\"\n          [ngModelOptions]=\"{ updateOn: 'blur' }\"\n          (ngModelChange)=\"yAxisMinBlur($event)\"\n        />\n        <hr />\n      </ng-container>\n\n      <ng-container *ngIf=\"chartCondition?.condition.dataLabe\">\n        <h4>数据标签</h4>\n        <label\n          nz-checkbox\n          name=\"dataLabeChecked\"\n          [(ngModel)]=\"chartCondition.input.dataLabeChecked\"\n          >显示数据标签</label\n        >\n        <hr />\n      </ng-container>\n      <ng-container *ngIf=\"chartCondition.condition.radius\">\n        <h4>半径设置</h4>\n        <div>\n          <span class=\"label\">内径：</span>\n          <nz-input-number\n            [(ngModel)]=\"chartCondition.input.inside\"\n            [nzMin]=\"0\"\n            [nzMax]=\"100\"\n            [nzStep]=\"1\"\n            [nzFormatter]=\"formatterPercent\"\n            [nzParser]=\"parserPercent\"\n            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n            (ngModelChange)=\"radiusChange($event)\"\n          ></nz-input-number>\n        </div>\n        <div>\n          <span class=\"label\">外径：</span>\n          <nz-input-number\n            [(ngModel)]=\"chartCondition.input.outside\"\n            [nzMin]=\"0\"\n            [nzMax]=\"100\"\n            [nzStep]=\"1\"\n            [nzFormatter]=\"formatterPercent\"\n            [nzParser]=\"parserPercent\"\n            [ngModelOptions]=\"{ updateOn: 'blur' }\"\n            (ngModelChange)=\"radiusChange($event)\"\n          ></nz-input-number>\n        </div>\n        <hr />\n      </ng-container>\n      <ng-container *ngIf=\"chartCondition?.condition.legend\">\n        <h4>图例</h4>\n        <label\n          nz-checkbox\n          name=\"isLegend\"\n          [(ngModel)]=\"chartCondition.input.isLegend\"\n          (ngModelChange)=\"isLegendShow('event')\"\n          >图例显示</label\n        >\n        <div>\n          图例显示在图表\n          <nz-select\n            name=\"legend\"\n            [(ngModel)]=\"chartCondition.input.legend\"\n            (ngModelChange)=\"legendChange($event)\"\n            nzAllowClear\n            nzPlaceHolder=\"Choose\"\n          >\n            <nz-option nzValue=\"bottom\" nzLabel=\"底部\"></nz-option>\n            <nz-option nzValue=\"top\" nzLabel=\"头部\"></nz-option>\n          </nz-select>\n        </div>\n        <hr />\n      </ng-container>\n\n      <h4>数据预警</h4>\n      <div>添加预警</div>\n    </div>\n  </div>\n  <div *ngIf=\"chartCondition.input.nzTabPosition === 'style'\">\n    <h4>整体样式</h4>\n    <div>背景</div>\n    <div>标题样式</div>\n\n    <hr />\n    <h4>图表配色</h4>\n\n    <div class=\"select-color\" (click)=\"changeColor()\">\n      配色方案 {{ chartCondition.input.currentColorType\n      }}<i class=\"icon-KT-Close\"></i>\n    </div>\n\n    <nz-select\n      [(ngModel)]=\"chartCondition.input.currentColorType\"\n      (ngModelChange)=\"changeCurrentColor()\"\n    >\n      <nz-option\n        *ngFor=\"let item of colorList; let i = index\"\n        nzCustomContent\n        nzLabel=\"配色方案{{ i + 1 }}\"\n        nzValue=\"{{ i + 1 }}\"\n      >\n        <div>\n          <ng-container *ngFor=\"let element of item; let ii = index\">\n            <ng-container *ngIf=\"ii < 9\">\n              <span [ngStyle]=\"{ 'background-color': element, color: element }\">\n                -\n              </span>\n            </ng-container>\n          </ng-container>\n          配色方案{{ i + 1 }}\n        </div>\n      </nz-option>\n    </nz-select>\n  </div>\n</ng-container>\n","styles":[":host{padding:10px 20px;border-left:1px solid #e9e9e9}:host .chart-wrap{display:flex;flex-wrap:wrap}:host .chart-wrap .chart-type{width:44px;height:44px;line-height:44px;text-align:center;cursor:pointer;border:2px solid #0db3a6;vertical-align:middle;margin:0 10px 10px 0}:host .select-color{border:1px solid #d9d9d9;border-radius:4px;height:32px;padding:4px 11px;background-color:#fff;display:flex;justify-content:space-between;align-items:center}:host .ant-input,:host .ant-input-number{margin-bottom:5px}:host span.label{width:80px;display:inline-block}"]}]}],"members":{"colorList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"echartsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"chartCondition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"echartOptionsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"echartShapeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"chartConditionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"ng-zorro-antd/modal","name":"NzModalService","line":88,"character":26},{"__symbolic":"reference","module":"ng-zorro-antd/message","name":"NzMessageService","line":89,"character":21}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"choiceChart":[{"__symbolic":"method"}],"choiceSubChart":[{"__symbolic":"method"}],"changeOptions":[{"__symbolic":"method"}],"choiceType":[{"__symbolic":"method"}],"getChartOption":[{"__symbolic":"method"}],"lineSmoothChange":[{"__symbolic":"method"}],"xAxisrRotateChange":[{"__symbolic":"method"}],"intervalChange":[{"__symbolic":"method"}],"titleChange":[{"__symbolic":"method"}],"yAxisMaxBlur":[{"__symbolic":"method"}],"yAxisMinBlur":[{"__symbolic":"method"}],"isLegendShow":[{"__symbolic":"method"}],"legendChange":[{"__symbolic":"method"}],"radiusChange":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}],"totalColor":[{"__symbolic":"method"}],"changeCurrentColor":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"chartCondition":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"radarOptions":[{"__symbolic":"method"}],"areaOptions":[{"__symbolic":"method"}],"lineOptions":[{"__symbolic":"method"}],"barOptions":[{"__symbolic":"method"}],"barYOptions":[{"__symbolic":"method"}],"doughnutOptions":[{"__symbolic":"method"}],"pieOptions":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"demo-modal-color","template":"<div nz-row>\n  <div nz-col nzSpan=\"4\">配色对象</div>\n  <div nz-col nzSpan=\"20\">\n    <nz-radio-group [(ngModel)]=\"colorType\">\n      <label nz-radio-button [nzValue]=\"'row'\">按维度</label>\n      <label nz-radio-button [nzValue]=\"'target'\">按指标</label>\n    </nz-radio-group>\n  </div>\n</div>\n<div *ngIf=\"colorType == 'row'\">\n  <!-- 如果是饼图就没有下面的，简道云里面写的也不是太详细 -->\n  <div nz-row>\n    <div nz-col nzSpan=\"4\">配色方式</div>\n    <div nz-col nzSpan=\"20\">\n      <nz-select [(ngModel)]=\"currentColorType\" (ngModelChange)=\"changeColor()\">\n        <nz-option\n          *ngFor=\"let item of colorList; let i = index\"\n          nzCustomContent\n          nzLabel=\"配色方案{{ i + 1 }}\"\n          nzValue=\"{{ i + 1 }}\"\n        >\n          <div>\n            <ng-container *ngFor=\"let element of item; let ii = index\">\n              <ng-container *ngIf=\"ii < 9\">\n                <span\n                  [ngStyle]=\"{ 'background-color': element, color: element }\"\n                >\n                  -\n                </span>\n              </ng-container>\n            </ng-container>\n            配色方案{{ i + 1 }}\n          </div>\n        </nz-option>\n      </nz-select>\n      <!-- {{ colorList | json }} -->\n    </div>\n  </div>\n  <div nz-row nzGutter=\"16\">\n    <div nz-col nzSpan=\"6\">\n      <p>支持设置颜色的值</p>\n      <ul>\n        <ng-container *ngFor=\"let element of echartsColorList; let i = index\">\n          <li\n            [ngClass]=\"element == currentList ? 'on' : ''\"\n            (click)=\"selectColor(element)\"\n          >\n            <div class=\"row-list\">\n              <span\n                [ngStyle]=\"{\n                  'background-color': element.color\n                }\"\n                class=\"color\"\n              ></span>\n              <span class=\"text\">{{ element.title }}</span>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n    <div nz-col nzSpan=\"18\">\n      <p>预设颜色</p>\n      <div\n        *ngFor=\"let item of colorList[currentColorType - 1]\"\n        class=\"color-list\"\n      >\n        <span\n          [ngStyle]=\"{ 'background-color': item }\"\n          (click)=\"choiceColor(item)\"\n        ></span>\n      </div>\n      <p>最近使用</p>\n      <div\n        *ngFor=\"let item of colorList[currentColorType - 1]; let i = index\"\n        class=\"color-list\"\n      >\n        <ng-container *ngIf=\"i < 2\">\n          <span [ngStyle]=\"{ 'background-color': item }\"></span>\n        </ng-container>\n      </div>\n      <p>自定义颜色</p>\n      <div\n        *ngFor=\"let item of colorList[currentColorType - 1]; let i = index\"\n        class=\"color-list\"\n      >\n        <ng-container *ngIf=\"i == 1\">\n          <span [ngStyle]=\"{ 'background-color': item }\"></span>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"colorType == 'target'\" nz-row>\n  <div nz-col nzSpan=\"4\">配色方式</div>\n  <div nz-col nzSpan=\"20\">\n    <nz-radio-group [(ngModel)]=\"targetColorType\">\n      <label nz-radio-button [nzValue]=\"'1'\">区间色</label>\n      <label nz-radio-button [nzValue]=\"'2'\">渐变色</label>\n    </nz-radio-group>\n    <!-- {{ target | json }} -->\n  </div>\n</div>\n","styles":[":host p{margin:0}:host .color-list{display:inline-block}:host .color-list span{width:32px;height:32px;border-radius:32px;display:inline-block;margin:0 .5rem 1rem 0}:host ul{margin:0;padding:0}:host ul li{list-style:none;line-height:32px;cursor:pointer}:host ul li .row-list{display:flex;align-items:center;white-space:nowrap}:host ul li .row-list .color{width:1rem;height:1rem;border-radius:1rem;display:inline-block;background-color:#ccc;margin-right:.2rem}:host ul li .row-list .text{display:inline-block;width:calc(100% - 1.2rem);overflow:hidden;text-overflow:ellipsis}:host ul li:hover{background-color:#e6f7ff}:host ul li:active{background-color:#00a0e9}:host ul .on{background-color:#00a0e9}:host .ant-row{margin-bottom:1rem}:host ::ng-deep .ant-col-6{border-right:1px solid #eee}:host ::ng-deep .ant-select{width:100%}:host ::ng-deep .option-color{display:inline-block;width:3px;height:32px}:host ::ng-deep .della{background-color:red}:host ::ng-deep .della span{display:inline-block;width:3px;height:32px}"]}]}],"members":{"echartsList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"colorList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"currentColorType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectColor":[{"__symbolic":"method"}],"choiceColor":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"echart-dom","template":"<div #chartsContent style=\"width: 100%; height: 100%\"></div>\n","styles":[""]}]}],"members":{"option":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"echartClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"chartsContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":3},"arguments":["chartsContent",{"static":false}]}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":23,"character":3},"arguments":["window:resize",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"chartsInit":[{"__symbolic":"method"}]}}},"origins":{"BoardComponent":"./board.component","BoardModule":"./board.module","ɵa":"./components/echart-options-dom/echart-options-dom.component","ɵb":"./service/chart-condition.service","ɵc":"./service/charts.service","ɵd":"./components/modal-color/modal-color.component","ɵe":"./components/echart-dom/echart-dom.component"},"importAs":"@kre-form/abc/src/lib/board"}