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

package/echartList/historyEchart/dist/index.umd.js

@@ -0,0 +1,10 @@
+(function(o, n){ typeof exports == "object" && typeof module < "u" ? module.exports = n(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], n) : (o = typeof globalThis < "u" ? globalThis : o || self, o.index = n(o.Vue)) })(this, function(o){
+ "use strict";function n(e, a){ let t;return function(i){ let r = this, l = arguments;t && clearTimeout(t), t = setTimeout(()=>{ t = null, e.call(r, l) }, a) } }const s = {props: {historyTime: {type: Array, default: ()=>[]}, historyValue: {type: Array, default: ()=>[]}, status: {type: Boolean, default: !0}, reflesh: {type: Boolean, default: !0}, refleshExtream: {type: Function}, resize: {type: Boolean, default: !1}}, watch: {status: function(e){ this.historyValue.length > 0 && this.onInquire() }, reflesh: function(e){ console.log(e), this.onInquire() }, resize(){ this.echart && this.echart.resize() }}, data(){ return{echart: null, echartId: "", zoomLock: !1} }, created(){ this.echartId = this.generateUUID() }, destroyed(){ window.removeEventListener("resize", this.echart.resize()) }, mounted(){ window.addEventListener("resize", n(()=>{ this.echart && this.echart.resize() }, 500)), this.onInquire() }, methods: {generateUUID(){ let e = new Date().getTime();return window.performance && typeof window.performance.now == "function" && (e += performance.now()), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t){ let i = (e + Math.random() * 16) % 16 | 0;return e = Math.floor(e / 16), (t === "x" ? i : i & 3 | 8).toString(16) }) }, onInquire(){
+ this.historyValue.length > 0 && setTimeout(()=>{
+ this.echart = this.$echart.init(document.getElementById(this.echartId), "light");let e = {grid: {left: "30px", top: "10%", right: "55px", bottom: "14%", containLabel: !0, color: "red"}, tooltip: {style: {color: "red"}}, xAxis: {type: "category", splitLine: {show: !1}, axisLine: {lineStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#e6e6e6" : "#999fa8", width: 1}}, axisLabel: {margin: 12, textStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2", fontSize: "13"}}, labels: {style: {color: "#d3d8e2"}}, style: {color: "#d3d8e2"}, data: this.historyTime}, yAxis: {gridLineColor: "#3b4357", gridLineWidth: 1, type: "value", axisLine: {show: !1}, axisTick: {show: !1}, axisLabel: {margin: 12, textStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2", fontSize: "13"}}, style: {color: "#d3d8e2", fontWeight: "bold", fontSize: "12px", fontFamily: "Trebuchet MS, Verdana, sans-serif"}, title: {style: {color: "#d3d8e2", fontWeight: "bold", fontSize: "12px", fontFamily: "Trebuchet MS, Verdana, sans-serif"}}, labels: {style: {color: "#d3d8e2"}}}, dataZoom: [{type: "slider", show: !0, xAxisIndex: [0], start: 0, end: 100, yAxisIndex: [3], fillerColor: "transparent", textStyle: {color: window.localStorage.getItem("theme") && window.localStorage.getItem("theme") == "light" ? "#595959" : "#d3d8e2", fontSize: "10"}, labelFormatter: function(a, t){
+ return t.split(" ")[0] + `
+` + t.split(" ")[1] 
+}, selectedDataBackground: {lineStyle: {color: "#39CC7E", type: "solid"}, areaStyle: {color: "transparent"}}, dataBackground: {lineStyle: {color: "#184e31"}, areaStyle: {color: "transparent"}}}], series: [{data: this.historyValue, type: "line", smooth: !0, sampling: "average", itemStyle: {normal: {color: "#39CC7E", lineStyle: {color: "#39CC7E"}}}, lineStyle: {width: 2}, emphasis: {lineStyle: {width: 2}}}]};this.echart.setOption(e), this.echart.on("dataZoom", a=>{ this.$nextTick(()=>{ a.batch ? (a.batch[0].start, a.batch[0].end) : (a.start, a.end);let t = this.echart.getModel().option, i = t.dataZoom[0].startValue, r = t.dataZoom[0].endValue;return this.refleshExtream(i, r), this.echart }) }), this.echart.hideLoading() 
+}, 500) 
+}}}, y = "", d = (e, a)=>{ const t = e.__vccOpts || e;for(const[i, r]of a){ t[i] = r; }return t }, c = s, h = {class: "historyEchart"}, u = ["id"], f = ["data-noData"];function m(e, a, t, i, r, l){ return o.openBlock(), o.createElementBlock("div", h, [e.historyValue.length > 0 ? (o.openBlock(), o.createElementBlock("div", {id: e.echartId, key: e.reflesh}, null, 8, u)) : o.createCommentVNode("", !0), e.historyValue.length == 0 ? (o.openBlock(), o.createElementBlock("div", {key: 1, class: "noDataTips", "data-noData": e.$t("publics.noData")}, null, 8, f)) : o.createCommentVNode("", !0)]) }return d(c, [["render", m], ["__scopeId", "data-v-1fae3189"]]) 
+});

