binu/bine.umd.min.510.js

This is an easier platfrom with custom component for vue.

"use strict";(("undefined"!==typeof self?self:this)["webpackChunkbine"]=("undefined"!==typeof self?self:this)["webpackChunkbine"]||[]).push([[510],{2510:function(t,a,e){e.r(a),e.d(a,{default:function(){return p}});var o=function(){var t=this,a=t._self._c;return a("el-form",{attrs:{model:t.optionData,rules:t.optionRules,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"饼图标题",prop:"title"}},[a("el-input",{staticStyle:{width:"320px","max-width":"500px"},attrs:{placeholder:"请输入饼图标题显示标题...",minlength:3,maxlength:20},model:{value:t.optionData.title,callback:function(a){t.$set(t.optionData,"title",a)},expression:"optionData.title"}})],1),a("el-form-item",{attrs:{label:"标题颜色",prop:"titleColor"}},[a("el-color-picker",{attrs:{"popper-class":"my-color-picker","show-alpha":""},model:{value:t.optionData.titleColor,callback:function(a){t.$set(t.optionData,"titleColor",a)},expression:"optionData.titleColor"}}),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：默认标题颜色灰黑色。")])],1)],1),a("el-form-item",{attrs:{label:"标题位置",prop:"titlePosition"}},[a("el-radio-group",{model:{value:t.optionData.titlePosition,callback:function(a){t.$set(t.optionData,"titlePosition",a)},expression:"optionData.titlePosition"}},[a("el-radio",{attrs:{label:"auto"}},[t._v("自动")]),a("el-radio",{attrs:{label:"left"}},[t._v("左边")]),a("el-radio",{attrs:{label:"center"}},[t._v("中间")]),a("el-radio",{attrs:{label:"right"}},[t._v("右边")])],1)],1),a("el-form-item",{attrs:{label:"饼图半径比",prop:"radius"}},[a("el-slider",{staticStyle:{"max-width":"500px"},attrs:{"show-input":"","input-size":"mini"},model:{value:t.optionData.radius,callback:function(a){t.$set(t.optionData,"radius",a)},expression:"optionData.radius"}}),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：圆半径长度占整个图的比例。")])],1)],1),a("el-form-item",{attrs:{label:"开启扇形间隙",prop:"border"}},[a("el-switch",{model:{value:t.optionData.border,callback:function(a){t.$set(t.optionData,"border",a)},expression:"optionData.border"}})],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.border,expression:"optionData.border"}],attrs:{label:"颜色",prop:"borderStyle.color"}},[a("el-color-picker",{attrs:{"popper-class":"my-color-picker","show-alpha":""},model:{value:t.optionData.borderStyle.color,callback:function(a){t.$set(t.optionData.borderStyle,"color",a)},expression:"optionData.borderStyle.color"}})],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.border,expression:"optionData.border"}],attrs:{label:"宽度",prop:"borderStyle.width"}},[a("el-slider",{staticStyle:{"max-width":"400px"},attrs:{"show-input":"","input-size":"mini",min:0,max:5},model:{value:t.optionData.borderStyle.width,callback:function(a){t.$set(t.optionData.borderStyle,"width",a)},expression:"optionData.borderStyle.width"}})],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.border,expression:"optionData.border"}],attrs:{label:"圆角",prop:"borderStyle.radius"}},[a("el-slider",{staticStyle:{"max-width":"400px"},attrs:{"show-input":"","input-size":"mini",min:0,max:20},model:{value:t.optionData.borderStyle.radius,callback:function(a){t.$set(t.optionData.borderStyle,"radius",a)},expression:"optionData.borderStyle.radius"}})],1),a("el-form-item",{attrs:{label:"扇形边缘阴影",prop:"shadow"}},[a("el-switch",{model:{value:t.optionData.shadow,callback:function(a){t.$set(t.optionData,"shadow",a)},expression:"optionData.shadow"}})],1),a("el-form-item",{attrs:{label:"开启环形饼图",prop:"ring"}},[a("el-switch",{model:{value:t.optionData.ring,callback:function(a){t.$set(t.optionData,"ring",a)},expression:"optionData.ring"}})],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.ring,expression:"optionData.ring"}],attrs:{label:"半径比设置",prop:"ringRadius"}},[a("div",[t._v(" 内径比(内圆半径比例)： "),a("el-slider",{staticStyle:{"max-width":"500px"},attrs:{"show-input":"","input-size":"mini"},model:{value:t.optionData.ringRadius[0],callback:function(a){t.$set(t.optionData.ringRadius,0,a)},expression:"optionData.ringRadius[0]"}})],1),a("div",[t._v(" 外径比(外圆半径比例)： "),a("el-slider",{staticStyle:{"max-width":"500px"},attrs:{"show-input":"","input-size":"mini"},model:{value:t.optionData.ringRadius[1],callback:function(a){t.$set(t.optionData.ringRadius,1,a)},expression:"optionData.ringRadius[1]"}})],1),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：结合环形饼图生效。")])],1)]),a("el-form-item",{attrs:{label:"开启玫瑰图",prop:"rose"}},[a("el-switch",{model:{value:t.optionData.rose,callback:function(a){t.$set(t.optionData,"rose",a)},expression:"optionData.rose"}})],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.rose,expression:"optionData.rose"}],attrs:{label:"半径设置",prop:"roseRadius"}},[a("div",[t._v(" 内径(内圆半径)： "),a("el-slider",{staticStyle:{"max-width":"500px"},attrs:{"show-input":"","input-size":"mini",min:0,max:250},model:{value:t.optionData.roseRadius[0],callback:function(a){t.$set(t.optionData.roseRadius,0,a)},expression:"optionData.roseRadius[0]"}})],1),a("div",[t._v(" 外径(外圆半径)： "),a("el-slider",{staticStyle:{"max-width":"500px"},attrs:{"show-input":"","input-size":"mini",min:50,max:300},model:{value:t.optionData.roseRadius[1],callback:function(a){t.$set(t.optionData.roseRadius,1,a)},expression:"optionData.roseRadius[1]"}})],1),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：结合玫瑰图生效。")])],1)]),a("el-form-item",{attrs:{label:"饼图后背景",prop:"background"}},[a("div",[a("el-radio-group",{on:{change:t.radioChange},model:{value:t.bigback,callback:function(a){t.bigback=a},expression:"bigback"}},[a("el-radio",{attrs:{label:"color"}},[t._v("纯色")]),a("el-radio",{attrs:{label:"img"}},[t._v("图片")])],1)],1),"color"===t.bigback?[a("el-color-picker",{attrs:{"popper-class":"my-color-picker","show-alpha":""},model:{value:t.optionData.background,callback:function(a){t.$set(t.optionData,"background",a)},expression:"optionData.background"}}),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：默认背景色透明。")])],1)]:[a("el-input",{staticStyle:{width:"320px","max-width":"500px"},attrs:{placeholder:"请输入网络图片地址..."},model:{value:t.optionData.background,callback:function(a){t.$set(t.optionData,"background",a)},expression:"optionData.background"}})]],2),a("el-form-item",{attrs:{label:"图片填充饼图区域",prop:"imgFill"}},[a("el-switch",{on:{change:t.switchChange},model:{value:t.piefill,callback:function(a){t.piefill=a},expression:"piefill"}}),t.piefill?a("el-input",{staticStyle:{width:"320px","max-width":"400px","padding-left":"10px"},attrs:{placeholder:"请输入网络图片地址..."},model:{value:t.optionData.imgFill,callback:function(a){t.$set(t.optionData,"imgFill",a)},expression:"optionData.imgFill"}}):t._e()],1),a("el-form-item",{attrs:{label:"显示图例",prop:"legend"}},[a("el-switch",{model:{value:t.optionData.legend,callback:function(a){t.$set(t.optionData,"legend",a)},expression:"optionData.legend"}})],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.legend,expression:"optionData.legend"}],attrs:{label:"图例位置",prop:"legendPosition"}},[a("el-radio-group",{model:{value:t.optionData.legendPosition,callback:function(a){t.$set(t.optionData,"legendPosition",a)},expression:"optionData.legendPosition"}},[a("el-radio",{attrs:{label:"auto"}},[t._v("自动")]),a("el-radio",{attrs:{label:"left"}},[t._v("左边")]),a("el-radio",{attrs:{label:"center"}},[t._v("中间")]),a("el-radio",{attrs:{label:"right"}},[t._v("右边")])],1),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：只在显示图例的情况下生效。")])],1)],1),a("el-form-item",{directives:[{name:"show",rawName:"v-show",value:t.optionData.legend,expression:"optionData.legend"}],attrs:{label:"图例方向",prop:"legendDirection"}},[a("el-radio-group",{model:{value:t.optionData.legendDirection,callback:function(a){t.$set(t.optionData,"legendDirection",a)},expression:"optionData.legendDirection"}},[a("el-radio",{attrs:{label:"horizontal"}},[t._v("水平排列")]),a("el-radio",{attrs:{label:"vertical"}},[t._v("垂直排列")])],1),a("div",[a("el-link",{attrs:{type:"primary"}},[t._v("tip：只在显示图例的情况下生效。")])],1)],1),a("el-form-item",{attrs:{label:"提供图片下载",prop:"saveAsImage"}},[a("el-switch",{model:{value:t.optionData.saveAsImage,callback:function(a){t.$set(t.optionData,"saveAsImage",a)},expression:"optionData.saveAsImage"}})],1)],1)},i=[],l={data(){return{optionData:{title:"",titleColor:"#333",titlePosition:"auto",radius:50,border:!1,borderStyle:{width:2,color:"#333",radius:8},rose:!1,roseRadius:[50,250],shadow:!1,ring:!1,ringRadius:[40,70],background:"#00000000",imgFill:!1,legend:!1,legendPosition:"auto",legendDirection:"horizontal",saveAsImage:!1},optionRules:{title:[{required:!0,message:"请输入标题",trigger:"blur"},{min:3,max:20,message:"长度在 3 到 20 个字符",trigger:"blur"}],background:[{required:!0,message:"请输入网络图片地址",trigger:"blur"}]},bigback:"color",piefill:!1}},methods:{radioChange(t){"color"===t&&(this.optionData.background="#00000000"),"img"===t&&(this.optionData.background="")},switchChange(t){t&&(this.optionData.imgFill=""),!t&&(this.optionData.imgFill=t)},getOption(){if(!this.optionData.title.trim())return"请输入图形标题！";if(!this.optionData.background.trim())return"请检查背景设置！";if(!(/^rgba?\(.*\)$/.test(this.optionData.background)||/^#[0-9a-fA-F]{8}$/.test(this.optionData.background)||/^(https?:\/\/)/.test(this.optionData.background)))return"请检查背景设置格式！";if(this.piefill){if(!this.optionData.imgFill.trim())return"请检查饼图填充设置！";if(!/^(https?:\/\/)/.test(this.optionData.imgFill))return"请输入正确的网络图片地址！"}return JSON.parse(JSON.stringify(this.optionData))}}},r=l,n=e(1001),s=(0,n.Z)(r,o,i,!1,null,null,null),p=s.exports}}]);
//# sourceMappingURL=bine.umd.min.510.js.map