@ganwei-web/gw-base-components-plus 1.0.0

package/echartList/solid-pie/dist/index.es.js

@@ -0,0 +1,336 @@
+import { createElementBlock as g, createElementVNode as m, normalizeStyle as S, openBlock as y, toDisplayString as x } from "vue";
+
+import "./style.css";
+const v = (s, t) => {
+  const e = s.__vccOpts || s;
+  for (const [i, a] of t) { e[i] = a; }
+  return e;
+}, b = {
+  name: "cityGreenLand",
+  components: {},
+  props: {
+    data: {
+      type: Array,
+      required: !0
+    },
+    //图表名称
+    name: {
+      type: String,
+      default: ""
+    },
+    unit: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    showLegend: {
+      type: Boolean,
+      default: !1
+    },
+    layoutOptions: {
+      type: Object,
+      default: () => {
+      }
+    },
+    seriesOptions: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      echartId: "",
+      myChart: null,
+      optionData: [{
+        name: "林地面积统计",
+        value: 1e4,
+        itemStyle: {
+          color: "#22c4ff"
+        }
+      }, {
+        name: "草地面积统计",
+        value: 12116,
+        itemStyle: {
+          color: "#aaff00"
+        }
+      }, {
+        name: "耕地地面积统计",
+        value: 16616,
+        itemStyle: {
+          color: "#ffaaff"
+        }
+      }],
+      pieSeries: {
+        name: "pie2d",
+        type: "pie",
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        label: {
+          color: "red",
+          show: !0
+        },
+        startAngle: -20,
+        //起始角度，支持范围[0, 360]。
+        clockwise: !1,
+        //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "72%"],
+        center: ["48%", "55%"],
+        itemStyle: {
+          opacity: 1
+        }
+      }
+    };
+  },
+  computed: {
+    styleObject() {
+      return {
+        width: this.width,
+        height: this.height
+      };
+    }
+  },
+  created() {
+    this.echartId = this.myUtils.generateUUID();
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.data.sort((s, t) => t.value - s.value), this.myChart = this.$echart.init(document.getElementById(this.echartId)), this.option = this.getPie3D(this.data, 0), this.option = this.merge(this.option, this.layoutOptions), this.pieSeries.data = JSON.parse(JSON.stringify(this.data)).map((s) => (s.itemStyle.color = "transparent", s)), this.option.series.push(this.merge(this.pieSeries, this.seriesOptions && this.seriesOptions.label || {})), console.log(this.option), this.myChart.setOption(this.option), this.bindListen(this.myChart), this.myChart.on("legendselectchanged", (s) => {
+        let t = JSON.parse(JSON.stringify(this.data));
+        t.forEach((e) => {
+          s.selected[e.name] || (e.value = 0);
+        }), this.option = this.getPie3D(t, 0), this.option = this.merge(this.option, this.layoutOptions), this.pieSeries.data = JSON.parse(JSON.stringify(t)).map((e) => (e.itemStyle.color = "transparent", e)), this.option.series.push(this.merge(this.pieSeries, this.seriesOptions && this.seriesOptions.label || {})), console.log(this.option), this.myChart.setOption(this.option);
+      });
+    },
+    getPie3D(s, t) {
+      let e = this, i = [], a = 0, n = 0, p = 0, l = [], d = 1 - t;
+      for (let o = 0; o < s.length; o++) {
+        a += s[o].value;
+        let h = {
+          name: typeof s[o].name > "u" ? `series${o}` : s[o].name,
+          type: "surface",
+          parametric: !0,
+          wireframe: {
+            show: !1
+          },
+          pieData: s[o],
+          pieStatus: {
+            selected: !1,
+            hovered: !1,
+            k: d
+          },
+          center: ["10%", "50%"]
+        };
+        if (this.merge(h, this.seriesOptions && this.seriesOptions.surface || {}), typeof s[o].itemStyle < "u") {
+          let r = {};
+          typeof s[o].itemStyle.color < "u" && (r.color = s[o].itemStyle.color), typeof s[o].itemStyle.opacity < "u" && (r.opacity = s[o].itemStyle.opacity), h.itemStyle = r;
+        }
+        i.push(h);
+      }
+      l = [];
+      for (let o = 0; o < i.length; o++) {
+        p = n + i[o].pieData.value, i[o].pieData.startRatio = n / a, i[o].pieData.endRatio = p / a, i[o].parametricEquation = this.getParametricEquation(
+          i[o].pieData.startRatio,
+          i[o].pieData.endRatio,
+          !1,
+          !1,
+          d,
+          i[o].pieData.value
+        ), n = p;
+        let h = e.fomatFloat(i[o].pieData.value / a, 4);
+        l.push({
+          name: i[o].name,
+          value: h
+        });
+      }
+      let f = this.getHeight3D(i, 26), u = {
+        legend: {
+          data: l,
+          orient: "horizontal",
+          left: 10,
+          top: 10,
+          itemGap: 10,
+          textStyle: {
+            color: "#A1E2FF"
+          },
+          show: this.showLegend,
+          icon: "circle",
+          formatter: function(o) {
+            let h = l.filter((c) => c.name == o)[0], r = e.fomatFloat(h.value * 100, 2) + "%";
+            return `${h.name}  ${r}`;
+          }
+        },
+        labelLine: {
+          show: !0,
+          lineStyle: {
+            color: "#7BC0CB"
+          }
+        },
+        label: {
+          show: !0,
+          position: "outside",
+          rich: {
+            b: {
+              color: "#7BC0CB",
+              fontSize: 12,
+              lineHeight: 20
+            },
+            c: {
+              fontSize: 16
+            }
+          },
+          formatter: `{b|{b} 
+}{c|{c}}{b|  亩}`
+        },
+        tooltip: {
+          formatter: (o) => {
+            if (o.seriesName !== "mouseoutSeries" && o.seriesName !== "pie2d") {
+              let h = ((u.series[o.seriesIndex].pieData.endRatio - u.series[o.seriesIndex].pieData.startRatio) * 100).toFixed(2);
+              return `${o.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${o.color};"></span>${h}%`;
+            }
+          }
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1
+        },
+        grid3D: {
+          show: !1,
+          boxHeight: f,
+          //圆环的高度
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 40,
+            //角度
+            distance: 300,
+            //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0,
+            //设置为0无法旋转
+            zoomSensitivity: 0,
+            //设置为0无法缩放
+            panSensitivity: 0,
+            //设置为0无法平移
+            autoRotate: !1
+            //自动旋转
+          }
+        },
+        series: i
+      };
+      return u;
+    },
+    //获取3d丙图的最高扇区的高度
+    getHeight3D(s, t) {
+      let e = 0;
+      for (let i of s) { e = i.pieData.value > e ? i.pieData.value : e; }
+      return t * 25 / e;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(s, t, e, i, a, n) {
+      let p = (s + t) / 2, l = s * Math.PI * 2, d = t * Math.PI * 2, f = p * Math.PI * 2;
+      s === 0 && t === 1 && (e = !1), a = typeof a < "u" ? a : 1 / 3;
+      let u = e ? Math.cos(f) * 0.1 : 0, o = e ? Math.sin(f) * 0.1 : 0, h = i ? 1.05 : 1;
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20
+        },
+        x: function(r, c) {
+          return r < l ? u + Math.cos(l) * (1 + Math.cos(c) * a) * h : r > d ? u + Math.cos(d) * (1 + Math.cos(c) * a) * h : u + Math.cos(r) * (1 + Math.cos(c) * a) * h;
+        },
+        y: function(r, c) {
+          return r < l ? o + Math.sin(l) * (1 + Math.cos(c) * a) * h : r > d ? o + Math.sin(d) * (1 + Math.cos(c) * a) * h : o + Math.sin(r) * (1 + Math.cos(c) * a) * h;
+        },
+        z: function(r, c) {
+          return r < -Math.PI * 0.5 ? Math.sin(r) : r > Math.PI * 2.5 ? Math.sin(r) * n * 0.1 : Math.sin(c) > 0 ? 1 * n * 0.1 : -1;
+        }
+      };
+    },
+    fomatFloat(s, t) {
+      let e = parseFloat(s);
+      if (isNaN(e)) { return !1; }
+      e = Math.round(s * Math.pow(10, t)) / Math.pow(10, t);
+      let i = e.toString(), a = i.indexOf(".");
+      for (a < 0 && (a = i.length, i += "."); i.length <= a + t;) { i += "0"; }
+      return i;
+    },
+    bindListen(s) {
+      let t = this, e = "";
+      s.on("mouseover", function(i) {
+        let a, n, p, l, d;
+        e !== i.seriesIndex && (e !== "" && (a = t.option.series[e].pieStatus.selected, n = !1, p = t.option.series[e].pieData.startRatio, l = t.option.series[e].pieData.endRatio, d = t.option.series[e].pieStatus.k, t.option.series[e].parametricEquation = t.getParametricEquation(
+          p,
+          l,
+          a,
+          n,
+          d,
+          t.option.series[e].pieData.value
+        ), t.option.series[e].pieStatus.hovered = n, e = ""), i.seriesName !== "mouseoutSeries" && i.seriesName !== "pie2d" && (a = t.option.series[i.seriesIndex].pieStatus.selected, n = !0, p = t.option.series[i.seriesIndex].pieData.startRatio, l = t.option.series[i.seriesIndex].pieData.endRatio, d = t.option.series[i.seriesIndex].pieStatus.k, t.option.series[i.seriesIndex].parametricEquation = t.getParametricEquation(
+          p,
+          l,
+          a,
+          n,
+          d,
+          t.option.series[i.seriesIndex].pieData.value + 5
+        ), t.option.series[i.seriesIndex].pieStatus.hovered = n, e = i.seriesIndex), s.setOption(t.option));
+      }), s.on("globalout", function() {
+        let i, a, n, p, l;
+        e !== "" && (i = t.option.series[e].pieStatus.selected, a = !1, l = t.option.series[e].pieStatus.k, n = t.option.series[e].pieData.startRatio, p = t.option.series[e].pieData.endRatio, t.option.series[e].parametricEquation = t.getParametricEquation(
+          n,
+          p,
+          i,
+          a,
+          l,
+          t.option.series[e].pieData.value
+        ), t.option.series[e].pieStatus.hovered = a, e = ""), s.setOption(t.option);
+      });
+    },
+    merge(s, t) {
+      if (typeof t == "object" && !Array.isArray(t)) {
+ for (let e of Object.keys(t)) { !s[e] || typeof s[e] != "object" || Array.isArray(t[e]) ? s[e] = t[e] : this.merge(s[e], t[e]); } 
+}
+      return s;
+    }
+  }
+}, I = { class: "name" }, M = ["id"];
+function D(s, t, e, i, a, n) {
+  return y(), g("div", {
+    class: "solidChart",
+    style: S([n.styleObject])
+  }, [
+    m("div", I, x(e.name), 1),
+    m("div", {
+      class: "chartBox",
+      id: a.echartId
+    }, null, 8, M)
+  ], 4);
+}
+const w = /* @__PURE__ */ v(b, [["render", D], ["__scopeId", "data-v-0274a0e9"]]);
+export {
+  w as default
+};