package/echartList/historyEchart/dist/style.css

@@ -0,0 +1 @@
+.historyEchart[data-v-1fae3189]{width:100%;height:100%}.historyEchart>div[data-v-1fae3189]{width:100%;height:100%}.historyEchart .noData[data-v-1fae3189]{color:var(--frame-main-color);display:flex;justify-content:center;align-items:center}

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

@@ -0,0 +1,290 @@
+import { createElementBlock as d, createElementVNode as u, normalizeStyle as x, openBlock as y, toDisplayString as p } from "vue";
+
+import "./style.css";
+const g = (s, t) => {
+  const e = s.__vccOpts || s;
+  for (const [c, h] of t) { e[c] = h; }
+  return e;
+}, b = {
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    xData: {
+      type: Array,
+      default: () => []
+    },
+    yData: {
+      type: Array,
+      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: () => ({})
+    }
+  },
+  computed: {
+    styleObject() {
+      return {
+        width: this.width,
+        height: this.height
+      };
+    }
+  },
+  data() {
+    return {
+      echartId: "",
+      myChart: null,
+      option: {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          },
+          formatter: function(s, t, e) {
+            const c = s[1];
+            return c.name + " : " + c.value;
+          }
+        },
+        grid: {
+          left: "2%",
+          right: "10%",
+          top: "20%",
+          bottom: "5%",
+          containLabel: !0
+        },
+        xAxis: {
+          type: "category",
+          data: this.xData,
+          axisLine: {
+            show: !0,
+            lineStyle: {
+              width: 2,
+              color: "#2B7BD6"
+            }
+          },
+          axisTick: {
+            show: !1
+          },
+          axisLabel: {
+            fontSize: 14
+          }
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: !0,
+            lineStyle: {
+              width: 2,
+              color: "#2B7BD6"
+            }
+          },
+          splitLine: {
+            show: !0,
+            lineStyle: {
+              color: "#153D7D"
+            }
+          },
+          axisTick: {
+            show: !1
+          },
+          axisLabel: {
+            fontSize: 14
+          }
+          // boundaryGap: ['20%', '20%'],
+        },
+        legend: {
+          orient: "horizontal",
+          textStyle: {
+            color: "#A1E2FF"
+          },
+          show: this.showLegend,
+          icon: "circle"
+        }
+      },
+      customSeries: {
+        type: "custom",
+        renderItem: (s, t) => {
+          const e = t.coord([t.value(0), t.value(1)]);
+          return {
+            type: "group",
+            children: [
+              {
+                type: "CubeLeft",
+                shape: {
+                  api: t,
+                  xValue: t.value(0),
+                  yValue: t.value(1),
+                  x: e[0],
+                  y: e[1],
+                  xAxisPoint: t.coord([t.value(0), 0])
+                },
+                style: {
+                  fill: this.seriesOptions.color && this.seriesOptions.color.CubeLeft || new this.$echart.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: "#33BCEB"
+                    },
+                    {
+                      offset: 1,
+                      color: "#337CEB"
+                    }
+                  ])
+                }
+              },
+              {
+                type: "CubeRight",
+                shape: {
+                  api: t,
+                  xValue: t.value(0),
+                  yValue: t.value(1),
+                  x: e[0],
+                  y: e[1],
+                  xAxisPoint: t.coord([t.value(0), 0])
+                },
+                style: {
+                  fill: this.seriesOptions.color && this.seriesOptions.color.CubeRight || new this.$echart.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: "#28A2CE"
+                    },
+                    {
+                      offset: 1,
+                      color: "#1A57B7"
+                    }
+                  ])
+                }
+              },
+              {
+                type: "CubeTop",
+                shape: {
+                  api: t,
+                  xValue: t.value(0),
+                  yValue: t.value(1),
+                  x: e[0],
+                  y: e[1],
+                  xAxisPoint: t.coord([t.value(0), 0])
+                },
+                style: {
+                  fill: this.seriesOptions.color && this.seriesOptions.color.CubeTop || new this.$echart.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: "#43C4F1"
+                    },
+                    {
+                      offset: 1,
+                      color: "#28A2CE"
+                    }
+                  ])
+                }
+              }
+            ]
+          };
+        },
+        data: this.yData
+      },
+      labelSeries: {
+        type: "bar",
+        label: {
+          normal: {
+            show: !0,
+            position: "top",
+            formatter: (s) => s.value + this.unit,
+            fontSize: 16,
+            color: "#43C4F1",
+            offset: [0, -25]
+          }
+        },
+        itemStyle: {
+          color: "transparent"
+        },
+        tooltip: {},
+        data: this.yData
+      }
+    };
+  },
+  created() {
+    this.echartId = this.myUtils.generateUUID();
+  },
+  mounted() {
+    const e = this.$echart.graphic.extendShape({
+      shape: {
+        x: 0,
+        y: 0
+      },
+      buildPath: function(l, o) {
+        const i = o.xAxisPoint, r = [o.x, o.y], n = [o.x - 20, o.y - 10], a = [i[0] - 20, i[1] - 10], f = [i[0], i[1]];
+        l.moveTo(r[0], r[1]).lineTo(n[0], n[1]).lineTo(a[0], a[1]).lineTo(f[0], f[1]).closePath();
+      }
+    }), c = this.$echart.graphic.extendShape({
+      shape: {
+        x: 0,
+        y: 0
+      },
+      buildPath: function(l, o) {
+        const i = o.xAxisPoint, r = [o.x, o.y], n = [i[0], i[1]], a = [i[0] + 20, i[1] - 10], f = [o.x + 20, o.y - 10];
+        l.moveTo(r[0], r[1]).lineTo(n[0], n[1]).lineTo(a[0], a[1]).lineTo(f[0], f[1]).closePath();
+      }
+    }), h = this.$echart.graphic.extendShape({
+      shape: {
+        x: 0,
+        y: 0
+      },
+      buildPath: function(l, o) {
+        const i = [o.x, o.y], r = [o.x + 20, o.y - 10], n = [o.x, o.y - 20], a = [o.x - 20, o.y - 10];
+        l.moveTo(i[0], i[1]).lineTo(r[0], r[1]).lineTo(n[0], n[1]).lineTo(a[0], a[1]).closePath();
+      }
+    });
+    this.$echart.graphic.registerShape("CubeLeft", e), this.$echart.graphic.registerShape("CubeRight", c), this.$echart.graphic.registerShape("CubeTop", h), this.drawEchart();
+  },
+  methods: {
+    drawEchart() {
+      let s = document.getElementById(this.echartId);
+      this.myChart = this.$echart.init(s), this.option = Object.assign({}, this.option, this.layoutOptions), this.merge(this.labelSeries.label, this.seriesOptions.label || {}), this.option.series = [this.customSeries, this.labelSeries], this.myChart.setOption(this.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;
+    }
+  }
+}, m = { class: "name" }, v = ["id"];
+function S(s, t, e, c, h, l) {
+  return y(), d("div", {
+    class: "solidChart",
+    style: x([l.styleObject])
+  }, [
+    u("div", m, p(e.name), 1),
+    u("div", {
+      class: "chartBox",
+      id: h.echartId
+    }, null, 8, v)
+  ], 4);
+}
+const C = /* @__PURE__ */ g(b, [["render", S], ["__scopeId", "data-v-ade5a470"]]);
+export {
+  C as default
+};

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

