<template>
  <div class="show_main">
    <div class="show_head">
      <div class="market_top_nav_text">
        <div
          v-for="(item, index) in nav"
          :key="index"
          :style="{ color: item.is ? '#EC7C00' : '#999999' }"
          @click="navClick(item.name)"
        >
          {{ item.name }}
        </div>
      </div>
      <div></div>
    </div>
    <div v-if="!showLoad">
      <div v-if="nav[0].is">
        <div id="polylines" :style="{ width: '100%', height: '400px' }"></div>
      </div>
      <div v-if="nav[1].is">
        <div id="myChart" :style="{ width: '100%', height: '600px' }"></div>
      </div>
      <div v-if="nav[2].is">
        <div
          id="showColumnar"
          :style="{ width: '100%', height: '400px' }"
        ></div>
        <div class="columnar_value">
          <span style="color: #d9001b">上涨{{ rose }}家</span>
          <span style="color: #999999">平盘{{ equal }}家</span>
          <span style="color: #6fbb60">下跌{{ fall }}家</span>
        </div>
      </div>
      <div v-if="nav[3].is || nav[4].is">
        <div class="show_list">
          <el-table :data="list" style="width: 100%">
            <el-table-column prop="securityCode" label="股票代码">
            </el-table-column>
            <el-table-column prop="securityName" label="股票名称">
            </el-table-column>
            <el-table-column prop="openingPrice" label="开盘价" width="90">
            </el-table-column>
            <el-table-column prop="closingPrice" label="收盘价" width="90">
            </el-table-column>
            <el-table-column prop="highestPrice" label="最高价">
            </el-table-column>
            <el-table-column prop="lowestPrice" label="最低价">
            </el-table-column>
            <el-table-column label="当日涨跌幅">
              <template slot-scope="scope">
                <div>{{ scope.row.riseLossesCurrentDay.toFixed(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="volume" label="成交量"> </el-table-column>
            <el-table-column prop="turnover" label="成交额"> </el-table-column>
            <el-table-column
              prop="freeCapitalization"
              label="自由流通市值"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="totalInstitutionalPositions"
              label="机构持仓合计"
              width="120"
            >
            </el-table-column>
            <!-- <el-table-column prop="ban" label="几天几板" width="150"> -->
            <!-- </el-table-column> -->
            <el-table-column prop="dayAndPlate">
              <template slot="header" slot-scope="scope">
                <div class="plate_sift" @click="selectPlateSift">
                  <div>几天几板</div>
                  <div class="module_head_icon" v-if="plateSift">
                    <img
                      src="../../../static/shengxu_true.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                    <img
                      src="../../../static/jiangxu_false.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                  </div>
                  <div class="module_head_icon" v-else>
                    <img
                      src="../../../static/shengxu_false.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                    <img
                      src="../../../static/jiangxu_true.png"
                      class="head_icon"
                      mode="scaleToFill"
                    />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="dongCaiIndustryIndexCode2"
              label="所属东财行业指数2级"
            >
            </el-table-column>
          </el-table>
          <div class="pagination" v-if="total > 20" ref="footer">
            <el-pagination
              layout="prev, pager, next"
              :total="total"
              background
              :page-size="20"
              @current-change="currentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_loading" v-else></div>
  </div>
</template>

<script>
import {
  stockSortChange,
  kLine,
  riseLossesStatistics,
  riseLossesDetail,
  dongCaiSortChange,
  ChangeriseLossesStatistics,
  dongCaiSortChangekLine,
  ChangedongCaiRiseLosses,
} from "@/api/user";
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    date: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      nav: [
        {
          name: "排名变化",
          is: true,
        },
        {
          name: "板块指数",
          is: false,
        },
        {
          name: "涨跌区间",
          is: false,
        },
        {
          name: "涨停个股",
          is: false,
          current: 1,
        },
        {
          name: "跌停个股",
          is: false,
          current: 0,
        },
      ],
      showLoad: false,
      total: 20,
      list: [
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
        {
          code: "301157.SZ",
          name: "C华塑科",
          kai: "999.99",
          shou: "999.99",
          zhangdie: "999.99",
          zuigao: "71.12",
          zuidi: "22.22",
          diefu: "12.23",
          zhangting: "是",
          dieting: "否",
          chengjiaoliang: "7347.12万",
          chengjiaoe: "7347.12万",
          ziyou: "1299.96万",
          jigou: "1299.96万",
          suoshu: "计算机硬件",
          ban: "20天3板",
        },
      ],
      rose: "",
      fall: "",
      equal: "",
      navIndex: "",
      plateSift: true,
    };
  },
  created() {
    // console.log(this.id);
    // this.reidng(this.id);
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchartsZ(this.id);
      this.initEchartsK(this.id);
    });
    // console.log();
  },
  methods: {
    reidng(id) {
      let data = `?businessDate=${
        this.date
      }&pageModel.pageNo=1&pageModel.pageSize=20&riseOrLosses=${
        this.navIndex
      }&securityCode=${id}&dayAndPlateSort=${this.plateSift ? 1 : 0},`;
      ChangedongCaiRiseLosses(data)
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    navClick(name) {
      this.nav.forEach((item) => {
        if (item.name == name) {
          item.is = true;
          this.showLoad = true;
          setTimeout(() => {
            this.showLoad = false;
            this.$nextTick(() => {
              if (this.nav[0].is) {
                this.initEchartsZ(this.id);
              } else if (this.nav[1].is) {
                this.initEchartsK(this.id);
              } else if (this.nav[2].is) {
                this.initEcharts(this.id);
              } else if (this.nav[3].is || this.nav[4].is) {
                this.navIndex = item.current;
                this.reidng(this.id);
              }
            });
          }, 2000);
        } else {
          item.is = false;
        }
      });
    },
    selectPlateSift() {
      this.plateSift = !this.plateSift;
      this.rending();
    },
    // 初始化折线图
    initEchartsZ(id) {
      dongCaiSortChange(id)
        .then((res) => {
          // this.tendencyList = res.data.list;
          var option;
          this.polylines = this.$echarts.init(
            document.getElementById("polylines")
          );
          this.polylines.setOption(
            (option = {
              xAxis: {
                type: "category",
                data: res.data.xaxis,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: res.data.yaxis,
                  type: "line",
                },
              ],
            }),
            true
          );
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // K线图
    splitData(rawData) {
      let categoryData = [];
      let values = [];
      let volumes = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
        volumes.push([
          i,
          rawData[i][4],
          rawData[i][0] > rawData[i][1] ? 1 : -1,
        ]);
      }
      // volumes.push();
      return {
        categoryData: categoryData,
        values: values,
        volumes: volumes,
      };
    },
    calculateMA(dayCount, data) {
      var result = [];
      for (var i = 0, len = data.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
          sum += data.values[i - j][1];
        }
        result.push(+(sum / dayCount).toFixed(3));
      }
      // console.log(result);
      return result;
    },
    // 初始化K线图
    initEchartsK(id) {
      dongCaiSortChangekLine(id)
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          const upColor = "#00da3c";
          const downColor = "#ec0000";
          var option;
          this.myChart = this.$echarts.init(document.getElementById("myChart"));
          var data = this.splitData(res.data);
          // console.log(data);
          this.myChart.setOption(
            (option = {
              animation: false,
              legend: {
                top: 10,
                left: "center",
                data: ["日K", "MA5", "MA10", "MA20", "MA30"],
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                },
                formatter: function (param) {
                  // let param1 = param[1];
                  if (param[0].data.length < 6) {
                    param = param[1];
                    console.log(param);
                    return [
                      "日期: " +
                        param.axisValue +
                        '<hr size=1 style="margin: 3px 0">',
                      "开盘: " + param.data[1] + "<br/>",
                      "关盘: " + param.data[2] + "<br/>",
                      "最低: " + param.data[3] + "<br/>",
                      "最高: " + param.data[4] + "<br/>",
                      "成交额: " + param.data[5] + "<br/>",
                    ].join("");
                  } else {
                    param = param[0];
                    console.log(param);
                    return [
                      "日期: " +
                        param.axisValue +
                        '<hr size=1 style="margin: 3px 0">',
                      "开盘: " + param.data[1] + "<br/>",
                      "关盘: " + param.data[2] + "<br/>",
                      "最低: " + param.data[3] + "<br/>",
                      "最高: " + param.data[4] + "<br/>",
                      "成交额: " + param.data[5] + "<br/>",
                    ].join("");
                  }
                },
                borderWidth: 1,
                borderColor: "#ccc",
                padding: 10,
                textStyle: {
                  color: "#000",
                },
                position: function (pos, params, el, elRect, size) {
                  const obj = {
                    top: 10,
                  };
                  obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                  return obj;
                },
                // extraCssText: 'width: 170px'
              },
              axisPointer: {
                link: [
                  {
                    xAxisIndex: "all",
                  },
                ],
                label: {
                  backgroundColor: "#777",
                },
              },
              toolbox: {
                feature: {
                  dataZoom: {
                    yAxisIndex: false,
                  },
                  brush: {
                    type: ["lineX", "clear"],
                  },
                },
              },
              brush: {
                xAxisIndex: "all",
                brushLink: "all",
                outOfBrush: {
                  colorAlpha: 0.1,
                },
              },
              visualMap: {
                show: false,
                seriesIndex: 5,
                dimension: 2,
                pieces: [
                  {
                    value: 1,
                    color: upColor,
                  },
                  {
                    value: -1,
                    color: downColor,
                  },
                ],
              },
              grid: [
                {
                  left: "10%",
                  right: "8%",
                  height: "50%",
                },
                {
                  left: "10%",
                  right: "8%",
                  top: "63%",
                  height: "16%",
                },
              ],
              xAxis: [
                {
                  type: "category",
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: { onZero: false },
                  splitLine: { show: false },
                  min: "dataMin",
                  max: "dataMax",
                  axisPointer: {
                    z: 100,
                  },
                },
                {
                  type: "category",
                  gridIndex: 1,
                  data: data.categoryData,
                  boundaryGap: false,
                  axisLine: { onZero: false },
                  axisTick: { show: false },
                  splitLine: { show: false },
                  axisLabel: { show: false },
                  min: "dataMin",
                  max: "dataMax",
                },
              ],
              yAxis: [
                {
                  scale: true,
                  splitArea: {
                    show: true,
                  },
                },
                {
                  scale: true,
                  gridIndex: 1,
                  splitNumber: 2,
                  axisLabel: { show: false },
                  axisLine: { show: false },
                  axisTick: { show: false },
                  splitLine: { show: false },
                },
              ],
              dataZoom: [
                {
                  type: "inside",
                  xAxisIndex: [0, 1],
                  start: 0,
                  end: 100,
                },
                {
                  show: false,
                  xAxisIndex: [0, 1],
                  type: "slider",
                  top: "85%",
                  start: 0,
                  end: 100,
                },
              ],
              series: [
                {
                  name: "日K",
                  type: "candlestick",
                  data: data.values,
                  itemStyle: {
                    color: downColor,
                    color0: upColor,
                    borderColor: undefined,
                    borderColor0: undefined,
                  },
                  tooltip: {
                    formatter: function (param) {
                      console.log(param);
                      param = param[0];
                      return [
                        "Date: " +
                          param.name +
                          '<hr size=1 style="margin: 3px 0">',
                        "开盘: " + param.data[0] + "<br/>",
                        "Close: " + param.data[1] + "<br/>",
                        "Lowest: " + param.data[2] + "<br/>",
                        "Highest: " + param.data[3] + "<br/>",
                      ].join("");
                    },
                  },
                },
                {
                  name: "MA5",
                  type: "line",
                  data: this.calculateMA(5, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA10",
                  type: "line",
                  data: this.calculateMA(10, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA20",
                  type: "line",
                  data: this.calculateMA(20, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "MA30",
                  type: "line",
                  data: this.calculateMA(30, data),
                  smooth: true,
                  lineStyle: {
                    opacity: 0.5,
                  },
                },
                {
                  name: "Volume",
                  type: "bar",
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  itemStyle: {
                    // normal: {
                    //   color: function (param) {
                    //     return downColor;
                    //   },
                    // },
                  },
                  data: data.volumes,
                },
              ],
            }),
            true
          );
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 初始化柱状图
    initEcharts(id) {
      let data = `?day=${this.date}&securityCode=${id}`;
      ChangeriseLossesStatistics(data)
        .then((res) => {
          this.rose = res.data.riseNum;
          this.fall = res.data.lossesNum;
          this.equal = res.data.equalNum;
          var option;
          this.showColumnar = this.$echarts.init(
            document.getElementById("showColumnar")
          );
          this.showColumnar.setOption(
            (option = {
              xAxis: {
                type: "category",
                data: [
                  "≥10%",
                  "≥7%",
                  "7-5%",
                  "5-3%",
                  "3-0%",
                  "平",
                  "-3至-5%",
                  "-5至-7%",
                  "≤-7%",
                  "≤-10%",
                ],
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: res.data.data,
                  type: "bar",
                  itemStyle: {
                    normal: {
                      //这里是重点
                      color: function (params) {
                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = [
                          "#D9001B",
                          "#D9001B",
                          "#D9001B",
                          "#D9001B",
                          "#D9001B",
                          "#999999",
                          "#6FBB60",
                          "#6FBB60",
                          "#6FBB60",
                          "#6FBB60",
                        ];
                        return colorList[params.dataIndex];
                      },
                      label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          // color: "black",
                          fontSize: 14,
                        },
                      },
                    },
                  },
                },
              ],
            }),
            true
          );
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
    // 分页
    currentChange(e) {
      ChangedongCaiRiseLosses({
        businessDate: this.date,
        pageModel: {
          pageNo: e,
          pageSize: 20,
          sortField: "",
          sortWay: "",
        },
        riseOrLosses: this.navIndex,
        securityType: "",
        securityCode: this.id,
      })
        .then((res) => {
          // this.tendencyList = res.data.list;
          // this.privateList = res.data.list;
          this.list = res.data.list;
          this.total = res.data.totalCount;
          console.log(res);
        })
        .catch(() => {
          // this.shareLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.show_main {
  height: 74vh;
  overflow-y: auto;
}
.market_top_nav_text {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.market_top_nav_text > div {
  margin-right: 20px;
  cursor: pointer;
}
.bottom_loading {
  top: 100px;
  left: 48%;
  position: relative;
  width: 30px;
  height: 30px;
  border: 2px solid #000;
  border-top-color: rgba(0, 0, 0, 0.2);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  animation: circle infinite 0.75s linear;
}
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.columnar_value {
  display: flex;
  align-items: center;
  justify-content: center;
}
.columnar_value > span {
  margin-right: 30px;
}
.plate_sift {
  display: flex;
  justify-content: center;
  cursor: pointer;
  .module_head_icon {
    margin-left: 4px;
    display: flex;
    flex-direction: column;
    margin-top: 3px;
    .head_icon {
      width: 9px;
      height: 5px;
      margin-top: 2px;
    }
  }
}
.pagination {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .el-table td {
  text-align: center;
  border: 0;
}
::v-deep .el-table th.is-leaf {
  text-align: center;
  background-color: #fff9f3;
  color: #333333;
  padding: 13px 0;
}
.show_list {
  margin-top: 20px;
}
.show_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
