binu/bine.common.247.js

This is an easier platfrom with custom component for vue.

"use strict";
((typeof self !== 'undefined' ? self : this)["webpackChunkelastic_pfm"] = (typeof self !== 'undefined' ? self : this)["webpackChunkelastic_pfm"] || []).push([[247],{

/***/ 7247:
/***/ (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-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/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-40.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-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/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.common.247.js.map