eta_front/src/views/positionAnalysis_manage/components/chartBox.vue

<template>
  <div :class="['chart-render-box', isPcShow ? 'chart-render-box-pc' : '']">
    <div class="label-box">
      <div>
        <span
          class="color-box"
          :style="{ background: colorMap.get(keyVal)[0] }"
        ></span>
        <span>{{ data.labelName }}</span>
      </div>
      <div>
        <span
          class="color-box"
          :style="{ background: colorMap.get(keyVal)[1] }"
        ></span>
        <span>增</span>
      </div>
      <div>
        <span
          class="color-box"
          :style="{ background: colorMap.get(keyVal)[2] }"
        ></span>
        <span>减</span>
      </div>
    </div>
    <div class="chart-content">
      <!-- <img class="mark-img" src="../../../../../assets/hzyb/chart/mark.png" alt=""> -->
      <div class="chart-box" :id="'chart-box-' + keyVal"></div>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      :visible.sync="showDetailDia"
      title="详情"
      :width="500"
      draggable
      :close-on-click-modal="false"
      append-to-body
      custom-class="position-analysis-detail-page-dialog"
    >
      <div class="detail-pop-wrap">
        <h2 class="title">{{ showDetailData.DealShortName }}</h2>
        <div class="table-box">
          <div class="item">
            <div>持{{ showDetailData.TypeName }}</div>
            <div>{{ showDetailData.DealValue }}</div>
          </div>
          <div class="item">
            <div>增减</div>
            <div>{{ showDetailData.DealChange }}</div>
          </div>
          <div class="item">
            <div>占比</div>
            <div>{{ (showDetailData.Rate * 100).toFixed(2) }}%</div>
          </div>
          <div class="item">
            <div>前{{ showDetailData.Rank }}名持净多单</div>
            <div>{{ showDetailData.BeforeAllValue }}</div>
          </div>
          <div class="item">
            <div>增减</div>
            <div>{{ showDetailData.BeforeAllChange }}</div>
          </div>
          <div class="item">
            <div>占比</div>
            <div>{{ (showDetailData.BeforeAllRate * 100).toFixed(2) }}%</div>
          </div>
        </div>
        <div class="close-btn" @click="showDetailDia = false">知道了</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartszhCN from "@/utils/highcahrts-zh_CN";

