@huyuchen/visual/dist/es/HuAreaChart/AreaChart.vue.js

## 组件环境

import y from "../BaseChart/index.vue.js";
import s from "../BaseChart/config.js";
import { computed as p, resolveComponent as d, openBlock as m, createBlock as x } from "vue";
import i from "lodash.merge";
import b from "../_virtual/_plugin-vue_export-helper.js";
const g = {
  name: "HuAreaChart",
  components: {
    BaseChart: y
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    /**
     *  [{name:'', data: [], ...}]
     */
    tooltip: {
      type: Object,
      default: () => {
      }
    },
    series: {
      type: Array,
      default: () => []
    },
    /**
     * 图例配置
     */
    legendOption: {
      type: Object,
      default: () => ({
        right: "auto",
        top: "auto",
        orient: "horizontal"
      })
    },
    /**
     * 横坐标
     */
    xAxis: {
      type: Array,
      default: () => s.xAxisTime
    },
    /**
     * colors 自定义颜色
     */
    colors: {
      type: Array,
      default: () => []
    },
    /**
     * colors 是否渐变
     */
    linear: {
      type: Boolean,
      default: !1
    },
    xAxisOther: {
      // x轴的其它配置
      type: Object,
      default: () => ({})
    },
    yAxisOther: {
      // y轴的其它配置
      type: Object,
      default: () => ({})
    }
  },
  setup(t) {
    const c = p(() => {
      const e = t.series.map((o, f) => {
        const u = o.name;
        return { ...l(a.value[f], u), ...o };
      });
      return {
        tooltip: i(
          {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985"
              }
            }
          },
          t.tooltip
        ),
        color: a.value,
        legend: s.legend(t.legendOption),
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: !0
        },
        xAxis: [
          i(
            {
              type: "category",
              boundaryGap: !1,
              data: t.xAxis,
              //  ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
              axisLabel: { interval: 0, rotate: 45 }
            },
            t.xAxisOther
          )
        ],
        yAxis: [
          i(
            {
              type: "value",
              splitLine: {
                show: !1
              }
            },
            t.yAxisOther
          )
        ],
        series: e
      };
    }), a = p(() => t.colors.concat(s.colors)), l = (e, r) => {
      const o = {
        Symbol: "circle",
        symbolSize: 100,
        color: e
      };
      return t.linear && delete o.color, {
        type: "line",
        stack: r,
        smooth: !0,
        lineStyle: {
          width: 2,
          color: e
        },
        showSymbol: !1,
        itemStyle: {
          decal: o
        },
        areaStyle: {
          type: "linear",
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            colorStops: [
              {
                offset: 0,
                color: n(e, 0.8)
                // 0% 处的颜色
              },
              {
                offset: 1,
                color: n(e, 0)
                // '#0089EB', // 100% 处的颜色
              }
            ],
            global: !1
          }
        },
        emphasis: {
          focus: "series"
        }
      };
    }, n = (e, r) => {
      let o = "";
      return /^#[\da-f]{6}$/i.test(e) && (o = `rgba(${parseInt("0x" + e.slice(1, 3))},${parseInt(
        "0x" + e.slice(3, 5)
      )},${parseInt("0x" + e.slice(5, 7))},${r})`), o;
    };
    return {
      option: c
    };
  }
};
function h(t, c, a, l, n, e) {
  const r = d("base-chart");
  return m(), x(r, { option: l.option }, null, 8, ["option"]);
}
const j = /* @__PURE__ */ b(g, [["render", h]]);
export {
  j as default
};