binu
Version:
This is an easier platfrom with custom component for vue.
673 lines (645 loc) • 17.9 kB
JavaScript
"use strict";
((typeof self !== 'undefined' ? self : this)["webpackChunkbine"] = (typeof self !== 'undefined' ? self : this)["webpackChunkbine"] || []).push([[32],{
/***/ 2032:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ piechart; }
});
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/epfm/optionComps/piechart.vue?vue&type=template&id=2c215132&
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('el-form', {
attrs: {
"model": _vm.optionData,
"rules": _vm.optionRules,
"label-width": "100px"
}
}, [_c('el-form-item', {
attrs: {
"label": "饼图标题",
"prop": "title"
}
}, [_c('el-input', {
staticStyle: {
"width": "320px",
"max-width": "500px"
},
attrs: {
"placeholder": "请输入饼图标题显示标题...",
"minlength": 3,
"maxlength": 20
},
model: {
value: _vm.optionData.title,
callback: function ($$v) {
_vm.$set(_vm.optionData, "title", $$v);
},
expression: "optionData.title"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "标题颜色",
"prop": "titleColor"
}
}, [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.titleColor,
callback: function ($$v) {
_vm.$set(_vm.optionData, "titleColor", $$v);
},
expression: "optionData.titleColor"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：默认标题颜色灰黑色。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "标题位置",
"prop": "titlePosition"
}
}, [_c('el-radio-group', {
model: {
value: _vm.optionData.titlePosition,
callback: function ($$v) {
_vm.$set(_vm.optionData, "titlePosition", $$v);
},
expression: "optionData.titlePosition"
}
}, [_c('el-radio', {
attrs: {
"label": "auto"
}
}, [_vm._v("自动")]), _c('el-radio', {
attrs: {
"label": "left"
}
}, [_vm._v("左边")]), _c('el-radio', {
attrs: {
"label": "center"
}
}, [_vm._v("中间")]), _c('el-radio', {
attrs: {
"label": "right"
}
}, [_vm._v("右边")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "饼图半径比",
"prop": "radius"
}
}, [_c('el-slider', {
staticStyle: {
"max-width": "500px"
},
attrs: {
"show-input": "",
"input-size": "mini"
},
model: {
value: _vm.optionData.radius,
callback: function ($$v) {
_vm.$set(_vm.optionData, "radius", $$v);
},
expression: "optionData.radius"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：圆半径长度占整个图的比例。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "开启扇形间隙",
"prop": "border"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.border,
callback: function ($$v) {
_vm.$set(_vm.optionData, "border", $$v);
},
expression: "optionData.border"
}
})], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.border,
expression: "optionData.border"
}],
attrs: {
"label": "颜色",
"prop": "borderStyle.color"
}
}, [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.borderStyle.color,
callback: function ($$v) {
_vm.$set(_vm.optionData.borderStyle, "color", $$v);
},
expression: "optionData.borderStyle.color"
}
})], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.border,
expression: "optionData.border"
}],
attrs: {
"label": "宽度",
"prop": "borderStyle.width"
}
}, [_c('el-slider', {
staticStyle: {
"max-width": "400px"
},
attrs: {
"show-input": "",
"input-size": "mini",
"min": 0,
"max": 5
},
model: {
value: _vm.optionData.borderStyle.width,
callback: function ($$v) {
_vm.$set(_vm.optionData.borderStyle, "width", $$v);
},
expression: "optionData.borderStyle.width"
}
})], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.border,
expression: "optionData.border"
}],
attrs: {
"label": "圆角",
"prop": "borderStyle.radius"
}
}, [_c('el-slider', {
staticStyle: {
"max-width": "400px"
},
attrs: {
"show-input": "",
"input-size": "mini",
"min": 0,
"max": 20
},
model: {
value: _vm.optionData.borderStyle.radius,
callback: function ($$v) {
_vm.$set(_vm.optionData.borderStyle, "radius", $$v);
},
expression: "optionData.borderStyle.radius"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "扇形边缘阴影",
"prop": "shadow"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.shadow,
callback: function ($$v) {
_vm.$set(_vm.optionData, "shadow", $$v);
},
expression: "optionData.shadow"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "开启环形饼图",
"prop": "ring"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.ring,
callback: function ($$v) {
_vm.$set(_vm.optionData, "ring", $$v);
},
expression: "optionData.ring"
}
})], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.ring,
expression: "optionData.ring"
}],
attrs: {
"label": "半径比设置",
"prop": "ringRadius"
}
}, [_c('div', [_vm._v(" 内径比(内圆半径比例)： "), _c('el-slider', {
staticStyle: {
"max-width": "500px"
},
attrs: {
"show-input": "",
"input-size": "mini"
},
model: {
value: _vm.optionData.ringRadius[0],
callback: function ($$v) {
_vm.$set(_vm.optionData.ringRadius, 0, $$v);
},
expression: "optionData.ringRadius[0]"
}
})], 1), _c('div', [_vm._v(" 外径比(外圆半径比例)： "), _c('el-slider', {
staticStyle: {
"max-width": "500px"
},
attrs: {
"show-input": "",
"input-size": "mini"
},
model: {
value: _vm.optionData.ringRadius[1],
callback: function ($$v) {
_vm.$set(_vm.optionData.ringRadius, 1, $$v);
},
expression: "optionData.ringRadius[1]"
}
})], 1), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：结合环形饼图生效。")])], 1)]), _c('el-form-item', {
attrs: {
"label": "开启玫瑰图",
"prop": "rose"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.rose,
callback: function ($$v) {
_vm.$set(_vm.optionData, "rose", $$v);
},
expression: "optionData.rose"
}
})], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.rose,
expression: "optionData.rose"
}],
attrs: {
"label": "半径设置",
"prop": "roseRadius"
}
}, [_c('div', [_vm._v(" 内径(内圆半径)： "), _c('el-slider', {
staticStyle: {
"max-width": "500px"
},
attrs: {
"show-input": "",
"input-size": "mini",
"min": 0,
"max": 250
},
model: {
value: _vm.optionData.roseRadius[0],
callback: function ($$v) {
_vm.$set(_vm.optionData.roseRadius, 0, $$v);
},
expression: "optionData.roseRadius[0]"
}
})], 1), _c('div', [_vm._v(" 外径(外圆半径)： "), _c('el-slider', {
staticStyle: {
"max-width": "500px"
},
attrs: {
"show-input": "",
"input-size": "mini",
"min": 50,
"max": 300
},
model: {
value: _vm.optionData.roseRadius[1],
callback: function ($$v) {
_vm.$set(_vm.optionData.roseRadius, 1, $$v);
},
expression: "optionData.roseRadius[1]"
}
})], 1), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：结合玫瑰图生效。")])], 1)]), _c('el-form-item', {
attrs: {
"label": "饼图后背景",
"prop": "background"
}
}, [_c('div', [_c('el-radio-group', {
on: {
"change": _vm.radioChange
},
model: {
value: _vm.bigback,
callback: function ($$v) {
_vm.bigback = $$v;
},
expression: "bigback"
}
}, [_c('el-radio', {
attrs: {
"label": "color"
}
}, [_vm._v("纯色")]), _c('el-radio', {
attrs: {
"label": "img"
}
}, [_vm._v("图片")])], 1)], 1), _vm.bigback === 'color' ? [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.background,
callback: function ($$v) {
_vm.$set(_vm.optionData, "background", $$v);
},
expression: "optionData.background"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：默认背景色透明。")])], 1)] : [_c('el-input', {
staticStyle: {
"width": "320px",
"max-width": "500px"
},
attrs: {
"placeholder": "请输入网络图片地址..."
},
model: {
value: _vm.optionData.background,
callback: function ($$v) {
_vm.$set(_vm.optionData, "background", $$v);
},
expression: "optionData.background"
}
})]], 2), _c('el-form-item', {
attrs: {
"label": "图片填充饼图区域",
"prop": "imgFill"
}
}, [_c('el-switch', {
on: {
"change": _vm.switchChange
},
model: {
value: _vm.piefill,
callback: function ($$v) {
_vm.piefill = $$v;
},
expression: "piefill"
}
}), _vm.piefill ? _c('el-input', {
staticStyle: {
"width": "320px",
"max-width": "400px",
"padding-left": "10px"
},
attrs: {
"placeholder": "请输入网络图片地址..."
},
model: {
value: _vm.optionData.imgFill,
callback: function ($$v) {
_vm.$set(_vm.optionData, "imgFill", $$v);
},
expression: "optionData.imgFill"
}
}) : _vm._e()], 1), _c('el-form-item', {
attrs: {
"label": "显示图例",
"prop": "legend"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.legend,
callback: function ($$v) {
_vm.$set(_vm.optionData, "legend", $$v);
},
expression: "optionData.legend"
}
})], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.legend,
expression: "optionData.legend"
}],
attrs: {
"label": "图例位置",
"prop": "legendPosition"
}
}, [_c('el-radio-group', {
model: {
value: _vm.optionData.legendPosition,
callback: function ($$v) {
_vm.$set(_vm.optionData, "legendPosition", $$v);
},
expression: "optionData.legendPosition"
}
}, [_c('el-radio', {
attrs: {
"label": "auto"
}
}, [_vm._v("自动")]), _c('el-radio', {
attrs: {
"label": "left"
}
}, [_vm._v("左边")]), _c('el-radio', {
attrs: {
"label": "center"
}
}, [_vm._v("中间")]), _c('el-radio', {
attrs: {
"label": "right"
}
}, [_vm._v("右边")])], 1), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：只在显示图例的情况下生效。")])], 1)], 1), _c('el-form-item', {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.optionData.legend,
expression: "optionData.legend"
}],
attrs: {
"label": "图例方向",
"prop": "legendDirection"
}
}, [_c('el-radio-group', {
model: {
value: _vm.optionData.legendDirection,
callback: function ($$v) {
_vm.$set(_vm.optionData, "legendDirection", $$v);
},
expression: "optionData.legendDirection"
}
}, [_c('el-radio', {
attrs: {
"label": "horizontal"
}
}, [_vm._v("水平排列")]), _c('el-radio', {
attrs: {
"label": "vertical"
}
}, [_vm._v("垂直排列")])], 1), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：只在显示图例的情况下生效。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "提供图片下载",
"prop": "saveAsImage"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.saveAsImage,
callback: function ($$v) {
_vm.$set(_vm.optionData, "saveAsImage", $$v);
},
expression: "optionData.saveAsImage"
}
})], 1)], 1);
};
var staticRenderFns = [];
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/epfm/optionComps/piechart.vue?vue&type=script&lang=js&
/* harmony default export */ var piechartvue_type_script_lang_js_ = ({
data() {
return {
optionData: {
title: "",
// 饼图标题
titleColor: "#333",
// 标题颜色
titlePosition: "auto",
// 标题位置
radius: 50,
// 饼图半径百分比
border: false,
// 边框间隙
borderStyle: {
width: 2,
color: "#333",
radius: 8
},
// 边框宽度、颜色
rose: false,
// 开启玫瑰图
roseRadius: [50, 250],
// 半径内外径长
shadow: false,
// 开启扇形hover阴影
ring: false,
// 开启环形饼图
ringRadius: [40, 70],
// 环形内外径
background: "#00000000",
// 默认背景色
imgFill: false,
// 饼图图片地址
legend: false,
// 显示图例
legendPosition: "auto",
// 图例位置
legendDirection: "horizontal",
// 图例方向
saveAsImage: false
},
optionRules: {
title: [{
required: true,
message: "请输入标题",
trigger: "blur"
}, {
min: 3,
max: 20,
message: "长度在 3 到 20 个字符",
trigger: "blur"
}],
background: [{
required: true,
message: "请输入网络图片地址",
trigger: "blur"
}]
},
bigback: 'color',
piefill: false
};
},
methods: {
radioChange(val) {
val === "color" && (this.optionData.background = "#00000000");
val === "img" && (this.optionData.background = "");
},
switchChange(val) {
val && (this.optionData.imgFill = "");
!val && (this.optionData.imgFill = val);
},
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));
}
}
});
;// CONCATENATED MODULE: ./src/components/epfm/optionComps/piechart.vue?vue&type=script&lang=js&
/* harmony default export */ var optionComps_piechartvue_type_script_lang_js_ = (piechartvue_type_script_lang_js_);
;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/epfm/optionComps/piechart.vue?vue&type=style&index=0&id=2c215132&prod&lang=css&
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/components/epfm/optionComps/piechart.vue?vue&type=style&index=0&id=2c215132&prod&lang=css&
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(1001);
;// CONCATENATED MODULE: ./src/components/epfm/optionComps/piechart.vue
;
/* normalize component */
var component = (0,componentNormalizer/* default */.Z)(
optionComps_piechartvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var piechart = (component.exports);
/***/ })
}]);
//# sourceMappingURL=bine.umd.32.js.map