HighchartszhCN(Highcharts);
HighchartsMore(Highcharts);
export default {
  props: {
    keyVal: String,
    data: Object,
  },
  computed: {
    //图表默认配置项
    chartDefaultOpts() {
      let that = this;
      const chartDefaultOpts = {
        chart: {
          type: "column",
          inverted: true, //xy轴换位置
          marginRight: 85,
        },
        title: {
          text: "",
        },
        //版权信息
        credits: { enabled: false },
        plotOptions: {
          column: {
            pointPadding: 0,
            stacking: "normal",
            dataLabels: {
              enabled: true,
              align: "right",
              color: "#333",
              inside: false,
              crop: false,
              overflow: true,
              x: 80,
              formatter: function (e) {
                return this.point.options.isLabel;
              },
            },
            events: {
              click: function (event) {
                const name = event.point.category;
                that.showDetail(name);
              },
            },
          },
        },
        legend: {
          enabled: false, //关闭图例
        },
        tooltip: {
          enabled: false,
        },
      };
      return chartDefaultOpts;
    },
  },
  watch: {
    data(nval) {
      nval.List && this.chartRender();
    },
  },
  data() {
    return {
      //配色表
      colorMap: new Map([
        ["BuyList", ["#FFD600", "#F32F2F", "#52D424"]],
        ["SoldList", ["#C6DDFF", "#363EFF", "#52D424"]],
        ["CleanBuyList", ["#FFD600", "#F32F2F", "#52D424"]],
        ["CleanSoldList", ["#C6DDFF", "#363EFF", "#52D424"]],
      ]),

      isPcShow: true,

      //点击柱子显示弹窗
      showDetailDia: false,
      showDetailData: {},
    };
  },

  methods: {
    //绘图
    chartRender() {
      let options = {};
      let categories = [];
      let series = [
        {
          name: "总数",
          data: [],
        },
        {
          name: "增长",
          data: [],
        },
        {
          name: "减少",
          data: [],
        },
      ];
      let totalArr = [],
        increaseArr = [],
        reduceArr = [];
      this.data.List.forEach((item, index) => {
        categories.push(item.DealShortName);
        // 处理series
        if (item.DealChange < 0) {
          //减少
          totalArr.push({ y: item.DealValue });
          increaseArr.push({ y: 0 });
          reduceArr.push({
            y: -item.DealChange,
            isLabel: `${item.DealValue}/${item.DealChange}`,
          });
        } else {
          totalArr.push({ y: item.DealValue - item.DealChange });
          reduceArr.push({ y: 0 });
          increaseArr.push({
            y: item.DealChange,
            isLabel: `${item.DealValue}/+${item.DealChange}`,
          });
        }
      });
      series[0].data = totalArr;
      series[1].data = increaseArr;
      series[2].data = reduceArr;
      let xAxis = {
        categories: categories,
        tickWidth: 1,
        tickPosition: "outside",
      };
      let yAxis = {
        opposite: true,
        gridLineWidth: 1,
        gridLineColor: "#E4E4E4",
        gridLineDashStyle: "longdash",
        endOnTick: false,
        showLastLabel: true,
        lineWidth: 1,
        tickWidth: 1,
        tickPosition: "outside",
        title: {
          text: "",
        },
        reversedStacks: false,
      };

      options.colors = this.colorMap.get(this.keyVal);
      options.xAxis = xAxis;
      options.yAxis = yAxis;
      options.series = series;
      options = { ...this.chartDefaultOpts, ...options };
      // console.log('渲染',options);
      Highcharts.chart(`chart-box-${this.keyVal}`, options);
    },

    showDetail(name) {
      let data = {};
      this.data.List.forEach((item) => {
        if (item.DealShortName === name) {
          data = item;
        }
      });
      // 判断是否是在pc中 如果是则通知pc显示弹窗
      // console.log(window.innerWidth);

      this.showDetailDia = true;
      this.showDetailData = {
        ...data,
        type_name: this.data.name,
      };
    },
  },
  mounted() {
    this.data.List && this.chartRender();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/theme-vars.scss";
* {
  box-sizing: border-box;
}
.chart-render-box {
  width: 100%;
  overflow: hidden;
  .label-box {
    display: flex;
    justify-content: center;
    div {
      margin-right: 30px;
    }
    .color-box {
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-right: 10px;
      border-radius: 4px;
    }
  }
  .chart-content {
    width: 100%;
    height: 70vh;
    position: relative;
    .mark-img {
      position: absolute;
      width: 58%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }
    .chart-box {
      width: 100%;
      height: 100%;
    }
  }
}
.mobile-detail-pop-wrap {
  width: 90vw;
  .title {
    text-align: center;
    font-size: 32px;
    padding: 30px;
  }
  .table-box {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33.33%;
      text-align: center;
      padding: 30px 20px;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      div:first-child {
        color: #999999;
        font-size: 24px;
      }
      div:last-child {
        font-size: 32px;
        font-weight: 600;
      }
    }
  }
  .close-btn {
    text-align: center;
    line-height: 96px;
    color: #e3b377;
  }
}

.detail-pop-wrap {
  .title {
    text-align: center;
    font-size: 16px;
    padding-bottom: 10px;
    margin-top: 0;
  }
  .table-box {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 33.33%;
      text-align: center;
      padding: 30px 20px;
      border-right: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      div:first-child {
        color: #999999;
        font-size: 14px;
      }
      div:last-child {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .item:nth-child(3n) {
      border-right: none;
    }
    .item:nth-child(n + 4) {
      border-bottom: none;
    }
  }
  .close-btn {
    text-align: center;
    line-height: 40px;
    color: #fff;
    width: 300px;
    height: 40px;
    background: $theme-color;
    border-radius: 41px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    cursor: pointer;
  }
}
// @media (min-width: 600px){
.chart-render-box-pc {
  .label-box {
    display: flex;
    justify-content: center;
    font-size: 14px;
    div {
      margin-right: 20px;
    }
    .color-box {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 8px;
      border-radius: 4px;
      position: relative;
      top: 2px;
    }
  }
  .chart-content {
    height: 800px;
  }
}
// }
</style>