ylyx-cli 1.0.0

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +1,301 @@
+<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: {
+          position: 'top',
+        },
+        animation: false,
+        grid: {
+          height: '50%',
+          y: '10%',
+        },
+        xAxis: {
+          type: 'category',
+          data: [
+            '12a',
+            '1a',
+            '2a',
+            '3a',
+            '4a',
+            '5a',
+            '6a',
+            '7a',
+            '8a',
+            '9a',
+            '10a',
+            '11a',
+            '12p',
+            '1p',
+            '2p',
+            '3p',
+            '4p',
+            '5p',
+            '6p',
+            '7p',
+            '8p',
+            '9p',
+            '10p',
+            '11p',
+          ],
+          splitArea: {
+            show: true,
+          },
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
+          splitArea: {
+            show: true,
+          },
+        },
+        visualMap: {
+          min: 0,
+          max: 10,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%',
+        },
+        series: [
+          {
+            name: 'Punch Card',
+            type: 'heatmap',
+            data: [
+              [0, 0, 5],
+              [0, 1, 1],
+              [0, 2, 0],
+              [0, 3, 0],
+              [0, 4, 0],
+              [0, 5, 0],
+              [0, 6, 0],
+              [0, 7, 0],
+              [0, 8, 0],
+              [0, 9, 0],
+              [0, 10, 0],
+              [0, 11, 2],
+              [0, 12, 4],
+              [0, 13, 1],
+              [0, 14, 1],
+              [0, 15, 3],
+              [0, 16, 4],
+              [0, 17, 6],
+              [0, 18, 4],
+              [0, 19, 4],
+              [0, 20, 3],
+              [0, 21, 3],
+              [0, 22, 2],
+              [0, 23, 5],
+              [1, 0, 7],
+              [1, 1, 0],
+              [1, 2, 0],
+              [1, 3, 0],
+              [1, 4, 0],
+              [1, 5, 0],
+              [1, 6, 0],
+              [1, 7, 0],
+              [1, 8, 0],
+              [1, 9, 0],
+              [1, 10, 5],
+              [1, 11, 2],
+              [1, 12, 2],
+              [1, 13, 6],
+              [1, 14, 9],
+              [1, 15, 11],
+              [1, 16, 6],
+              [1, 17, 7],
+              [1, 18, 8],
+              [1, 19, 12],
+              [1, 20, 5],
+              [1, 21, 5],
+              [1, 22, 7],
+              [1, 23, 2],
+              [2, 0, 1],
+              [2, 1, 1],
+              [2, 2, 0],
+              [2, 3, 0],
+              [2, 4, 0],
+              [2, 5, 0],
+              [2, 6, 0],
+              [2, 7, 0],
+              [2, 8, 0],
+              [2, 9, 0],
+              [2, 10, 3],
+              [2, 11, 2],
+              [2, 12, 1],
+              [2, 13, 9],
+              [2, 14, 8],
+              [2, 15, 10],
+              [2, 16, 6],
+              [2, 17, 5],
+              [2, 18, 5],
+              [2, 19, 5],
+              [2, 20, 7],
+              [2, 21, 4],
+              [2, 22, 2],
+              [2, 23, 4],
+              [3, 0, 7],
+              [3, 1, 3],
+              [3, 2, 0],
+              [3, 3, 0],
+              [3, 4, 0],
+              [3, 5, 0],
+              [3, 6, 0],
+              [3, 7, 0],
+              [3, 8, 1],
+              [3, 9, 0],
+              [3, 10, 5],
+              [3, 11, 4],
+              [3, 12, 7],
+              [3, 13, 14],
+              [3, 14, 13],
+              [3, 15, 12],
+              [3, 16, 9],
+              [3, 17, 5],
+              [3, 18, 5],
+              [3, 19, 10],
+              [3, 20, 6],
+              [3, 21, 4],
+              [3, 22, 4],
+              [3, 23, 1],
+              [4, 0, 1],
+              [4, 1, 3],
+              [4, 2, 0],
+              [4, 3, 0],
+              [4, 4, 0],
+              [4, 5, 1],
+              [4, 6, 0],
+              [4, 7, 0],
+              [4, 8, 0],
+              [4, 9, 2],
+              [4, 10, 4],
+              [4, 11, 4],
+              [4, 12, 2],
+              [4, 13, 4],
+              [4, 14, 4],
+              [4, 15, 14],
+              [4, 16, 12],
+              [4, 17, 1],
+              [4, 18, 8],
+              [4, 19, 5],
+              [4, 20, 3],
+              [4, 21, 7],
+              [4, 22, 3],
+              [4, 23, 0],
+              [5, 0, 2],
+              [5, 1, 1],
+              [5, 2, 0],
+              [5, 3, 3],
+              [5, 4, 0],
+              [5, 5, 0],
+              [5, 6, 0],
+              [5, 7, 0],
+              [5, 8, 2],
+              [5, 9, 0],
+              [5, 10, 4],
+              [5, 11, 1],
+              [5, 12, 5],
+              [5, 13, 10],
+              [5, 14, 5],
+              [5, 15, 7],
+              [5, 16, 11],
+              [5, 17, 6],
+              [5, 18, 0],
+              [5, 19, 5],
+              [5, 20, 3],
+              [5, 21, 4],
+              [5, 22, 2],
+              [5, 23, 0],
+              [6, 0, 1],
+              [6, 1, 0],
+              [6, 2, 0],
+              [6, 3, 0],
+              [6, 4, 0],
+              [6, 5, 0],
+              [6, 6, 0],
+              [6, 7, 0],
+              [6, 8, 0],
+              [6, 9, 0],
+              [6, 10, 1],
+              [6, 11, 0],
+              [6, 12, 2],
+              [6, 13, 1],
+              [6, 14, 3],
+              [6, 15, 4],
+              [6, 16, 0],
+              [6, 17, 0],
+              [6, 18, 0],
+              [6, 19, 0],
+              [6, 20, 1],
+              [6, 21, 2],
+              [6, 22, 2],
+              [6, 23, 6],
+            ].map(function (item) {
+              return [item[1], item[0], item[2] || '-'];
+            }),
+            label: {
+              normal: {
+                show: true,
+              },
+            },
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +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>