chart-block.vue

<!--
 * @Description: file content
 * @Author: jml
 * @Date: 2021-03-24 10:22:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-20 15:36:43
-->
<template>
  <div style="position:relative;" class="bi-chart-block">
    <slot></slot>
    <slot name="top"></slot>
    <BiChartTitle
      v-if="title.show"
      v-bind="{
        ...title,
        colors: chart.colors,
        chartType: chart.type,
        extendTypes: chart.extendTypes,
        disableTypes: chart.disableTypes
      }"
      @change-colors="changeChartColors"
      @change-chartkey="changeChartType"
      @change-delete="deleteChart"
      @change-title="changeTitle"
      :showGuide="showGuide"
    ></BiChartTitle>
    <BiChartChoiceMinxinToggleAxis
      v-if="
        (chart.axis || []).every(item => item.names.length > 0) &&
          !title.hideToggleAxis
      "
      :axis="chart.axis"
      :customGroupTitle="title.customGroupTitle"
      :contenteditable="title.toggleAxisContenteditable"
      @toggle-axis="toggleAxis"
      @change-title="changeGroupTitle"
    ></BiChartChoiceMinxinToggleAxis>
    <template v-if="chart.show">
      <BiTable
        v-if="chart.type == 11"
        v-bind="{
          ...chart,
          title: title.name
        }"
      ></BiTable>
      <BiSexIcon v-else-if="chart.type == 12" v-bind="chart"></BiSexIcon>
      <BiArticle v-else-if="chart.type == 15" v-bind="baseInfo"></BiArticle>
      <BiChart :showGuide="showGuide" v-else v-bind="chart"></BiChart>
    </template>
    <BiChartLegend
      v-if="legend.show && chart.type != 11"
      v-bind="{ ...legend, colors: chart.colors }"
    ></BiChartLegend>
    <BiChartDesc
      v-if="desc.show"
      v-bind="desc"
      @change-status="changeStatus('desc', '描述')"
      @change-text="changeText"
    ></BiChartDesc>
    <BiChartChoiceMinxinAnalysis
      v-if="analysis.show"
      v-bind="analysis"
      @change-status="changeStatus('analysis', '卡方分析结果')"
    ></BiChartChoiceMinxinAnalysis>
    <BiChartDesc
      v-if="analysisDesc.show"
      v-bind="analysisDesc"
      @change-text="changeZnText"
      @change-status="changeStatus('analysisDesc', '智能分析')"
    ></BiChartDesc>
    <slot name="bottom"></slot>
  </div>
</template>

<script>
import BiChartTitle from './chart-title.vue';
import BiChart from './chart.vue';
import BiTable from './table.vue';
import BiSexIcon from './sex-icon.vue';
import BiChartLegend from './chart-legend.vue';
import BiChartDesc from './chart-desc.vue';
import BiArticle from './article.vue';

import BiChartChoiceMinxinToggleAxis from './chart-choice-mixin-toggle-axis.vue';
import BiChartChoiceMinxinAnalysis from './chart-choice-mixin-analysis.vue';

export default {
  name: 'bi-chart-block',
  components: {
    BiChartTitle,
    BiChart,
    BiTable,
    BiSexIcon,
    BiArticle,
    BiChartDesc,
    BiChartLegend,
    BiChartChoiceMinxinToggleAxis,
    BiChartChoiceMinxinAnalysis
  },
  props: {
    showGuide: Boolean,
    chartConfig: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    analysis() {
      return this.chartConfig.analysis || {};
    },
    analysisDesc() {
      return this.chartConfig.analysisDesc || {};
    },
    baseInfo() {
      return this.chartConfig.baseInfo || {};
    },
    chart() {
      return this.chartConfig.chart || {};
    },
    desc() {
      return this.chartConfig.desc || {};
    },
    legend() {
      return this.chartConfig.legend || {};
    },
    title() {
      return this.chartConfig.title || {};
    }
  },
  methods: {
    changeGroupTitle(title) {
      this.chartConfig.title['customGroupTitle'] = title;
      console.log(`${this.title.name}-图表-副标题`, title);
    },
    changeTitle(title) {
      this.chartConfig.title['name'] = title;
      console.log(`${this.title.name}-图表-标题`, title);
    },
    changeChartColors(colors) {
      this.chartConfig.chart['colors'] = colors;
      console.log(`${this.title.name}-图表-颜色`, colors);
    },
    deleteChart() {
      this.chartConfig['isDelete'] = 1;
      console.log(`${this.title.name}-图表-删除`);
    },
    changeChartType(chartKey) {
      this.chartConfig.chart['type'] = chartKey;
      console.log(`${this.title.name}-图表-格式`, chartKey);
    },
    changeStatus(keyName, typeName) {
      // 设置附加文字是否显示
      this.chartConfig[keyName]['setShow'] = !this.chartConfig[keyName][
        'setShow'
      ];
      console.log(`${this.title.name}-${typeName}-是否显示`);
    },
    changeText(text) {
      // 修改附加文字的内容
      this.chartConfig['desc']['customText'] = text;
      console.log(`${this.title.name}-用户自定义描述`, text);
    },
    changeZnText(text) {
      // 修改智能分析附加文字的内容
      this.chartConfig['analysisDesc']['customText'] = text;
      console.log(`${this.title.name}-只能分析用户自定义描述`, text);
    },
    toggleAxis() {
      // 交换X轴与Y轴
      const { data, axis } = this.chart;
      console.log(axis);
      this.chartConfig.chart['axis'] = axis.reverse();
      this.chartConfig.legend['data'] = axis[1].names;
      this.chartConfig.chart['data'] = data[0].reduce((pre, cur, index) => {
        pre.push(
          data.reduce((cPre, cCur) => {
            cPre.push(cCur[index]);
            return cPre;
          }, [])
        );
        return pre;
      }, []);
      console.log(`${this.title.name}-交换X轴与Y轴`);
    }
  }
};
</script>
<style lang="scss" scoped>
.bi-chart-block {
  & > div {
    page-break-inside: avoid;
  }
}
</style>