hlq-cli 1.0.0

package/templates/src/components/chart/barChart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { colorList, colorList2 } from './color'
+
+interface Props {
+  data?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    series: [
+      {
+        name: 'Sales',
+        data: [120, 200, 150, 80, 70, 110, 130],
+      },
+    ],
+  }),
+})
+
+const chartRef = ref<HTMLElement | null>(null)
+let chart: echarts.ECharts | null = null
+
+const initChart = () => {
+  if (!chartRef.value) return
+  nextTick(() => {
+    chart = echarts.init(chartRef.value)
+    const option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: props.data.xAxis,
+        axisLabel: {
+          interval: 0,
+          rotate: 30,
+        },
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: props.data.series.map((item: any, index: number) => ({
+        name: item.name,
+        type: 'bar',
+        data: item.data,
+        itemStyle: {
+          borderRadius: [4, 4, 0, 0],
+          color: colorList[index % colorList.length],
+        },
+      })),
+    }
+    chart.setOption(option)
+    chart?.resize()
+  })
+}
+
+const handleResize = () => {
+  chart?.resize()
+}
+
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  chart?.dispose()
+})
+
+watch(
+  () => props.data,
+  () => {
+    initChart()
+  },
+  { deep: true },
+)
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/chart/color.ts

@@ -0,0 +1,43 @@
+export const colorList = [
+  "#41CE86",
+  "#FAC858",
+  "#FC8452",
+  "#EE6666",
+  "#73C0DE",
+  "#3BA272",
+  "#9A60B4",
+  "#EA7CCC",
+  "#1E90FF",
+  "#FF6347",
+  "#7B68EE",
+  "#00FA9A",
+  "#FFD700",
+  "#6A5ACD",
+  "#FF69B4",
+  "#00CED1",
+  "#FF4500",
+  "#8A2BE2",
+  "#ADFF2F",
+];
+
+export const colorList2 = [
+  "#D9FFEC",
+  "#FCEBB4",
+  "#FDCAB8",
+  "#F4A3A3",
+  "#B8E1ED",
+  "#8FD6B5",
+  "#CBA6D9",
+  "#F3CFE0",
+  "#A4D4FF",
+  "#FFA8A0",
+  "#B3A9F0",
+  "#A6FAD8",
+  "#FFEBA0",
+  "#B3A9E6",
+  "#FFA8C8",
+  "#A6E8E1",
+  "#FFA08A",
+  "#C3A6F0",
+  "#E8FFB3",
+];

