fd_dwgz_zhyw_nx/src/views/economicsOperation/windAnalyse/singleWindAnasyle/raderswithhart.vue

<template>
  <div
    :id="chartId"
    :style="{ height: props.height, width: props.width }"
  ></div>
</template>

<script setup>
import util from "@tools/util";
import chartTheme from "./chartTheme.json";
import {
  ref,
  toRaw,
  computed,
  onMounted,
  watch,
  nextTick,
  defineProps,
  onUpdated,
} from "vue";
import * as echarts from "echarts";
const chartId = "chart-" + util.newGUID(); //chartId
const chartIns = ref(null); //chart 实例
const props = defineProps({
  xAxis: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  series: {
    type: Array,
    required: true,
    default: () => [],
  },
  lenged: {
    type: Array,
    required: true,
    default: () => [],
  },
  height: {
    type: String,
    required: false,
    default: "500px",
  },
  width: {
    type: String,
    required: false,
    default: "500px",
  },
  title: {
    type: String,
    required: false,
  },
  subtext: {
    type: String,
    required: false,
  },
  isRadar: {
    //是否显示雷达图
    type: Boolean,
    required: false,
    default: false,
  },
});

/**定义option */
const option = computed({
  get() {
    return {
      //   title: {
      //     text: props.title || "",
      //     subtext: props.subtext || "",
      //     top: 10,
      //     left: 30,
      //   },
      angleAxis: props.xAxis || {},
      radiusAxis: {},
      radar: props.isRadar
        ? [
            //雷达图设定区域
            {
              indicator:
                props.xAxis.map((o) => {
                  return {
                    name: o,
                  };
                }) || [],
              center: ["60%", "50%"],
              radius: "70%",
              splitLine: {
                show: false,
              },
              splitArea: {
                show: false,
              },
            },
          ]
        : {},
      polar: {
        radius: "70%",
        center: ["60%", "50%"],
      },
      tooltip: {
        formatter: (params) => {
          return params.componentSubType === "radar"
            ? `${params.name}`
            : `${params.seriesName}<br/>${
                // params.value > 1 ? "频次：" + params.value : ""
                params.value > 1
                  ? props.title + "：" + params.value + props.subtext
                  : ""
              }`;
        },
        confine: true,
      },
      series: props.series.length ? props.series : [],
      legend: {
        show: true,
        orient: "vertical",
        left: 30,
        // itemWidth: 16,
        // itemHeight: 10,
        textStyle: {
          // fontSize: util.vh(10)
        },
        top: "middle",
        data: props.lenged,
      },
    };
  },
  set(val) {},
});
watch(
  () => option,
  (newVal, oldVal) => {
    if (chartIns.value) {
      const echartIns = toRaw(chartIns.value);
      echartIns.clear();
      echartIns.setOption(newVal.value);
    }
  },
  { deep: true }
);
onMounted(() => {
  nextTick(() => {
    echarts.registerTheme("chartTheme", chartTheme);
    const echartIns = echarts.init(
      document.getElementById(chartId),
      "chartTheme"
    );
    chartIns.value = echartIns;

    echartIns.setOption(option.value);

    window.addEventListener("resize", () => {
      echartIns.resize();
    });
  });
});
</script>