hfn-components 0.6.1 → 0.6.2

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

@@ -0,0 +1,90 @@
+import _sfc_main from './HtChart.vue2.mjs';
+import { openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = { class: "echart-box" };
+const _hoisted_2 = {
+  key: 0,
+  class: "echart-lenged"
+};
+const _hoisted_3 = ["onClick", "onMouseover"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
+  key: 1,
+  class: "noData"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.showLegend && !$setup.isEmpty ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList($setup.allLegend, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            class: "span-box mb10",
+            key: index,
+            onClick: ($event) => $setup.legendStatus(item, index),
+            onMouseover: ($event) => $setup.legendEnter(index),
+            onMouseleave: _cache[0] || (_cache[0] = ($event) => $setup.legendLeave())
+          }, [
+            item.lineType === "line" ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 0,
+                class: "bg-span",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            )) : createCommentVNode("v-if", true),
+            item.lineType === "bar" ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 1,
+                class: "bg-span-bar",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            )) : createCommentVNode("v-if", true),
+            createElementVNode(
+              "span",
+              {
+                style: normalizeStyle({ color: item.isShow ? "#000" : "#ccc" })
+              },
+              toDisplayString(item.name),
+              5
+              /* TEXT, STYLE */
+            ),
+            createCommentVNode(` <span
+          v-if="isLegend"
+          class="returnRatio"
+          :style="{ color: item.isShow ? (item.returnRatio > 0 ? 'red' : item.returnRatio < 0 ? 'green' : '#000') : '#ccc' }"
+        >
+          {{
+            item.name !== '\u57FA\u91D1\u89C4\u6A21' && item.name !== '\u603B\u5E02\u503C' && item.name !== '\u6D41\u901A\u5E02\u503C'
+              ? item.returnRatio === ''
+                ? ''
+                : item.returnRatio.toFixed(2) + (isPercent || specialPercent ? '%' : '')
+              : \`\${item.returnRatio}\${props.tooltipUnit}\`
+          }}
+        </span> `)
+          ], 40, _hoisted_3);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ])) : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      class: "echart-content",
+      id: _ctx.chartId
+    }, null, 8, _hoisted_4),
+    createCommentVNode(" \u56FE\u4F8B\u5168\u7F6E\u7070\u76D2\u5B50 "),
+    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
+  ]);
+}
+var chart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/chart/src/HtChart.vue"]]);
+
+export { chart as default };

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 { setEchartTitle, 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;
+          if (myChart.value) {
+            echartInit();
+          }
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    const drawGraph = () => {
+      if (props.lineColor && props.lineColor.length > 0) {
+        echartOptions.color = props.lineColor;
+      }
+      setEchartTitle(echartOptions, props);
+      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';