@@ -0,0 +1 @@
+(function(r, d){ typeof exports == "object" && typeof module < "u" ? module.exports = d(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], d) : (r = typeof globalThis < "u" ? globalThis : r || self, r.index = d(r.Vue)) })(this, function(r){ "use strict";const d = "", y = (i, e)=>{ const t = i.__vccOpts || i;for(const[l, f]of e){ t[l] = f; }return t }, x = {props: {name: {type: String, default: ""}, xData: {type: Array, default: ()=>[]}, yData: {type: Array, 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: ()=>({})}}, computed: {styleObject(){ return{width: this.width, height: this.height} }}, data(){ return{echartId: "", myChart: null, option: {backgroundColor: "transparent", tooltip: {trigger: "axis", axisPointer: {type: "shadow"}, formatter: function(i, e, t){ const l = i[1];return l.name + " : " + l.value }}, grid: {left: "2%", right: "10%", top: "20%", bottom: "5%", containLabel: !0}, xAxis: {type: "category", data: this.xData, axisLine: {show: !0, lineStyle: {width: 2, color: "#2B7BD6"}}, axisTick: {show: !1}, axisLabel: {fontSize: 14}}, yAxis: {type: "value", axisLine: {show: !0, lineStyle: {width: 2, color: "#2B7BD6"}}, splitLine: {show: !0, lineStyle: {color: "#153D7D"}}, axisTick: {show: !1}, axisLabel: {fontSize: 14}}, legend: {orient: "horizontal", textStyle: {color: "#A1E2FF"}, show: this.showLegend, icon: "circle"}}, customSeries: {type: "custom", renderItem: (i, e)=>{ const t = e.coord([e.value(0), e.value(1)]);return{type: "group", children: [{type: "CubeLeft", shape: {api: e, xValue: e.value(0), yValue: e.value(1), x: t[0], y: t[1], xAxisPoint: e.coord([e.value(0), 0])}, style: {fill: this.seriesOptions.color && this.seriesOptions.color.CubeLeft || new this.$echart.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: "#33BCEB"}, {offset: 1, color: "#337CEB"}])}}, {type: "CubeRight", shape: {api: e, xValue: e.value(0), yValue: e.value(1), x: t[0], y: t[1], xAxisPoint: e.coord([e.value(0), 0])}, style: {fill: this.seriesOptions.color && this.seriesOptions.color.CubeRight || new this.$echart.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: "#28A2CE"}, {offset: 1, color: "#1A57B7"}])}}, {type: "CubeTop", shape: {api: e, xValue: e.value(0), yValue: e.value(1), x: t[0], y: t[1], xAxisPoint: e.coord([e.value(0), 0])}, style: {fill: this.seriesOptions.color && this.seriesOptions.color.CubeTop || new this.$echart.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: "#43C4F1"}, {offset: 1, color: "#28A2CE"}])}}]} }, data: this.yData}, labelSeries: {type: "bar", label: {normal: {show: !0, position: "top", formatter: i=>i.value + this.unit, fontSize: 16, color: "#43C4F1", offset: [0, -25]}}, itemStyle: {color: "transparent"}, tooltip: {}, data: this.yData}} }, created(){ this.echartId = this.myUtils.generateUUID() }, mounted(){ const t = this.$echart.graphic.extendShape({shape: {x: 0, y: 0}, buildPath: function(h, o){ const s = o.xAxisPoint, n = [o.x, o.y], c = [o.x - 20, o.y - 10], a = [s[0] - 20, s[1] - 10], u = [s[0], s[1]];h.moveTo(n[0], n[1]).lineTo(c[0], c[1]).lineTo(a[0], a[1]).lineTo(u[0], u[1]).closePath() }}), l = this.$echart.graphic.extendShape({shape: {x: 0, y: 0}, buildPath: function(h, o){ const s = o.xAxisPoint, n = [o.x, o.y], c = [s[0], s[1]], a = [s[0] + 20, s[1] - 10], u = [o.x + 20, o.y - 10];h.moveTo(n[0], n[1]).lineTo(c[0], c[1]).lineTo(a[0], a[1]).lineTo(u[0], u[1]).closePath() }}), f = this.$echart.graphic.extendShape({shape: {x: 0, y: 0}, buildPath: function(h, o){ const s = [o.x, o.y], n = [o.x + 20, o.y - 10], c = [o.x, o.y - 20], a = [o.x - 20, o.y - 10];h.moveTo(s[0], s[1]).lineTo(n[0], n[1]).lineTo(c[0], c[1]).lineTo(a[0], a[1]).closePath() }});this.$echart.graphic.registerShape("CubeLeft", t), this.$echart.graphic.registerShape("CubeRight", l), this.$echart.graphic.registerShape("CubeTop", f), this.drawEchart() }, methods: {drawEchart(){ let i = document.getElementById(this.echartId);this.myChart = this.$echart.init(i), this.option = Object.assign({}, this.option, this.layoutOptions), this.merge(this.labelSeries.label, this.seriesOptions.label || {}), this.option.series = [this.customSeries, this.labelSeries], this.myChart.setOption(this.option) }, merge(i, e){ if(typeof e == "object" && !Array.isArray(e)){ for(let t of Object.keys(e)){ !i[t] || typeof i[t] != "object" || Array.isArray(e[t]) ? i[t] = e[t] : this.merge(i[t], e[t]); } }return i }}}, p = {class: "name"}, g = ["id"];function b(i, e, t, l, f, h){ return r.openBlock(), r.createElementBlock("div", {class: "solidChart", style: r.normalizeStyle([h.styleObject])}, [r.createElementVNode("div", p, r.toDisplayString(t.name), 1), r.createElementVNode("div", {class: "chartBox", id: f.echartId}, null, 8, g)], 4) }return y(x, [["render", b], ["__scopeId", "data-v-ade5a470"]]) });

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

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

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

