<template>
  <div class="mianmianjiedao">
    <el-row v-if="allPlatform" class="titleNum">
      <el-col :span="5">
        <div class="num">{{ formateNum(allPlatform.read) }}</div>
        阅读量
      </el-col>
      <el-col :span="5">
        <div class="num" style="color: #11a0f8;">
          {{ formateNum(allPlatform.digg) }}
        </div>
        点赞量
      </el-col>
      <el-col :span="5">
        <div class="num" style="color: #ffbb44;">
          {{ formateNum(allPlatform.comment) }}
        </div>
        评论量
      </el-col>
      <el-col :span="5">
        <div class="num" style="color: #f47f92;">
          {{ formateNum(allPlatform.share) }}
        </div>
        分享量
      </el-col>
      <el-col :span="4">
        <div class="num" style="color: #42b983;">
          {{ formateNum(allPlatform.publish) }}
        </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="platformChart"
            ref="platformChart"
            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,
  TooltipComponent,
  GridComponent,
  ToolboxComponent,
  VisualMapComponent,
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PieChart,
  MapChart,
  CanvasRenderer,
  ToolboxComponent,
  VisualMapComponent,
  LabelLayout,
  UniversalTransition,
  LegendComponent,
]);
import "echarts-wordcloud";
export default {
  name: "mianmianjiedao",
  props: ["item"],
  data() {
    return {
      platform: [],
      allPlatform: {
        digg: 0,
        comment: 0,
        publish: 0,
        read: 0,
        share: 0,
      },
      oriData: {},
    };
  },
  mounted() {
    defaultAjax({
      url:
        "https://dangjian-web.oss-cn-chengdu.aliyuncs.com/data/mmjd/all.json?v=" +
        Date.now(),
    }).then(res => {
      this.platform = res.platform || [];
      let allPlatform = {
        digg: 0,
        comment: 0,
        publish: 0,
        read: 0,
        share: 0,
      };
      for (let i = 0; i < (res.total || []).length; i++) {
        const v = res.total[i];
        allPlatform.digg += v.digg || 0;
        allPlatform.comment += v.comment || 0;
        allPlatform.publish += v.publish || 0;
        allPlatform.read += v.read || 0;
        allPlatform.share += v.share || 0;
      }
      this.allPlatform = allPlatform;
      this.oriData = res || {};
      this.pieChartFun();
      this.platformChartFun();
      this.cloudChart();
      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() {
      this.chart0 = echarts.init(this.$refs.pieChart);
      this.chart0.resize({
        height: (this.$refs.pieChart.offsetWidth * 9) / 16,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "50%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: " {b|{b}：} {per|{d}%}  ",
              rich: {
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  padding: [3, 4],
                  lineHeight: 33,
                },
                per: {
                  color: "#000",
                  fontSize: 14,
                  padding: [3, 0],
                },
              },
            },
            data: this.platform,
          },
        ],
      };

      option && this.chart0.setOption(option);
    },
    platformChartFun() {
      const li = [],
        liKey = [];
      this.oriData.platform
        .sort((a, b) => a.value - b.value)
        .map(v => {
          li.push(v.value);
          liKey.push(v.name);
        });
      this.chart1 = echarts.init(this.$refs.platformChart);
      this.chart1.resize({
        height: this.$refs.platformChart.offsetWidth,
      });
      var option = {
        tooltip: {
          confine: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: 0,
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: liKey,
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
            },
            // itemStyle: {
            //   color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            //     { offset: 0, color: "#83bff6" },
            //     { offset: 0.5, color: "#188df0" },
            //     { offset: 1, color: "#188df0" },
            //   ]),
            // },
            // emphasis: {
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            //       { offset: 0, color: "#2378f7" },
            //       { offset: 0.7, color: "#2378f7" },
            //       { offset: 1, color: "#83bff6" },
            //     ]),
            //   },
            // },
            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: {
          confine: true,
          show: true,
          formatter: function(res) {
            if (!res.data) return "";
            return res.data.name + ":" + (res.data.value || 0);
          },
        },
        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.oriData.map || [],
          },
        ],
      };

      option && this.chart2.setOption(option);
    },
    cloudChart() {
      this.chart3 = echarts.init(this.$refs.cloudChart);
      this.chart3.resize({
        height: (this.$refs.cloudChart.offsetWidth * 9) / 16,
      });
      this.chart3.setOption({
        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: this.oriData.words,
          },
        ],
      });
    },
  },
  beforeUnmount: function() {},
  components: {},
};
</script>

<style>
.huashanyunhai {
  min-width: 1200px;
}
</style>
