ylyx-cli 1.0.16 → 1.1.0

package/templates/vue-app/files/src/components/Echarts/Funnel.vue

@@ -1,120 +1,120 @@
-<template>
-  <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import echarts from 'echarts';
-
-require('echarts/theme/macarons'); // echarts theme
-import { debounce } from '@/utils';
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '300px',
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  mounted() {
-    this.initChart();
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 100);
-    window.addEventListener('resize', this.__resizeHandler);
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    window.removeEventListener('resize', this.__resizeHandler);
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons');
-
-      this.chart.setOption({
-        title: {
-          text: '漏斗图',
-          subtext: '纯属虚构',
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}%',
-        },
-        toolbox: {
-          feature: {
-            dataView: { readOnly: false },
-            restore: {},
-            saveAsImage: {},
-          },
-        },
-        legend: {
-          data: ['展现', '点击', '访问', '咨询', '订单'],
-        },
-        calculable: true,
-        series: [
-          {
-            name: '漏斗图',
-            type: 'funnel',
-            left: '10%',
-            top: 60,
-            bottom: 60,
-            width: '80%',
-            // height: {totalHeight} - y - y2,
-            min: 0,
-            max: 100,
-            minSize: '0%',
-            maxSize: '100%',
-            sort: 'descending',
-            gap: 2,
-            label: {
-              show: true,
-              position: 'inside',
-            },
-            labelLine: {
-              length: 10,
-              lineStyle: {
-                width: 1,
-                type: 'solid',
-              },
-            },
-            itemStyle: {
-              borderColor: '#fff',
-              borderWidth: 1,
-            },
-            emphasis: {
-              label: {
-                fontSize: 20,
-              },
-            },
-            data: [
-              { value: 60, name: '访问' },
-              { value: 40, name: '咨询' },
-              { value: 20, name: '订单' },
-              { value: 80, name: '点击' },
-              { value: 100, name: '展现' },
-            ],
-          },
-        ],
-      });
-    },
-  },
-};
-</script>
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+
+require('echarts/theme/macarons'); // echarts theme
+import { debounce } from '@/utils';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '300px',
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener('resize', this.__resizeHandler);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener('resize', this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+
+      this.chart.setOption({
+        title: {
+          text: '漏斗图',
+          subtext: '纯属虚构',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c}%',
+        },
+        toolbox: {
+          feature: {
+            dataView: { readOnly: false },
+            restore: {},
+            saveAsImage: {},
+          },
+        },
+        legend: {
+          data: ['展现', '点击', '访问', '咨询', '订单'],
+        },
+        calculable: true,
+        series: [
+          {
+            name: '漏斗图',
+            type: 'funnel',
+            left: '10%',
+            top: 60,
+            bottom: 60,
+            width: '80%',
+            // height: {totalHeight} - y - y2,
+            min: 0,
+            max: 100,
+            minSize: '0%',
+            maxSize: '100%',
+            sort: 'descending',
+            gap: 2,
+            label: {
+              show: true,
+              position: 'inside',
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: 'solid',
+              },
+            },
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1,
+            },
+            emphasis: {
+              label: {
+                fontSize: 20,
+              },
+            },
+            data: [
+              { value: 60, name: '访问' },
+              { value: 40, name: '咨询' },
+              { value: 20, name: '订单' },
+              { value: 80, name: '点击' },
+              { value: 100, name: '展现' },
+            ],
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

package/templates/vue-app/files/src/components/Echarts/Gauge.vue

@@ -1,74 +1,74 @@
-<template>
-  <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import echarts from 'echarts';
-
-require('echarts/theme/macarons'); // echarts theme
-import { debounce } from '@/utils';
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '300px',
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  mounted() {
-    this.initChart();
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 100);
-    window.addEventListener('resize', this.__resizeHandler);
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    window.removeEventListener('resize', this.__resizeHandler);
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons');
-
-      this.chart.setOption({
-        tooltip: {
-          formatter: '{a} <br/>{b} : {c}%',
-        },
-        toolbox: {
-          feature: {
-            restore: {},
-            saveAsImage: {},
-          },
-        },
-        series: [
-          {
-            name: '业务指标',
-            type: 'gauge',
-            detail: { formatter: '{value}%' },
-            data: [{ value: 50, name: '完成率' }],
-          },
-        ],
-      });
-    },
-  },
-};
-</script>
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+
+require('echarts/theme/macarons'); // echarts theme
+import { debounce } from '@/utils';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '300px',
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener('resize', this.__resizeHandler);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener('resize', this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+
+      this.chart.setOption({
+        tooltip: {
+          formatter: '{a} <br/>{b} : {c}%',
+        },
+        toolbox: {
+          feature: {
+            restore: {},
+            saveAsImage: {},
+          },
+        },
+        series: [
+          {
+            name: '业务指标',
+            type: 'gauge',
+            detail: { formatter: '{value}%' },
+            data: [{ value: 50, name: '完成率' }],
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

package/templates/vue-app/files/src/components/Echarts/Graph.vue

@@ -1,101 +1,101 @@
-<template>
-  <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import echarts from 'echarts';
-
-require('echarts/theme/macarons'); // echarts theme
-import { debounce } from '@/utils';
-
-export default {
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '300px',
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  mounted() {
-    this.initChart();
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 100);
-    window.addEventListener('resize', this.__resizeHandler);
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    window.removeEventListener('resize', this.__resizeHandler);
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons');
-      const axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日'];
-      const data = axisData.map(function (item, i) {
-        return Math.round(Math.random() * 1000 * (i + 1));
-      });
-      const links = data.map(function (item, i) {
-        return {
-          source: i,
-          target: i + 1,
-        };
-      });
-      links.pop();
-      this.chart.setOption({
-        title: {
-          text: '笛卡尔坐标系上的 Graph',
-        },
-        tooltip: {},
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: axisData,
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            type: 'graph',
-            layout: 'none',
-            coordinateSystem: 'cartesian2d',
-            symbolSize: 40,
-            label: {
-              normal: {
-                show: true,
-              },
-            },
-            edgeSymbol: ['circle', 'arrow'],
-            edgeSymbolSize: [4, 10],
-            data: data,
-            links: links,
-            lineStyle: {
-              normal: {
-                color: '#2f4554',
-              },
-            },
-          },
-        ],
-      });
-    },
-  },
-};
-</script>
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+
+require('echarts/theme/macarons'); // echarts theme
+import { debounce } from '@/utils';
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '300px',
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener('resize', this.__resizeHandler);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener('resize', this.__resizeHandler);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      const axisData = ['周一', '周二', '周三', '很长很长的周四', '周五', '周六', '周日'];
+      const data = axisData.map(function (item, i) {
+        return Math.round(Math.random() * 1000 * (i + 1));
+      });
+      const links = data.map(function (item, i) {
+        return {
+          source: i,
+          target: i + 1,
+        };
+      });
+      links.pop();
+      this.chart.setOption({
+        title: {
+          text: '笛卡尔坐标系上的 Graph',
+        },
+        tooltip: {},
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: axisData,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            type: 'graph',
+            layout: 'none',
+            coordinateSystem: 'cartesian2d',
+            symbolSize: 40,
+            label: {
+              normal: {
+                show: true,
+              },
+            },
+            edgeSymbol: ['circle', 'arrow'],
+            edgeSymbolSize: [4, 10],
+            data: data,
+            links: links,
+            lineStyle: {
+              normal: {
+                color: '#2f4554',
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>