ylyx-cli 1.0.16 → 1.1.0

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

@@ -1,110 +1,110 @@
-<template>
-  <div :class="className" :style="{ height: height, width: width }" />
-</template>
-
-<script>
-import echarts from 'echarts';
-import 'echarts-gl';
-
-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 data = [];
-      for (let t = 0; t < 25; t += 0.001) {
-        const x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
-        const y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
-        const z = t + 2.0 * Math.sin(75 * t);
-        data.push([x, y, z]);
-      }
-      this.chart.setOption({
-        tooltip: {},
-        backgroundColor: '#fff',
-        visualMap: {
-          show: false,
-          dimension: 2,
-          min: 0,
-          max: 30,
-          inRange: {
-            color: [
-              '#313695',
-              '#4575b4',
-              '#74add1',
-              '#abd9e9',
-              '#e0f3f8',
-              '#ffffbf',
-              '#fee090',
-              '#fdae61',
-              '#f46d43',
-              '#d73027',
-              '#a50026',
-            ],
-          },
-        },
-        xAxis3D: {
-          type: 'value',
-        },
-        yAxis3D: {
-          type: 'value',
-        },
-        zAxis3D: {
-          type: 'value',
-        },
-        grid3D: {
-          viewControl: {
-            projection: 'orthographic',
-          },
-        },
-        series: [
-          {
-            type: 'line3D',
-            data: data,
-            lineStyle: {
-              width: 4,
-            },
-          },
-        ],
-      });
-    },
-  },
-};
-</script>
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+import 'echarts-gl';
+
+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 data = [];
+      for (let t = 0; t < 25; t += 0.001) {
+        const x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
+        const y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
+        const z = t + 2.0 * Math.sin(75 * t);
+        data.push([x, y, z]);
+      }
+      this.chart.setOption({
+        tooltip: {},
+        backgroundColor: '#fff',
+        visualMap: {
+          show: false,
+          dimension: 2,
+          min: 0,
+          max: 30,
+          inRange: {
+            color: [
+              '#313695',
+              '#4575b4',
+              '#74add1',
+              '#abd9e9',
+              '#e0f3f8',
+              '#ffffbf',
+              '#fee090',
+              '#fdae61',
+              '#f46d43',
+              '#d73027',
+              '#a50026',
+            ],
+          },
+        },
+        xAxis3D: {
+          type: 'value',
+        },
+        yAxis3D: {
+          type: 'value',
+        },
+        zAxis3D: {
+          type: 'value',
+        },
+        grid3D: {
+          viewControl: {
+            projection: 'orthographic',
+          },
+        },
+        series: [
+          {
+            type: 'line3D',
+            data: data,
+            lineStyle: {
+              width: 4,
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

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

@@ -1,84 +1,84 @@
-<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: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)',
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
-        },
-        calculable: true,
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' },
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600,
-          },
-        ],
-      });
-    },
-  },
-};
-</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: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
+        },
+        calculable: true,
+        series: [
+          {
+            name: 'WEEKLY WRITE ARTICLES',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: [
+              { value: 320, name: 'Industries' },
+              { value: 240, name: 'Technology' },
+              { value: 149, name: 'Forex' },
+              { value: 100, name: 'Gold' },
+              { value: 59, name: 'Forecasts' },
+            ],
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>