binu
Version:
This is an easier platfrom with custom component for vue.
480 lines (457 loc) • 13.2 kB
JavaScript
"use strict";
((typeof self !== 'undefined' ? self : this)["webpackChunkelastic_pfm"] = (typeof self !== 'undefined' ? self : this)["webpackChunkelastic_pfm"] || []).push([[872],{
/***/ 8872:
/***/ (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 */ histogram; }
});
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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/histogram.vue?vue&type=template&id=71ba598d&
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": "y轴单位",
"prop": "unit"
}
}, [_c('el-input', {
staticStyle: {
"width": "320px",
"max-width": "500px"
},
attrs: {
"placeholder": "请输入y轴单位...",
"minlength": 1,
"maxlength": 3
},
model: {
value: _vm.optionData.unit,
callback: function ($$v) {
_vm.$set(_vm.optionData, "unit", $$v);
},
expression: "optionData.unit"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "图形背景色",
"prop": "background"
}
}, [_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)], 1), _c('el-form-item', {
attrs: {
"label": "XY轴字体颜色",
"prop": "fontColor"
}
}, [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.fontColor,
callback: function ($$v) {
_vm.$set(_vm.optionData, "fontColor", $$v);
},
expression: "optionData.fontColor"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：默认灰黑色字体。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "条形字体颜色",
"prop": "barFontColor"
}
}, [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.barFontColor,
callback: function ($$v) {
_vm.$set(_vm.optionData, "barFontColor", $$v);
},
expression: "optionData.barFontColor"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：默认灰黑色字体。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "显示坐标轴线",
"prop": "disAxis"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.disAxis,
callback: function ($$v) {
_vm.$set(_vm.optionData, "disAxis", $$v);
},
expression: "optionData.disAxis"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "坐标轴线颜色",
"prop": "axisColor"
}
}, [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.axisColor,
callback: function ($$v) {
_vm.$set(_vm.optionData, "axisColor", $$v);
},
expression: "optionData.axisColor"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：只在显示坐标轴线情况下生效。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "显示网格线",
"prop": "splitLine"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.splitLine,
callback: function ($$v) {
_vm.$set(_vm.optionData, "splitLine", $$v);
},
expression: "optionData.splitLine"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "网格线颜色",
"prop": "splitLineColor"
}
}, [_c('el-color-picker', {
attrs: {
"popper-class": "my-color-picker",
"show-alpha": ""
},
model: {
value: _vm.optionData.splitLineColor,
callback: function ($$v) {
_vm.$set(_vm.optionData, "splitLineColor", $$v);
},
expression: "optionData.splitLineColor"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：只在显示网格线情况下生效。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "横向柱状图",
"prop": "xAlign"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.xAlign,
callback: function ($$v) {
_vm.$set(_vm.optionData, "xAlign", $$v);
},
expression: "optionData.xAlign"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "刻度标签对齐",
"prop": "scaleAlign"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.scaleAlign,
callback: function ($$v) {
_vm.$set(_vm.optionData, "scaleAlign", $$v);
},
expression: "optionData.scaleAlign"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "背景色水印",
"prop": "backWatermark"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.backWatermark,
callback: function ($$v) {
_vm.$set(_vm.optionData, "backWatermark", $$v);
},
expression: "optionData.backWatermark"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "柱条区分颜色",
"prop": "randomColor"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.randomColor,
callback: function ($$v) {
_vm.$set(_vm.optionData, "randomColor", $$v);
},
expression: "optionData.randomColor"
}
}), _c('div', [_c('el-link', {
attrs: {
"type": "primary"
}
}, [_vm._v("tip：只针对一组数据不同条形显示不同颜色，多组数据不生效。")])], 1)], 1), _c('el-form-item', {
attrs: {
"label": "显示平均值",
"prop": "average"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.average,
callback: function ($$v) {
_vm.$set(_vm.optionData, "average", $$v);
},
expression: "optionData.average"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "显示最值",
"prop": "maxmin"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.maxmin,
callback: function ($$v) {
_vm.$set(_vm.optionData, "maxmin", $$v);
},
expression: "optionData.maxmin"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "堆叠排列",
"prop": "stacking"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.stacking,
callback: function ($$v) {
_vm.$set(_vm.optionData, "stacking", $$v);
},
expression: "optionData.stacking"
}
})], 1), _c('el-form-item', {
attrs: {
"label": "折线柱形转换",
"prop": "toLine"
}
}, [_c('el-switch', {
model: {
value: _vm.optionData.toLine,
callback: function ($$v) {
_vm.$set(_vm.optionData, "toLine", $$v);
},
expression: "optionData.toLine"
}
})], 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', {
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-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/epfm/optionComps/histogram.vue?vue&type=script&lang=js&
/* harmony default export */ var histogramvue_type_script_lang_js_ = ({
data() {
return {
optionData: {
title: "",
// 标题
titleColor: "#333",
// 标题颜色
unit: "",
// y轴单位
background: "#00000000",
// 默认背景色
fontColor: "#333",
// 字体颜色
barFontColor: "#333",
// 条形字体颜色
disAxis: true,
// 显示坐标轴线
axisColor: "#333",
// 坐标轴线颜色
splitLine: false,
// 显示网格线
splitLineColor: "#ccc",
// 网格线颜色
xAlign: false,
// 横向柱状图
scaleAlign: false,
// 刻度标签对齐
backWatermark: false,
// 背景色水印
randomColor: false,
// 柱条随机生成颜色
average: false,
// 显示平均值
maxmin: false,
// 显示最大最小值
stacking: false,
// 堆叠条形图
toLine: false,
// 折线图与条形图转换
legend: false,
// 显示图例
saveAsImage: false
},
optionRules: {
title: [{
required: true,
message: "请输入标题",
trigger: "blur"
}, {
min: 3,
max: 20,
message: "长度在 3 到 20 个字符",
trigger: "blur"
}],
unit: [{
required: true,
message: "请输入单位",
trigger: "blur"
}, {
min: 1,
max: 3,
message: "长度在 1 到 3 个字符",
trigger: "blur"
}]
}
};
},
methods: {
getOption() {
if (!this.optionData.title.trim()) {
return "请输入图形标题！";
}
if (!this.optionData.unit.trim()) {
return "请输入y轴单位！";
}
return JSON.parse(JSON.stringify(this.optionData));
}
}
});
;// CONCATENATED MODULE: ./src/components/epfm/optionComps/histogram.vue?vue&type=script&lang=js&
/* harmony default export */ var optionComps_histogramvue_type_script_lang_js_ = (histogramvue_type_script_lang_js_);
;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/epfm/optionComps/histogram.vue?vue&type=style&index=0&id=71ba598d&prod&lang=css&
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/components/epfm/optionComps/histogram.vue?vue&type=style&index=0&id=71ba598d&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/histogram.vue
;
/* normalize component */
var component = (0,componentNormalizer/* default */.Z)(
optionComps_histogramvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var histogram = (component.exports);
/***/ })
}]);
//# sourceMappingURL=bine.common.872.js.map