ylyx-cli 1.0.0

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

@@ -0,0 +1,192 @@
+<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 data = [
+        [
+          [28604, 77, 17096869, 'Australia', 1990],
+          [31163, 77.4, 27662440, 'Canada', 1990],
+          [1516, 68, 1154605773, 'China', 1990],
+          [13670, 74.7, 10582082, 'Cuba', 1990],
+          [28599, 75, 4986705, 'Finland', 1990],
+          [29476, 77.1, 56943299, 'France', 1990],
+          [31476, 75.4, 78958237, 'Germany', 1990],
+          [28666, 78.1, 254830, 'Iceland', 1990],
+          [1777, 57.7, 870601776, 'India', 1990],
+          [29550, 79.1, 122249285, 'Japan', 1990],
+          [2076, 67.9, 20194354, 'North Korea', 1990],
+          [12087, 72, 42972254, 'South Korea', 1990],
+          [24021, 75.4, 3397534, 'New Zealand', 1990],
+          [43296, 76.8, 4240375, 'Norway', 1990],
+          [10088, 70.8, 38195258, 'Poland', 1990],
+          [19349, 69.6, 147568552, 'Russia', 1990],
+          [10670, 67.3, 53994605, 'Turkey', 1990],
+          [26424, 75.7, 57110117, 'United Kingdom', 1990],
+          [37062, 75.4, 252847810, 'United States', 1990],
+        ],
+        [
+          [44056, 81.8, 23968973, 'Australia', 2015],
+          [43294, 81.7, 35939927, 'Canada', 2015],
+          [13334, 76.9, 1376048943, 'China', 2015],
+          [21291, 78.5, 11389562, 'Cuba', 2015],
+          [38923, 80.8, 5503457, 'Finland', 2015],
+          [37599, 81.9, 64395345, 'France', 2015],
+          [44053, 81.1, 80688545, 'Germany', 2015],
+          [42182, 82.8, 329425, 'Iceland', 2015],
+          [5903, 66.8, 1311050527, 'India', 2015],
+          [36162, 83.5, 126573481, 'Japan', 2015],
+          [1390, 71.4, 25155317, 'North Korea', 2015],
+          [34644, 80.7, 50293439, 'South Korea', 2015],
+          [34186, 80.6, 4528526, 'New Zealand', 2015],
+          [64304, 81.6, 5210967, 'Norway', 2015],
+          [24787, 77.3, 38611794, 'Poland', 2015],
+          [23038, 73.13, 143456918, 'Russia', 2015],
+          [19360, 76.5, 78665830, 'Turkey', 2015],
+          [38225, 81.4, 64715810, 'United Kingdom', 2015],
+          [53354, 79.1, 321773631, 'United States', 2015],
+        ],
+      ];
+      this.chart.setOption({
+        title: {
+          text: '1990 与 2015 年各国家人均寿命与 GDP',
+        },
+        legend: {
+          right: 10,
+          data: ['1990', '2015'],
+        },
+        xAxis: {
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
+        },
+        yAxis: {
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
+          scale: true,
+        },
+        series: [
+          {
+            name: '1990',
+            data: data[0],
+            type: 'scatter',
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) / 5e2;
+            },
+            label: {
+              emphasis: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[3];
+                },
+                position: 'top',
+              },
+            },
+            itemStyle: {
+              normal: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(120, 36, 50, 0.5)',
+                shadowOffsetY: 5,
+                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgb(251, 118, 123)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(204, 46, 72)',
+                  },
+                ]),
+              },
+            },
+          },
+          {
+            name: '2015',
+            data: data[1],
+            type: 'scatter',
+            symbolSize: function (data) {
+              return Math.sqrt(data[2]) / 5e2;
+            },
+            label: {
+              emphasis: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[3];
+                },
+                position: 'top',
+              },
+            },
+            itemStyle: {
+              normal: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(25, 100, 150, 0.5)',
+                shadowOffsetY: 5,
+                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgb(129, 227, 238)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgb(25, 183, 207)',
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,127 @@
+<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 data = [
+        {
+          name: 'Grandpa',
+          children: [
+            {
+              name: 'Uncle Leo',
+              value: 15,
+              children: [
+                {
+                  name: 'Cousin Jack',
+                  value: 2,
+                },
+                {
+                  name: 'Cousin Mary',
+                  value: 5,
+                  children: [
+                    {
+                      name: 'Jackson',
+                      value: 2,
+                    },
+                  ],
+                },
+                {
+                  name: 'Cousin Ben',
+                  value: 4,
+                },
+              ],
+            },
+            {
+              name: 'Father',
+              value: 10,
+              children: [
+                {
+                  name: 'Me',
+                  value: 5,
+                },
+                {
+                  name: 'Brother Peter',
+                  value: 1,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: 'Nancy',
+          children: [
+            {
+              name: 'Uncle Nike',
+              children: [
+                {
+                  name: 'Cousin Betty',
+                  value: 1,
+                },
+                {
+                  name: 'Cousin Jenny',
+                  value: 2,
+                },
+              ],
+            },
+          ],
+        },
+      ];
+      this.chart.setOption({
+        series: {
+          type: 'sunburst',
+          data: data,
+          radius: [0, '90%'],
+          label: {
+            rotate: 'radial',
+          },
+        },
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,233 @@
+<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: '500px',
+    },
+  },
+  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: 'axis',
+          axisPointer: {
+            type: 'line',
+            lineStyle: {
+              color: 'rgba(0,0,0,0.2)',
+              width: 1,
+              type: 'solid',
+            },
+          },
+        },
+
+        legend: {
+          data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD'],
+        },
+
+        singleAxis: {
+          top: 50,
+          bottom: 50,
+          axisTick: {},
+          axisLabel: {},
+          type: 'time',
+          axisPointer: {
+            animation: true,
+            label: {
+              show: true,
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              opacity: 0.2,
+            },
+          },
+        },
+
+        series: [
+          {
+            type: 'themeRiver',
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 20,
+                shadowColor: 'rgba(0, 0, 0, 0.8)',
+              },
+            },
+            data: [
+              ['2015/11/08', 10, 'DQ'],
+              ['2015/11/09', 15, 'DQ'],
+              ['2015/11/10', 35, 'DQ'],
+              ['2015/11/11', 38, 'DQ'],
+              ['2015/11/12', 22, 'DQ'],
+              ['2015/11/13', 16, 'DQ'],
+              ['2015/11/14', 7, 'DQ'],
+              ['2015/11/15', 2, 'DQ'],
+              ['2015/11/16', 17, 'DQ'],
+              ['2015/11/17', 33, 'DQ'],
+              ['2015/11/18', 40, 'DQ'],
+              ['2015/11/19', 32, 'DQ'],
+              ['2015/11/20', 26, 'DQ'],
+              ['2015/11/21', 35, 'DQ'],
+              ['2015/11/22', 40, 'DQ'],
+              ['2015/11/23', 32, 'DQ'],
+              ['2015/11/24', 26, 'DQ'],
+              ['2015/11/25', 22, 'DQ'],
+              ['2015/11/26', 16, 'DQ'],
+              ['2015/11/27', 22, 'DQ'],
+              ['2015/11/28', 10, 'DQ'],
+              ['2015/11/08', 35, 'TY'],
+              ['2015/11/09', 36, 'TY'],
+              ['2015/11/10', 37, 'TY'],
+              ['2015/11/11', 22, 'TY'],
+              ['2015/11/12', 24, 'TY'],
+              ['2015/11/13', 26, 'TY'],
+              ['2015/11/14', 34, 'TY'],
+              ['2015/11/15', 21, 'TY'],
+              ['2015/11/16', 18, 'TY'],
+              ['2015/11/17', 45, 'TY'],
+              ['2015/11/18', 32, 'TY'],
+              ['2015/11/19', 35, 'TY'],
+              ['2015/11/20', 30, 'TY'],
+              ['2015/11/21', 28, 'TY'],
+              ['2015/11/22', 27, 'TY'],
+              ['2015/11/23', 26, 'TY'],
+              ['2015/11/24', 15, 'TY'],
+              ['2015/11/25', 30, 'TY'],
+              ['2015/11/26', 35, 'TY'],
+              ['2015/11/27', 42, 'TY'],
+              ['2015/11/28', 42, 'TY'],
+              ['2015/11/08', 21, 'SS'],
+              ['2015/11/09', 25, 'SS'],
+              ['2015/11/10', 27, 'SS'],
+              ['2015/11/11', 23, 'SS'],
+              ['2015/11/12', 24, 'SS'],
+              ['2015/11/13', 21, 'SS'],
+              ['2015/11/14', 35, 'SS'],
+              ['2015/11/15', 39, 'SS'],
+              ['2015/11/16', 40, 'SS'],
+              ['2015/11/17', 36, 'SS'],
+              ['2015/11/18', 33, 'SS'],
+              ['2015/11/19', 43, 'SS'],
+              ['2015/11/20', 40, 'SS'],
+              ['2015/11/21', 34, 'SS'],
+              ['2015/11/22', 28, 'SS'],
+              ['2015/11/23', 26, 'SS'],
+              ['2015/11/24', 37, 'SS'],
+              ['2015/11/25', 41, 'SS'],
+              ['2015/11/26', 46, 'SS'],
+              ['2015/11/27', 47, 'SS'],
+              ['2015/11/28', 41, 'SS'],
+              ['2015/11/08', 10, 'QG'],
+              ['2015/11/09', 15, 'QG'],
+              ['2015/11/10', 35, 'QG'],
+              ['2015/11/11', 38, 'QG'],
+              ['2015/11/12', 22, 'QG'],
+              ['2015/11/13', 16, 'QG'],
+              ['2015/11/14', 7, 'QG'],
+              ['2015/11/15', 2, 'QG'],
+              ['2015/11/16', 17, 'QG'],
+              ['2015/11/17', 33, 'QG'],
+              ['2015/11/18', 40, 'QG'],
+              ['2015/11/19', 32, 'QG'],
+              ['2015/11/20', 26, 'QG'],
+              ['2015/11/21', 35, 'QG'],
+              ['2015/11/22', 40, 'QG'],
+              ['2015/11/23', 32, 'QG'],
+              ['2015/11/24', 26, 'QG'],
+              ['2015/11/25', 22, 'QG'],
+              ['2015/11/26', 16, 'QG'],
+              ['2015/11/27', 22, 'QG'],
+              ['2015/11/28', 10, 'QG'],
+              ['2015/11/08', 10, 'SY'],
+              ['2015/11/09', 15, 'SY'],
+              ['2015/11/10', 35, 'SY'],
+              ['2015/11/11', 38, 'SY'],
+              ['2015/11/12', 22, 'SY'],
+              ['2015/11/13', 16, 'SY'],
+              ['2015/11/14', 7, 'SY'],
+              ['2015/11/15', 2, 'SY'],
+              ['2015/11/16', 17, 'SY'],
+              ['2015/11/17', 33, 'SY'],
+              ['2015/11/18', 40, 'SY'],
+              ['2015/11/19', 32, 'SY'],
+              ['2015/11/20', 26, 'SY'],
+              ['2015/11/21', 35, 'SY'],
+              ['2015/11/22', 4, 'SY'],
+              ['2015/11/23', 32, 'SY'],
+              ['2015/11/24', 26, 'SY'],
+              ['2015/11/25', 22, 'SY'],
+              ['2015/11/26', 16, 'SY'],
+              ['2015/11/27', 22, 'SY'],
+              ['2015/11/28', 10, 'SY'],
+              ['2015/11/08', 10, 'DD'],
+              ['2015/11/09', 15, 'DD'],
+              ['2015/11/10', 35, 'DD'],
+              ['2015/11/11', 38, 'DD'],
+              ['2015/11/12', 22, 'DD'],
+              ['2015/11/13', 16, 'DD'],
+              ['2015/11/14', 7, 'DD'],
+              ['2015/11/15', 2, 'DD'],
+              ['2015/11/16', 17, 'DD'],
+              ['2015/11/17', 33, 'DD'],
+              ['2015/11/18', 4, 'DD'],
+              ['2015/11/19', 32, 'DD'],
+              ['2015/11/20', 26, 'DD'],
+              ['2015/11/21', 35, 'DD'],
+              ['2015/11/22', 40, 'DD'],
+              ['2015/11/23', 32, 'DD'],
+              ['2015/11/24', 26, 'DD'],
+              ['2015/11/25', 22, 'DD'],
+              ['2015/11/26', 16, 'DD'],
+              ['2015/11/27', 22, 'DD'],
+              ['2015/11/28', 10, 'DD'],
+            ],
+          },
+        ],
+      });
+    },
+  },
+};
+</script>