jn_sis_zhfx/src/views/powerGenerating/windAnalyse/rateAnalysis/components/scatterSingleChart.vue

<script setup name="scatterSingleChart">
import util from "@tools/util";
import chartTheme from "./../rateAnalysis.json";
import {
  ref,
  toRaw,
  computed,
  onMounted,
  watch,
  nextTick,
  defineProps,
} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
const chartId = "chart-" + util.newGUID(); //chartId
const chartIns = ref(null); //chart 实例
const props = defineProps({
  xAxis: {
    type: Array,
    required: true,
    default: () => [],
  },
  yAxis: {
    type: Array,
    required: true,
    default: () => [],
  },
  series: {
    type: Array,
    required: false,
    default: () => [],
  },
  height: {
    type: String,
    required: false,
    default: "500px",
  },
  title: {
    type: String,
    required: false,
    default: "",
  },
  subtext: {
    type: String,
    required: false,
    default: "",
  },
  width: {
    type: String,
    required: false,
    default: "500px",
  },
});

/**定义option */
const option = computed({
  get() {
    return {
      tooltip: {
        position: "top",
        formatter: function (params) {
          if (params.componentType === "markLine") {
            return params.name;
          } else {
            return (
              "偏航：" +
              params.value[0] +
              "度<br/ >风速：" +
              params.value[1] +
              "m/s"
            );
          }
        },
      },
      title: {
        text: props.title || "",
        subtext: props.subtext || "",
        top: 6,
        left: "5%",
        textStyle: {
          color: "#b2bcbf",
        },
        subtextStyle: {
          color: "#b2bcbf",
        },
      },
      grid: {
        top: 80,
        left: 40,
        right: 40,
        bottom: 40,
      },
      xAxis: props.xAxis || [],
      //  {
      // 	type: 'category',
      // 	data: props.xAxis || [],
      // 	boundaryGap: false,
      // 	splitLine: {
      // 		show: true
      // 	},
      // 	axisLine: {
      // 		show: false
      // 	}
      // },
      yAxis: props.yAxis || [],
      // {
      // 	type: 'category',
      // 	data: props.yAxis,
      // 	axisLine: {
      // 		show: false
      // 	}
      // },
      series: props.series || [],
      // [
      // 	{
      // 		name: 'Punch Card',
      // 		type: 'scatter',
      // 		symbolSize: function (val) {
      // 			return val[2] * 2;
      // 		},
      // 		data: props.data,
      // 		animationDelay: function (idx) {
      // 			return idx * 5;
      // 		}
      // 	}
      // ]
    };
  },
  set(val) {},
});
watch(
  () => option,
  (newVal, oldVal) => {
    if (chartIns.value) {
      // console.log(newVal)
      const echartIns = toRaw(chartIns.value);
      echartIns.setOption(toRaw(newVal.value));
    }
  },
  { deep: true }
);
watch([() => props.width, () => props.height], (newVal, oldVal) => {
  if (chartIns.value) {
    const echartIns = toRaw(chartIns.value);
    nextTick(() => echartIns.resize());
  }
});
const store = useStore();
const collapse = computed({
  get() {
    return store.state.collapse;
  },
  set(val) {},
});
watch(collapse, (val) => {
  if (chartIns.value) {
    setTimeout(() => {
      chartIns.value?.resize();
    }, 300);
  }
});
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>
<template>
  <div
    :id="chartId"
    :style="{ height: props.height, width: props.width }"
  ></div>
</template>