hfn-components 0.2.7 → 0.2.8

package/es/components/chart/src/HtChart.vue2.mjs

@@ -0,0 +1,109 @@
+import { defineComponent, shallowRef, ref, reactive, watch } from 'vue';
+import { BASIC_CHART_CONFIG } from '../../../constants/chartConfig.mjs';
+import { chartProps } from './HtChart.mjs';
+import cloneDeep from 'lodash.clonedeep';
+import { setEchartXAxis, setEchartYAxis, setEchartTooltip, legendEnterOperate, legendLeaveOperate } from '../../../utils/chart.mjs';
+import * as echarts from 'echarts/core';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HtChart",
+  props: chartProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const myChart = shallowRef();
+    const isEmpty = ref(false);
+    const echartOptions = reactive(cloneDeep(BASIC_CHART_CONFIG));
+    watch(
+      () => props.chartData,
+      (val) => {
+        echartOptions.series = cloneDeep(val);
+        drawGraph();
+      },
+      {
+        deep: true
+      }
+    );
+    watch(
+      () => props.watchResize,
+      () => {
+        chartResize();
+      }
+    );
+    watch(
+      () => props.lineColor,
+      (val) => {
+        if (val && val.length > 0) {
+          echartOptions.color = props.lineColor;
+          console.log(props.lineColor);
+          if (myChart.value) {
+            echartInit();
+          }
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    const drawGraph = () => {
+      if (props.lineColor && props.lineColor.length > 0) {
+        echartOptions.color = props.lineColor;
+      }
+      setEchartXAxis(echartOptions, props.chartType, props.xAxisData);
+      setEchartYAxis(echartOptions, props);
+      setEchartTooltip(echartOptions, props);
+      lengedDeal();
+      echartInit();
+    };
+    const lengedDeal = () => {
+      allLegend.value = [];
+      props.chartData.forEach((item, index) => {
+        const data = {
+          name: item.name,
+          isShow: true,
+          lineType: item.type,
+          color: echartOptions.color[index % echartOptions.color.length]
+        };
+        allLegend.value.push(data);
+      });
+    };
+    const echartInit = () => {
+      setTimeout(() => {
+        if (!myChart.value) {
+          const ele = document.getElementById(props.chartId);
+          myChart.value = echarts.init(ele, null, { devicePixelRatio: 2, locale: "ZH" });
+        }
+        myChart.value.setOption(echartOptions, true);
+      }, 200);
+    };
+    const chartResize = () => {
+      myChart.value.resize();
+    };
+    const allLegend = ref([]);
+    const noData = ref(false);
+    const legendStatus = (item, index) => {
+      const status = !item.isShow;
+      allLegend.value[index].isShow = status;
+      if (allLegend.value.every((item2) => item2.isShow === false)) {
+        noData.value = true;
+      } else {
+        noData.value = false;
+      }
+      myChart.value.dispatchAction({
+        type: "legendToggleSelect",
+        name: item.name
+      });
+    };
+    const legendEnter = (index) => {
+      legendEnterOperate(echartOptions, allLegend.value[index].name);
+      myChart.value.setOption(echartOptions);
+    };
+    const legendLeave = () => {
+      legendLeaveOperate(echartOptions);
+      myChart.value.setOption(echartOptions);
+    };
+    const __returned__ = { props, myChart, isEmpty, echartOptions, drawGraph, lengedDeal, echartInit, chartResize, allLegend, noData, legendStatus, legendEnter, legendLeave };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+export { _sfc_main as default };

package/es/components/chart/src/chartConfig.d.ts

@@ -0,0 +1,7 @@
+import * as echarts from 'echarts/core';
+import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';
+import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, DatasetComponentOption } from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+export type ECOption = ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption>;
+export default echarts;
+export declare const BASIC_CHART_CONFIG: any;

package/es/components/chart/src/chartConfig.mjs

@@ -0,0 +1,88 @@
+import * as echarts from 'echarts/core';
+export { echarts as default };
+import { BarChart, LineChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DatasetComponent, TransformComponent } from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+const BASIC_CHART_CONFIG = {
+  title: {
+    text: "",
+    // top: '5%',
+    left: "0%",
+    textStyle: {
+      fontSize: 12,
+      color: "rgba(0,0,0,0.7)",
+      fontWeight: "normal"
+    }
+  },
+  // 图例
+  legend: {
+    left: "0%",
+    show: false
+  },
+  xAxis: {},
+  yAxis: {},
+  grid: {
+    // top: '12%',
+    top: "8%",
+    left: "3%",
+    right: "3%",
+    bottom: "1%",
+    containLabel: true
+  },
+  // 线条颜色
+  color: [
+    "#C13431",
+    "#1E85D2",
+    "#FD984F",
+    "#63B9BB",
+    "#BBB162",
+    "#AE76C1",
+    "#5E92F6",
+    "#F5BC32",
+    "#DA8484",
+    "#41982E",
+    "#437095",
+    "#8060A7",
+    "#7D0A0D",
+    "#572AFF",
+    "#2BE8F8",
+    "#FF1493",
+    "#E066FF",
+    "#27408B",
+    "#5191A3",
+    "#D5634C",
+    "#92d6fd",
+    "#b92e2d",
+    "#187bc9",
+    "#90bae0",
+    "#187bc9",
+    "#0070C9",
+    "#5470c6",
+    "#91cc75",
+    "#fac858",
+    "#ee6666",
+    "#73c0de",
+    "#3ba272",
+    "#fc8452",
+    "#9a60b4",
+    "#ea7ccc"
+  ],
+  series: []
+};
+
+export { BASIC_CHART_CONFIG };

package/es/components/chart/style/index.d.ts

@@ -0,0 +1 @@
+import 'hfn-components/theme-chalk/src/chart.scss';

package/es/components/chart/style/index.mjs

@@ -0,0 +1 @@
+import 'hfn-components/theme-chalk/src/chart.scss';