package/templates/src/components/chart/lineChart.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+  height?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    xAxis: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    series: [
+      {
+        name: "Sales",
+        data: [120, 200, 150, 80, 70, 110, 130],
+      },
+      {
+        name: "Profit",
+        data: [80, 150, 120, 60, 50, 90, 100],
+      },
+    ],
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  nextTick(() => {
+    chart = echarts.init(chartRef.value);
+
+    const option = {
+      tooltip: {
+        trigger: "axis",
+      },
+      legend: {
+        data: props.data.series.map((item: any) => item.name),
+        top: "top",
+        right: "10%",
+        orient: "horizontal"
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        top: "20%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        boundaryGap: false,
+        data: props.data.xAxis,
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: props.data.series.map((item: any, index: number) => ({
+        name: item.name,
+        type: "line",
+        stack: "Total",
+        data: item.data,
+        smooth: true,
+        lineStyle: {
+          color: colorList[index % colorList.length]
+        },
+        itemStyle: {
+          color: colorList[index % colorList.length]
+        }
+      })),
+    };
+
+    chart.setOption(option);
+  });
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/chart/mapChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    series: [
+      {
+        name: "热力值",
+        data: [
+          { name: "北京", value: 100 },
+          { name: "上海", value: 80 },
+          { name: "广州", value: 60 },
+          { name: "深圳", value: 90 },
+          { name: "杭州", value: 70 },
+          { name: "成都", value: 50 },
+          { name: "武汉", value: 40 },
+          { name: "西安", value: 30 },
+          { name: "南京", value: 65 },
+          { name: "重庆", value: 75 }
+        ]
+      }
+    ]
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+let currentMap = "china";
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  nextTick(() => {
+    chart = echarts.init(chartRef.value);
+    
+    // 模拟地图数据加载
+    const option = {
+      title: {
+        text: "中国热力图",
+        left: "center"
+      },
+      tooltip: {
+        trigger: "item",
+        formatter: function(params: any) {
+          return params.name + ": " + params.value;
+        }
+      },
+      visualMap: {
+        min: 0,
+        max: 100,
+        calculable: true,
+        inRange: {
+          color: ["#D9FFEC", "#41CE86"]
+        },
+        textStyle: {
+          color: "#333"
+        }
+      },
+      series: [
+        {
+          name: "热力值",
+          type: "map",
+          map: currentMap,
+          roam: true,
+          label: {
+            show: true,
+            fontSize: 10
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 12
+            },
+            itemStyle: {
+              areaColor: "#FAC858"
+            }
+          },
+          data: props.data.series[0].data
+        }
+      ]
+    };
+    
+    chart.setOption(option);
+    chart?.resize();
+    
+    // 添加点击事件，模拟下钻功能
+    chart.on("click", function(params: any) {
+      console.log("点击了", params.name);
+      // 这里可以实现实际的下钻逻辑
+      // 例如加载省/市地图数据
+    });
+  });
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/chart/mixedChart.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    xAxis: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    series: [
+      {
+        name: "Sales",
+        type: "bar",
+        data: [120, 200, 150, 80, 70, 110, 130]
+      },
+      {
+        name: "Profit",
+        type: "line",
+        data: [80, 150, 120, 60, 50, 90, 100]
+      }
+    ]
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  nextTick(() => {
+    chart = echarts.init(chartRef.value);
+    const option = {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+          crossStyle: {
+            color: "#999"
+          }
+        }
+      },
+      legend: {
+        data: props.data.series.map((item: any) => item.name),
+        top: "top",
+        right: "10%",
+        orient: "horizontal"
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        top: "20%",
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: props.data.xAxis,
+          axisPointer: {
+            type: "shadow"
+          }
+        }
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "Sales",
+          min: 0,
+          max: 250,
+          interval: 50,
+          axisLabel: {
+            formatter: "{value}"
+          }
+        },
+        {
+          type: "value",
+          name: "Profit",
+          min: 0,
+          max: 160,
+          interval: 40,
+          axisLabel: {
+            formatter: "{value}"
+          }
+        }
+      ],
+      series: props.data.series.map((item: any, index: number) => {
+        const series: any = {
+          name: item.name,
+          type: item.type,
+          data: item.data,
+          itemStyle: {
+            color: colorList[index % colorList.length]
+          }
+        };
+        if (item.type === "line") {
+          series.yAxisIndex = 1;
+          series.smooth = true;
+          series.lineStyle = {
+            color: colorList[index % colorList.length]
+          };
+        }
+        return series;
+      })
+    };
+    chart.setOption(option);
+    chart?.resize();
+  });
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/chart/pieChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    series: [
+      {
+        name: "Sales",
+        data: [
+          { value: 335, name: "Direct" },
+          { value: 310, name: "Email" },
+          { value: 234, name: "Affiliate" },
+          { value: 135, name: "Social" },
+          { value: 1548, name: "Other" },
+        ],
+      },
+    ],
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  chart = echarts.init(chartRef.value);
+
+  const option = {
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c} ({d}%)",
+    },
+    legend: {
+      orient: "vertical",
+      left: "left",
+      data: props.data.series[0].data.map((item: any) => item.name),
+    },
+    series: props.data.series.map((item: any) => ({
+      name: item.name,
+      type: "pie",
+      radius: "60%",
+      center: ["50%", "50%"],
+      data: item.data,
+      itemStyle: {
+        color: function(params: any) {
+          return colorList[params.dataIndex % colorList.length];
+        }
+      },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
+        },
+      },
+    })),
+  };
+
+  chart.setOption(option);
+  chart?.resize();
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>