package/echartList/solid-pie/dist/index.umd.js

@@ -0,0 +1,6 @@
+(function(u, m){ typeof exports == "object" && typeof module < "u" ? module.exports = m(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], m) : (u = typeof globalThis < "u" ? globalThis : u || self, u.index = m(u.Vue)) })(this, function(u){
+ "use strict";const m = "", g = (s, t)=>{ const e = s.__vccOpts || s;for(const[i, a]of t){ e[i] = a; }return e }, S = {name: "cityGreenLand", components: {}, props: {data: {type: Array, required: !0}, name: {type: String, default: ""}, unit: {type: String, default: ""}, width: {type: String, default: "100%"}, height: {type: String, default: "100%"}, showLegend: {type: Boolean, default: !1}, layoutOptions: {type: Object, default: ()=>{}}, seriesOptions: {type: Object, default: ()=>{}}}, data(){ return{echartId: "", myChart: null, optionData: [{name: "林地面积统计", value: 1e4, itemStyle: {color: "#22c4ff"}}, {name: "草地面积统计", value: 12116, itemStyle: {color: "#aaff00"}}, {name: "耕地地面积统计", value: 16616, itemStyle: {color: "#ffaaff"}}], pieSeries: {name: "pie2d", type: "pie", labelLine: {length: 10, length2: 10}, label: {color: "red", show: !0}, startAngle: -20, clockwise: !1, radius: ["20%", "72%"], center: ["48%", "55%"], itemStyle: {opacity: 1}}} }, computed: {styleObject(){ return{width: this.width, height: this.height} }}, created(){ this.echartId = this.myUtils.generateUUID() }, mounted(){ this.init() }, methods: {init(){ this.data.sort((s, t)=>t.value - s.value), this.myChart = this.$echart.init(document.getElementById(this.echartId)), this.option = this.getPie3D(this.data, 0), this.option = this.merge(this.option, this.layoutOptions), this.pieSeries.data = JSON.parse(JSON.stringify(this.data)).map(s=>(s.itemStyle.color = "transparent", s)), this.option.series.push(this.merge(this.pieSeries, this.seriesOptions && this.seriesOptions.label || {})), console.log(this.option), this.myChart.setOption(this.option), this.bindListen(this.myChart), this.myChart.on("legendselectchanged", s=>{ let t = JSON.parse(JSON.stringify(this.data));t.forEach(e=>{ s.selected[e.name] || (e.value = 0) }), this.option = this.getPie3D(t, 0), this.option = this.merge(this.option, this.layoutOptions), this.pieSeries.data = JSON.parse(JSON.stringify(t)).map(e=>(e.itemStyle.color = "transparent", e)), this.option.series.push(this.merge(this.pieSeries, this.seriesOptions && this.seriesOptions.label || {})), console.log(this.option), this.myChart.setOption(this.option) }) }, getPie3D(s, t){
+ let e = this, i = [], a = 0, n = 0, p = 0, l = [], d = 1 - t;for(let o = 0;o < s.length;o++){ a += s[o].value;let h = {name: typeof s[o].name > "u" ? `series${o}` : s[o].name, type: "surface", parametric: !0, wireframe: {show: !1}, pieData: s[o], pieStatus: {selected: !1, hovered: !1, k: d}, center: ["10%", "50%"]};if(this.merge(h, this.seriesOptions && this.seriesOptions.surface || {}), typeof s[o].itemStyle < "u"){ let r = {};typeof s[o].itemStyle.color < "u" && (r.color = s[o].itemStyle.color), typeof s[o].itemStyle.opacity < "u" && (r.opacity = s[o].itemStyle.opacity), h.itemStyle = r }i.push(h) }l = [];for(let o = 0;o < i.length;o++){ p = n + i[o].pieData.value, i[o].pieData.startRatio = n / a, i[o].pieData.endRatio = p / a, i[o].parametricEquation = this.getParametricEquation(i[o].pieData.startRatio, i[o].pieData.endRatio, !1, !1, d, i[o].pieData.value), n = p;let h = e.fomatFloat(i[o].pieData.value / a, 4);l.push({name: i[o].name, value: h}) }let y = this.getHeight3D(i, 26), f = {legend: {data: l, orient: "horizontal", left: 10, top: 10, itemGap: 10, textStyle: {color: "#A1E2FF"}, show: this.showLegend, icon: "circle", formatter: function(o){ let h = l.filter(c=>c.name == o)[0], r = e.fomatFloat(h.value * 100, 2) + "%";return`${h.name}  ${r}` }}, labelLine: {show: !0, lineStyle: {color: "#7BC0CB"}}, label: {show: !0, position: "outside", rich: {b: {color: "#7BC0CB", fontSize: 12, lineHeight: 20}, c: {fontSize: 16}}, formatter: `{b|{b} 
+}{c|{c}}{b|  亩}`}, tooltip: {formatter: o=>{ if(o.seriesName !== "mouseoutSeries" && o.seriesName !== "pie2d"){ let h = ((f.series[o.seriesIndex].pieData.endRatio - f.series[o.seriesIndex].pieData.startRatio) * 100).toFixed(2);return`${o.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${o.color};"></span>${h}%` } }}, xAxis3D: {min: -1, max: 1}, yAxis3D: {min: -1, max: 1}, zAxis3D: {min: -1, max: 1}, grid3D: {show: !1, boxHeight: y, viewControl: {alpha: 40, distance: 300, rotateSensitivity: 0, zoomSensitivity: 0, panSensitivity: 0, autoRotate: !1}}, series: i};return f 
+}, getHeight3D(s, t){ let e = 0;for(let i of s){ e = i.pieData.value > e ? i.pieData.value : e; }return t * 25 / e }, getParametricEquation(s, t, e, i, a, n){ let p = (s + t) / 2, l = s * Math.PI * 2, d = t * Math.PI * 2, y = p * Math.PI * 2;s === 0 && t === 1 && (e = !1), a = typeof a < "u" ? a : .3333333333333333;let f = e ? Math.cos(y) * .1 : 0, o = e ? Math.sin(y) * .1 : 0, h = i ? 1.05 : 1;return{u: {min: -Math.PI, max: Math.PI * 3, step: Math.PI / 32}, v: {min: 0, max: Math.PI * 2, step: Math.PI / 20}, x: function(r, c){ return r < l ? f + Math.cos(l) * (1 + Math.cos(c) * a) * h : r > d ? f + Math.cos(d) * (1 + Math.cos(c) * a) * h : f + Math.cos(r) * (1 + Math.cos(c) * a) * h }, y: function(r, c){ return r < l ? o + Math.sin(l) * (1 + Math.cos(c) * a) * h : r > d ? o + Math.sin(d) * (1 + Math.cos(c) * a) * h : o + Math.sin(r) * (1 + Math.cos(c) * a) * h }, z: function(r, c){ return r < -Math.PI * .5 ? Math.sin(r) : r > Math.PI * 2.5 ? Math.sin(r) * n * .1 : Math.sin(c) > 0 ? 1 * n * .1 : -1 }} }, fomatFloat(s, t){ let e = parseFloat(s);if(isNaN(e)){ return!1; }e = Math.round(s * Math.pow(10, t)) / Math.pow(10, t);let i = e.toString(), a = i.indexOf(".");for(a < 0 && (a = i.length, i += ".");i.length <= a + t;){ i += "0"; }return i }, bindListen(s){ let t = this, e = "";s.on("mouseover", function(i){ let a, n, p, l, d;e !== i.seriesIndex && (e !== "" && (a = t.option.series[e].pieStatus.selected, n = !1, p = t.option.series[e].pieData.startRatio, l = t.option.series[e].pieData.endRatio, d = t.option.series[e].pieStatus.k, t.option.series[e].parametricEquation = t.getParametricEquation(p, l, a, n, d, t.option.series[e].pieData.value), t.option.series[e].pieStatus.hovered = n, e = ""), i.seriesName !== "mouseoutSeries" && i.seriesName !== "pie2d" && (a = t.option.series[i.seriesIndex].pieStatus.selected, n = !0, p = t.option.series[i.seriesIndex].pieData.startRatio, l = t.option.series[i.seriesIndex].pieData.endRatio, d = t.option.series[i.seriesIndex].pieStatus.k, t.option.series[i.seriesIndex].parametricEquation = t.getParametricEquation(p, l, a, n, d, t.option.series[i.seriesIndex].pieData.value + 5), t.option.series[i.seriesIndex].pieStatus.hovered = n, e = i.seriesIndex), s.setOption(t.option)) }), s.on("globalout", function(){ let i, a, n, p, l;e !== "" && (i = t.option.series[e].pieStatus.selected, a = !1, l = t.option.series[e].pieStatus.k, n = t.option.series[e].pieData.startRatio, p = t.option.series[e].pieData.endRatio, t.option.series[e].parametricEquation = t.getParametricEquation(n, p, i, a, l, t.option.series[e].pieData.value), t.option.series[e].pieStatus.hovered = a, e = ""), s.setOption(t.option) }) }, merge(s, t){ if(typeof t == "object" && !Array.isArray(t)){ for(let e of Object.keys(t)){ !s[e] || typeof s[e] != "object" || Array.isArray(t[e]) ? s[e] = t[e] : this.merge(s[e], t[e]); } }return s }}}, x = {class: "name"}, v = ["id"];function b(s, t, e, i, a, n){ return u.openBlock(), u.createElementBlock("div", {class: "solidChart", style: u.normalizeStyle([n.styleObject])}, [u.createElementVNode("div", x, u.toDisplayString(e.name), 1), u.createElementVNode("div", {class: "chartBox", id: a.echartId}, null, 8, v)], 4) }return g(S, [["render", b], ["__scopeId", "data-v-0274a0e9"]]) 
+});

package/echartList/solid-pie/dist/style.css

@@ -0,0 +1 @@
+.solidChart[data-v-0274a0e9]{color:#fff}.solidChart .name[data-v-0274a0e9]{height:40px;font-size:18px}.solidChart .chartBox[data-v-0274a0e9]{width:100%;height:calc(100% - 40px)}.solidChart .chartBox div[data-v-0274a0e9],.solidChart .chartBox canvas[data-v-0274a0e9]{width:100%;height:100%!important}