fsex.vue

<!-- 业态客群洞察 -->
<template>
  <div>
    <!-- 顶部区域 S-->
    <div class="ipage_top">
      <div class="tit">
        <img :src="bindIcon('ziyuan')" />{{title||chartData.title}}
      </div>
      <div class="acts"></div>
    </div>
    <div class="ichart">
      <bars-chart ref="chart" :cdata="chartData"></bars-chart>
    </div>
  </div>
</template>

<script>
import mixin from "./mixin";
import mallData from "@/components/Echarts/data";
/**********************************************************/
const chartsConfig = {
  default: {
    //默认
    otherConf: {
      _color: ["#3e8dfd", "#ffd48b"],
      labelShow: true,
      isSex: true,
    },
  },
};
/*******************************************************/
export default {
  mixins: [mixin],
  data() {
    return {
      configObj: {},
    };
  },
  created() {},
  methods: {
    getChartsConfig() {
      return chartsConfig;
    },
    loadChartData(params) {
      //   this.setChartData();
      this.chartId = this.getChartId(this.ckey);
      if (this.chartId) {
        this.ajaxModuleData().then((data) => {
          this.setChartData(data);
        });
      } else {
        this.setChartData();
      }
    },
    setChartData(data) {
      let sdata1, sdata2;
      let total = data.series.map((item) =>item.data);
      let ydata = {
        data: data.series.map((item) => item.name)
      };
      // 男性占比
      sdata1 = {
        type: "bar",
        data: data.series.map((item) =>
          ((item.data[0] / item.data[2]) * 100).toFixed(2)
        ),
      };
      // 女性占比
      sdata2 = {
        type: "bar",
        data: data.series.map((item) =>
          ((item.data[1] / item.data[2]) * 100).toFixed(2)
        ),
      };
      let grids = [
        {
          left: "5%",
          width: "30%",
          top: 10,
          bottom: 20,
        },
        {
          left: "65%",
          width: "30%",
          top: 10,
          bottom: 20,
        },
      ];
      let series = [
        {
          ...JSON.parse(JSON.stringify(sdata1)),
          // data: [1, 2, 3, 4],
          // type: "bar",
          xAxisIndex: 0,
          yAxisIndex: 0,
          barWidth: 25,
          label: { show: false },
        },
        {
          // data: [5, 6, 7, 8],
          // type: "bar",
          ...JSON.parse(JSON.stringify(sdata2)),
          xAxisIndex: 1,
          yAxisIndex: 1,
          barWidth: 25,
        },
      ];
      let xAxis = [
        {
          gridIndex: 0,
          name:this.$t('format.perNum'),
          nameLocation:'start',
          nameTextStyle:{
             verticalAlign:'top',
             lineHeight:28
          },
          inverse: true,
          type: "value",
          position: "bottom",
          splitNumber: 3,
          splitLine: { show: true, lineStyle: { color: "#f7f4f8" } },
          axisTick: { show: false },
          axisLine: { show: false },
        },
        {
          gridIndex: 1,
          name:this.$t('format.perNum'),
          nameLocation:'start',
          nameTextStyle:{
             verticalAlign:'top',
             lineHeight:28
          },
          type: "value",
          splitNumber: 3,
          splitLine: { show: true, lineStyle: { color: "#f7f4f8" } },
          axisTick: { show: false },
          axisLine: { show: false },
        },
      ];
      let yAxis = [
        {
          ...ydata,
          // data: ["测试1", "测试1", "测试1", "测试1"],
          type: "category",
          gridIndex: 0,
          position: "bottom",
          axisLine: { show: true, lineStyle: { color: "#d9d9d9" } },
          axisTick: { show: false },
          position: "right",
          type: "category",
        },
        {
          ...ydata,
          // data: ["测试1", "测试1", "测试1", "测试1"],
          type: "category",
          gridIndex: 1,
          axisLine: { show: true, lineStyle: { color: "#d9d9d9" } },
          axisTick: { show: false },
          type: "category",
        },
      ];
      let graphic = [
        {
          type: "text",
          left: 0,
          top: "45%",
          style: {
            font: "normal 15px sans-serif",
            text: "男性",
          },
        },
        {
          type: "text",
          right: 0,
          top: "45%",
          style: {
            font: "normal 15px sans-serif",
            text: "女性",
          },
        },
      ];
      let chartData = {
        xAxis,
        yAxis,
        series,
        graphic,
        noProcess: true,
      };
      this.chartData = Object.assign({}, chartData, {
        otherConf: { ...(this.configObj.otherConf || {}), grid: grids,total},
      });
    },
  },
};
</script>

<style  scoped lang="less">
</style>