<template></template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      charts: "",
    };
  },

  mounted() {
    this.init("bingzhuangtu");
  },

  methods: {
    init(id) {
      this.charts = echarts.init(document.getElementById(id));

      var img =
        "data:image/png;base64, ";

      var trafficWay = [
        {
          name: "火车",
          value: 20,
        },
        {
          name: "飞机",
          value: 10,
        },
        {
          name: "客车",
          value: 30,
        },
        {
          name: "轮渡",
          value: 40,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "交通方式：" + params.name + "占百分比：" + percent + "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 10,
                length2: 20,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];
      let option = {
        backgroundColor: "#0A2E5D",
        color: color,
        title: {
          text: "交通方式",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["火车", "飞机", "客车", "轮渡"],
          right: 10,
          bottom: 10,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 10,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };

      // 使用刚指定的配置项和数据显示图表。
      this.charts.setOption(option);
    },
    getdata2() {
      var tempData = [
        {
          value: 5,
          name: "工伤保险信息10项",
        },
        {
          value: 16,
          name: "失业保险信息8项",
        },
        {
          value: 15,
          name: "医疗保险信息9项",
        },
        {
          value: 10,
          name: "生育保障9项",
        },
        {
          value: 15,
          name: "养老保险11项",
        },
      ];

      // 最终输出数据
      var result = [];

      // 颜色
      var color = ["#00F0FF", "#00FFD8", "#00FF78", "#0083FE", "#00BFFF"];

      // 间隔数据的样式
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };

      // 循环加入间隔数据
      for (var i = 0; i < tempData.length; i++) {
        result.push(
          {
            value: tempData[i].value,
            name: tempData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 2,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: placeHolderStyle, // 间隔数据
          }
        );
      }

      // 设置字体样式
      var rich = {
        b: {
          // 名字
          fontSize: 18,
          color: "#aae8ff",
          align: "left",
          padding: 2,
        },
        hr: {
          // 分割线
          borderColor: "#00ffff",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
        w: {
          // 数据存量
          fontSize: 18,
          color: "#aae8ff",
          align: "left",
          padding: 2,
        },
        c: {
          // 数据
          fontSize: 18,
          align: "center",
          padding: 2,
          color: "#53C6F2",
        },
        a: {
          // 单位
          fontSize: 18,
          align: "center",
          padding: 2,
          color: "#53C6F2",
        },
      };

      var option = {
        backgroundColor: "transparent", // 画布背景色
        tooltip: {
          // 提示框
          trigger: "item",
          formatter: "{b} : {d}%",
          //formatter: "{b} : {d}% <br/> {c}"
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "60%"], //内 外圆半径
            center: ["50%", "50%"],
            color: ["#00F0FF", "#00FFD8", "#00FF78", "#0083FE", "#00BFFF"], // 色块填充颜色
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: function (params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < tempData.length; i++) {
                      total += tempData[i].value;
                    }
                    percent = (params.value * 1000).toFixed(0);
                    if (params.name !== "") {
                      return (
                        "{b|" +
                        params.name +
                        "} \n {hr|} \n {w|数据存量:} {c|" +
                        percent +
                        "} {a|条}"
                      );
                    } else {
                      return "";
                    }
                  },
                  rich: rich,
                },
                labelLine: {
                  length: 20,
                  length2: 30,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: result,
          },
        ], // series end
      }; // option end
      var myChart = echarts.init(document.getElementById("bottom"));
      myChart.setOption(option);
    },
  },
};
</script>