<template>
  <div class="derunsanqin">
    <el-row v-if="data.total" class="titleNum">
      <el-col :span="6">
        <div class="num">{{ formateNum(data.total.play_count) }}</div>
        传播量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #ffbb44;">
          {{ formateNum(data.total.all) }}
        </div>
        发稿量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #11a0f8;">
          {{ formateNum(data.total.digg_count) }}
        </div>
        点赞量
      </el-col>
      <el-col :span="6">
        <div class="num" style="color: #f47f92;">
          {{ formateNum(data.total.comment_count) }}
        </div>
        评论量
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="24">
        <div class="chart">
          <div class="subtitle">受众性别比</div>
          <br />
          <el-row>
            <el-col :span="2" style="text-align: center;">
              男 {{ ((sexMen / all) * 100).toFixed(2) }}%
            </el-col>
            <el-col :span="20">
              <div class="wumen">
                <div
                  class="men"
                  :style="{ width: ((sexMen / all) * 100).toFixed(2) + '%' }"
                ></div>
              </div>
            </el-col>
            <el-col :span="2" style="text-align: center;">
              {{ ((sexWoman / all) * 100).toFixed(2) }}% 女
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">发稿平台</div>
          <el-divider></el-divider>
          <div
            class="pieChart"
            ref="pieChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">词云</div>
          <el-divider></el-divider>
          <div
            class="cloudChart"
            ref="cloudChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">地域分布</div>
          <el-divider></el-divider>
          <div
            class="mapChart"
            ref="mapChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart">
          <div class="subtitle">情感分布</div>
          <el-divider></el-divider>
          <div
            class="emotionChart"
            ref="emotionChart"
            style="width: 100%;min-height: 100px"
          ></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import { defaultAjax } from "@/api/index";
import * as echarts from "echarts/core";
import { PieChart, MapChart } from "echarts/charts";
import {
  TitleComponent,
  GridComponent,
  ToolboxComponent,
  VisualMapComponent,
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  GridComponent,
  PieChart,
  MapChart,
  CanvasRenderer,
  ToolboxComponent,
  VisualMapComponent,
  LabelLayout,
  UniversalTransition,
  LegendComponent,
]);
import "echarts-wordcloud";
export default {
  name: "derunsanqin",
  props: ["item"],
  data() {
    return {
      data: {},
      sexMen: 0,
      sexWoman: 0,
      all: 1,
    };
  },
  mounted() {
    defaultAjax({
      url: "https://djweb.smcic.net/dj/static/drsq.json?t=" + Date.now(),
    }).then(res => {
      this.cloudChart(res || []);
    });
    defaultAjax({
      url: this.item.url[0],
      data: {},
    }).then(res => {
      this.data = res || {};
      for (let i = 0; i < this.data.character.sex.length; i++) {
        const v = this.data.character.sex[i];
        if (v.name === "男") {
          this.sexMen = v.value;
        } else if (v.name === "女") {
          this.sexWoman = v.value;
        }
        this.all += v.value;
      }
      this.pieChartFun();
      this.emotionChartFun();
      this.mapChartFun(JSON.parse(localStorage.getItem("chinaMap") || "{}"));
    });
  },
  computed: {},
  methods: {
    formateNum(n) {
      let num = n;
      if (isNaN(n)) num = "0";
      else if (n >= 100000000) num = ((n / 100000000).toFixed(2) - 0 + "").replace(/\B(?=(?:\d{3})+\b)/g, ",") + "亿";
      else if (n >= 10000) num = ((n / 10000).toFixed(2) - 0 + "").replace(/\B(?=(?:\d{3})+\b)/g, ",") + "万";
      else num = (num + "").replace(/\B(?=(?:\d{3})+\b)/g, ",");
      return num;
    },
    pieChartFun() {
      const li = this.data.platform.map(v => {
        return {
          value: v.total,
          name: v.groupValue,
        };
      });
      this.chart1 = echarts.init(this.$refs.pieChart);
      this.chart1.resize({
        height: (this.$refs.pieChart.offsetWidth * 9) / 16,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{b|{b}：}{per|{d}%}",
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#000",
                  fontSize: 14,
                },
              },
            },
            data: li,
          },
        ],
      };

      option && this.chart1.setOption(option);
    },
    mapChartFun(map) {
      this.chart2 = echarts.init(this.$refs.mapChart);
      this.chart2.resize({
        height: this.$refs.mapChart.offsetWidth,
      });
      echarts.registerMap("china", map);
      var option = {
        tooltip: {
          show: true,
          confine: true,
          formatter: function(res) {
            if (!res.data) return "";
            return res.data.name + ":" + (res.data.value || 0);
          },
        },
        legend: {
          show: false,
        },
        visualMap: {
          show: false,
          min: 0,
          max: 1000,
          inRange: {
            color: ["rgba(118,172,255, .2)", "orangered"],
          },
        },
        series: [
          {
            type: "map",
            map: "china",
            geoIndex: 0,
            zppm: 1.25,
            label: {
              show: true,
              formatter: function(r) {
                let d = r.data || {};
                if (!d.name) return "";
                var out = d.value;
                if (out >= 100000000) {
                  out = (out / 100000000).toFixed(2) + "亿";
                } else if (out >= 10000) {
                  out = (out / 10000).toFixed(2) + "万";
                }
                return d.name + ":" + out;
              },
            },
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1.25,
              max: 2,
            },
            itemStyle: {
              borderColor: "#76acff", //每个区域的边框色
              areaColor: "rgba(118,172,255, 0)", //区域背景色
            },
            data: this.data.map || [],
          },
        ],
      };

      option && this.chart2.setOption(option);
    },
    emotionChartFun() {
      const li = this.data.character ? this.data.character.emotion || [] : [];
      const feeling = this.data.character
        ? this.data.character.feeling || []
        : [];
      let l = [],
        feelingList = [];
      for (let i = 0; i < li.length; i++) {
        const v = li[i];
        v.value && l.push(v);
      }
      for (let i = 0; i < feeling.length; i++) {
        const v = feeling[i];
        v.value && feelingList.push(v);
      }
      this.chart2 = echarts.init(this.$refs.emotionChart);
      this.chart2.resize({
        height: this.$refs.emotionChart.offsetWidth,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
          rich: {
            b: {
              color: "#4C5058",
              fontSize: 14,
              fontWeight: "bold",
              lineHeight: 33,
            },
            per: {
              color: "#000",
              fontSize: 14,
            },
          },
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              formatter: "{b|{b}：}{per|{d}%}",
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#000",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 1,
              length2: 0,
            },
            data: feelingList,
          },
          {
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{b|{b}：}{per|{d}%}",
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#000",
                  fontSize: 14,
                },
              },
            },
            data: l,
          },
        ],
      };

      option && this.chart2.setOption(option);
    },
    cloudChart(list) {
      this.chart3 = echarts.init(this.$refs.cloudChart);
      this.chart3.resize({
        height: (this.$refs.cloudChart.offsetWidth * 9) / 16,
      });
      this.chart3.setOption({
        legend: {
          show: false,
        },
        series: [
          {
            type: "wordCloud",

            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

            shape: "alias of square",
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            width: "100%",
            height: "100%",

            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.

            sizeRange: [12, 60],

            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

            rotationRange: [-90, 90],
            rotationStep: 45,

            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.

            gridSize: 8,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,

            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,

            // Global text style
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function() {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              focus: "self",

              textStyle: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: list,
          },
        ],
      });
    },
  },
  beforeUnmount: function() {},
  components: {},
};
</script>

<style></style>
