windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/lineAnalysis/components/barChart.vue

<script setup>
import util from "@tools/util";
import chartTheme from "./barChart.json";
import { ref, toRaw, computed, onMounted, watch, nextTick } from "vue";
import * as echarts from "echarts";
const chartId = "chart-" + util.newGUID(); //chartId
const chartIns = ref(null); //chart 实例
const emits = defineEmits(["getSelected"]);
const props = defineProps({
  xAxis: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  yAxis: {
    type: Array,
    required: false,
  },
  colors: {
    type: Array,
    default: () => [],
  },
  series: {
    type: Array,
    required: true,
  },
  dataset: {
    type: Array,
    required: false,
    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,
  },
  brush: {
    type: Boolean,
    required: false,
    default: false,
  },
  theme: {
    type: Boolean,
    default: false,
  },
  echartsTheme: {
    type: String,
    default: "",
  },
});

/**定义option */
const option = computed({
  get() {
    const theme = sessionStorage.getItem("theme") === "true" ? true : false;
    return {
      backgroundColor: "",
      color: props.colors.length
        ? props.colors
        : [
            "rgb(50,93,171)",
            "rgb(222,132,82)",
            "rgb(105,188,80)",
            "rgb(197,78,82)",
            "rgb(129,114,181)",
            "#005eaa",
            "#cda819",
            "#32a487",
          ],
      title: {
        text: props.title || "",
        subtext: props.subtext || "",
        top: 6,
        left: "5%",
      },
      xAxis: props.xAxis || {},
      yAxis: props.yAxis || {},
      brush: {
        seriesIndex: [1],
        yAxisIndex: 0,
        transformable: true,
        throttleType: "debounce",
        throttleDelay: 1000,
        removeOnClick: true,
        brushType: props.brush ? "polygon" : false,
        brushMode: "multiple",
        brushStyle: {
          borderWidth: 1,
          borderColor: "#ff2424",
        },
      },
      toolbox: {
        show: props.brush,
      },
      tooltip: {
        confine: true,
        trigger: "axis",
      },
      dataset: props.dataset || [],
      series: props.series || [],
      legend: {
        right: "120",
        top: "5",
        itemWidth: 6,
        textStyle: {
          color: theme ? "#000" : "#fff",
          fontSize: 12,
        },
      },
      grid: {
        top: 80,
        left: 40,
        right: 40,
        bottom: 40,
      },
      dataZoom: [
        {
          type: "inside", //图表下方的伸缩条
          show: false, //是否显示
          realtime: true, //拖动时，是否实时更新系列的视图
          start: 0, //伸缩条开始位置（1-100），可以随时更改
          end: 100, //伸缩条结束位置（1-100），可以随时更改
        },
        {
          type: "slider", //图表下方的伸缩条
          show: false, //是否显示
          realtime: true, //拖动时，是否实时更新系列的视图
          start: 0, //伸缩条开始位置（1-100），可以随时更改
          end: 100, //伸缩条结束位置（1-100），可以随时更改
        },
      ],
    };
  },
  set(val) {},
});
watch(
  () => option,
  (newVal, oldVal) => {
    if (chartIns.value) {
      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 funBrushChange = (flag) => {
  const echartIns = toRaw(chartIns.value);
  echartIns.dispatchAction({
    type: "takeGlobalCursor",
    // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
    key: "brush",
    brushOption: {
      seriesIndex: [1],
      yAxisIndex: 0,
      transformable: true,
      throttleType: "debounce",
      throttleDelay: 1000,
      removeOnClick: true,
      brushType: flag ? "polygon" : false,
      brushMode: "multiple",
      brushStyle: {
        borderWidth: 1,
        color: "rgba(255,36,36,0.2)",
        borderColor: "#ff2424",
      },
    },
  });
  echartIns.off("brushSelected");
  echartIns.on("brushSelected", (params) => {
    emits("getSelected", params.batch || []);
  });
};
watch(
  () => props.brush,
  (newVal, oldVal) => funBrushChange(newVal)
);

onMounted(() => {
  nextTick(() => {
    init();
  });
});

watch(
  () => props.echartsTheme,
  (newVal, oldVal) => init()
);

const init = () => {
  echarts.registerTheme("chartTheme", chartTheme);
  const echartIns = echarts.init(
    document.getElementById(chartId),
    props.echartsTheme
  );
  document.getElementById(chartId).removeAttribute("_echarts_instance_")
    ? document.getElementById(chartId).removeAttribute("_echarts_instance_")
    : "";
  chartIns.value = echartIns;
  echartIns.setOption(option.value);
  funBrushChange(props.brush);
  window.addEventListener("resize", () => {
    echartIns.resize();
  });
};
</script>
<template>
  <div :id="chartId" :style="`height: 400px; width: ${width || '900px'}`"></div>
</template>