<template>
  <div class="new-bar-single">
    <div :id="index" class="base">仪表盘</div>
  </div>
</template>
<script>
import { legend, title, grid } from "../../newStyles/styleCommon";
export default {
  name: "new-gauge",
  props: ["option", "config", "modalSet", "index", "site"],
  data() {
    return {
      originData: [],
      chartOption: {
        title: {
          textStyle: {},
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
        },
        grid: {},
        series: [],
      },
      chart: null,
    };
  },
  watch: {
    site: {
      handler() {
        if (this.chart) {
          this.chart.resize();
        }
      },
      deep: true,
    },
    option: {
      handler() {
        if (this.originData.length) {
          this.refresh();
        }
      },
      deep: true,
    },
  },
  methods: {
    refresh() {
      let option = this.option;
      let { measure } = this.config;
      measure = measure.filter((i) => !i.extJson.hidden);

      this.chartOption.grid = grid(option);
      this.chartOption.title = title(option);
      this.chartOption.legend = legend(option);

      let chartOption = { ...this.chartOption };
      chartOption.series = {
        name: measure[0].columnTitle,
        type: "gauge",
        data: [
          {
            value: this.originData[0][measure[0].columnTitle],
            name: measure[0].columnTitle,
          },
        ],
        itemStyle: {
          borderRadius: option.borderRadius || 0,
        },
      };
      this.chart = echarts.init(document.getElementById(this.index));
      this.chart.setOption(chartOption, true);
    },
    update(data) {
      this.originData = data;
      this.refresh();
    },
  },
};
</script>
<style lang="scss">
.new-bar-single {
  .base {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