@@ -0,0 +1,332 @@
+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, o] of t) { e[i] = o; }
+  return e;
+}, b = {
+  name: "cityGreenLand",
+  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"
+        }
+      }],
+      option: {},
+      pieSeries: {
+        name: "pie2d",
+        type: "pie",
+        labelLine: {
+          length: 10,
+          length2: 10
+        },
+        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.$nextTick(function() {
+      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.8), 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 || {})), 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.8), 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 = [], o = 0, n = 0, p = 0, l = [], d = 1 - t;
+      for (let a = 0; a < s.length; a++) {
+        o += s[a].value;
+        let h = {
+          name: typeof s[a].name > "u" ? `series${a}` : s[a].name,
+          type: "surface",
+          parametric: !0,
+          wireframe: {
+            show: !1
+          },
+          pieData: s[a],
+          pieStatus: {
+            selected: !1,
+            hovered: !1,
+            k: d
+          },
+          center: ["20%", "30%"]
+        };
+        if (this.merge(h, this.seriesOptions && this.seriesOptions.surface || {}), typeof s[a].itemStyle < "u") {
+          let r = {};
+          typeof s[a].itemStyle.color < "u" && (r.color = s[a].itemStyle.color), typeof s[a].itemStyle.opacity < "u" && (r.opacity = s[a].itemStyle.opacity), h.itemStyle = r;
+        }
+        i.push(h);
+      }
+      l = [];
+      for (let a = 0; a < i.length; a++) {
+        p = n + i[a].pieData.value, i[a].pieData.startRatio = n / o, i[a].pieData.endRatio = p / o, i[a].parametricEquation = this.getParametricEquation(
+          i[a].pieData.startRatio,
+          i[a].pieData.endRatio,
+          !1,
+          !1,
+          d,
+          i[a].pieData.value
+        ), n = p;
+        let h = e.fomatFloat(i[a].pieData.value / o, 4);
+        l.push({
+          name: i[a].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(a) {
+            let h = l.filter((c) => c.name == a)[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: (a) => {
+            if (a.seriesName !== "mouseoutSeries" && a.seriesName !== "pie2d") {
+              let h = ((u.series[a.seriesIndex].pieData.endRatio - u.series[a.seriesIndex].pieData.startRatio) * 100).toFixed(2);
+              return `${a.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${a.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, o, 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), o = typeof o < "u" ? o : 1 / 3;
+      let u = e ? Math.cos(f) * 0.1 : 0, a = 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) * (2 + Math.cos(c) * o) * h : r > d ? u + Math.cos(d) * (2 + Math.cos(c) * o) * h : u + Math.cos(r) * (2 + Math.cos(c) * o) * h;
+        },
+        y: function(r, c) {
+          return r < l ? a + Math.sin(l) * (2 + Math.cos(c) * o) * h : r > d ? a + Math.sin(d) * (2 + Math.cos(c) * o) * h : a + Math.sin(r) * (2 + Math.cos(c) * o) * 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(), o = i.indexOf(".");
+      for (o < 0 && (o = i.length, i += "."); i.length <= o + t;) { i += "0"; }
+      return i;
+    },
+    bindListen(s) {
+      let t = this, e = "";
+      s.on("mouseover", function(i) {
+        let o, n, p, l, d;
+        e !== i.seriesIndex && (e !== "" && (o = 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,
+          o,
+          n,
+          d,
+          t.option.series[e].pieData.value
+        ), t.option.series[e].pieStatus.hovered = n, e = ""), i.seriesName !== "mouseoutSeries" && i.seriesName !== "pie2d" && (o = 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,
+          o,
+          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, o, n, p, l;
+        e !== "" && (i = t.option.series[e].pieStatus.selected, o = !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,
+          o,
+          l,
+          t.option.series[e].pieData.value
+        ), t.option.series[e].pieStatus.hovered = o, 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, o, n) {
+  return y(), g("div", {
+    class: "solidChart",
+    style: S([n.styleObject])
+  }, [
+    m("div", I, x(e.name), 1),
+    m("div", {
+      class: "chartBox",
+      id: o.echartId
+    }, null, 8, M)
+  ], 4);
+}
+const O = /* @__PURE__ */ v(b, [["render", D], ["__scopeId", "data-v-82a2ccf1"]]);
+export {
+  O as default
+};

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

@@ -0,0 +1,6 @@
+(function(c, m){ typeof exports == "object" && typeof module < "u" ? module.exports = m(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], m) : (c = typeof globalThis < "u" ? globalThis : c || self, c.index = m(c.Vue)) })(this, function(c){
+ "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", 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"}}], option: {}, pieSeries: {name: "pie2d", type: "pie", labelLine: {length: 10, length2: 10}, 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.$nextTick(function(){ 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, .8), 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 || {})), 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, .8), 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: ["20%", "30%"]};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(u=>u.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, u){ return r < l ? f + Math.cos(l) * (2 + Math.cos(u) * a) * h : r > d ? f + Math.cos(d) * (2 + Math.cos(u) * a) * h : f + Math.cos(r) * (2 + Math.cos(u) * a) * h }, y: function(r, u){ return r < l ? o + Math.sin(l) * (2 + Math.cos(u) * a) * h : r > d ? o + Math.sin(d) * (2 + Math.cos(u) * a) * h : o + Math.sin(r) * (2 + Math.cos(u) * a) * h }, z: function(r, u){ return r < -Math.PI * .5 ? Math.sin(r) : r > Math.PI * 2.5 ? Math.sin(r) * n * .1 : Math.sin(u) > 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 c.openBlock(), c.createElementBlock("div", {class: "solidChart", style: c.normalizeStyle([n.styleObject])}, [c.createElementVNode("div", x, c.toDisplayString(e.name), 1), c.createElementVNode("div", {class: "chartBox", id: a.echartId}, null, 8, v)], 4) }return g(S, [["render", b], ["__scopeId", "data-v-82a2ccf1"]]) 
+});

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

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