<style>
.home-page .home-page-box {
  height: 415px;
  padding-right: 30px;
  margin-bottom: 30px;
}
.home-page .home-page-box .ht-left,
.home-page .home-page-box .ht-right {
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 30px;
  padding: 28px 27px;
  box-sizing: border-box;
}
.home-page .home-page-box .tit {
  font-size: 16px;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
}
.home-page .home-page-box .tit2 {
  color: white;
}
.home-page .khjb {
  margin-top: 30px;
}
.home-page .khjb li {
  padding: 14px 93px 14px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(244, 245, 249, 1);
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(17, 17, 17, 1);
}
.home-page .khjb li:first-child {
  border-radius: 30px 30px 0 0;
}
.home-page .khjb li:last-child {
  border-radius: 0 0 30px 30px;
}
.home-page .khjb li img {
  margin-right: 30px;
}
.home-page .khjb li div {
  display: flex;
  align-items: center;
}
.home-page .myecharts-sale {
  height: 80%;
}
.home-page .myecharts-sale2 {
  height: 70%;
}
.home-page .shoukuan {
  height: 20%;
  display: flex;
  justify-content: space-between;
}
.home-page .shoukuan-d {
  display: flex;
  align-items: center;
  height: 14px;
  font-weight: 400;
}
.home-page .shoukuan-d > div {
  display: flex;
  align-items: center;
}
.home-page .shoukuan-d > div:nth-child(2) {
  margin-left: 40px;
}
.home-page .shoukuan-d > div span.rad {
  width: 14px;
  height: 14px;
  background: #409efe;
  border-radius: 50%;
  margin-right: 10px;
  display: block;
}
.home-page .shoukuan-d > div span.rad2 {
  background: rgba(255, 164, 117, 1);
}
.home-page .yejizhibiao {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-page .yejizhibiao .el-input__inner {
  border-radius: 17px;
  background-color: #409efe;
  color: white;
}
.myCanvas-box {
  text-align: center;
  padding-top: 50px;
}
.yejizhibiao-item {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 12px;
  color: #111111;
}
.yejizhibiao-item div p span {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #409efe;
  border-radius: 50%;
}
.yejizhibiao-item div:nth-child(1) p span {
  background: #ffa97c;
}
.yejizhibiao-item div:nth-child(2) p span {
  background: #e6ecf8;
}
.shuying {
  display: flex;
  padding: 20px 0 0 0;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
}
.meiju {
  font-size: 12px;
  color: #ffffff;
}
.meiju div p {
  display: flex;
  align-items: center;
}
.meiju div p span {
  width: 12px;
  height: 12px;
  background: rgba(255, 164, 117, 1);
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
.meiju div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meiju div:nth-child(1) {
  margin-bottom: 5px;
}
.kehuloudou {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kehuloudou .el-input__inner {
  border-radius: 17px;
  background-color: white;
  color: #409efe;
}
</style>
<template>
    <div class="home-page">
        <div class="home-page-box">
            <el-row :gutter="30" class="height100">
                <el-col :span="18" class="height100">
                    <div class="ht-left">
                        <div class="shoukuan">
                            <p class="tit perfectFont">收款趋势</p>
                            <div class="shoukuan-d">
                                <div>
                                    <span class="rad"></span>
                                    <span>待收金额  0.00元</span>
                                </div>
                                <div>
                                    <span  class="rad rad2"></span>
                                    <span>已收金额  0.00元</span>
                                </div>
                            </div>
                        </div>
                        <div class="myecharts-sale" ref="myecharts" ></div>
                    </div>
                </el-col>
                <el-col :span="6" class="height100">
                    <div class="ht-right" style="padding-top: 20px;">
                        <div class="yejizhibiao">
                            <p class="tit perfectFont">业绩指标</p>
                            <el-select v-model="value" size="mini" class="w110" placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="myCanvas-box">
                            <canvas id="myCanvas" width="180" height="180">
                                当前浏览器版本过低，请使用其他浏览器尝试
                            </canvas>
                            <div class="yejizhibiao-item">
                                <div>
                                    <p><span></span></p>
                                    <p>目标金额</p>
                                    <p>0.00元</p>
                                </div>
                                <div>
                                    <p><span></span></p>
                                    <p>合同金额</p>
                                    <p>0.00元</p>
                                </div>
                                <div>
                                    <p><span></span></p>
                                    <p>汇款金额</p>
                                    <p>0.00元</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="home-page-box">
            <el-row :gutter="30" class="height100">
                <el-col :span="18" class="height100">
                    <div class="ht-left">
                        <p class="tit perfectFont">客户简报</p>
                        <ul class="khjb">
                            <li v-for="(item, index) in newCast" :key="index">
                                <div>
                                    <img v-if="index === 0" src="../assets/img/home/img0.png" alt="">
                                    <img v-if="index === 1" src="../assets/img/home/img1.png" alt="">
                                    <img v-if="index === 2" src="../assets/img/home/img2.png" alt="">
                                    <img v-if="index === 3" src="../assets/img/home/img3.png" alt="">
                                    <img v-if="index === 4" src="../assets/img/home/img4.png" alt="">
                                    <span>{{item.name}}</span>
                                </div>
                                <p>{{item.num}}</p>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="6" class="height100"> 
                    <div class="ht-right"  style="background:#409efe;">
                        <div class="kehuloudou">
                            <p class="tit tit2 perfectFont">客户漏斗</p>
                            <el-select v-model="value" size="mini" class="w110" placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="shuying">
                            <p>赢单: 0.00元</p>
                            <p>输单: 0.00元</p>
                        </div>
                        <div class="myecharts-sale2" ref="myecharts2" ></div>
                        <div class="meiju">
                            <div>
                                <p><span></span>验证客户(1000)</p>
                                <p><span></span>需求分析(1000)</p>
                            </div>
                            <div>
                                <p><span></span>方案/报价(1000)</p>
                                <p><span></span>谈判审核(1000)</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import DonutChart from "../../node_modules/donut-chart";
export default {
  data() {
    return {
      newCast: [
        {
          name: "新建客户",
          num: 50,
        },
        {
          name: "新建联系人",
          num: 11,
        },
        {
          name: "新建商机",
          num: 467,
        },
        {
          name: "阶段变化的商机",
          num: 1,
        },
        {
          name: "新建合同",
          num: 39,
        },
      ],
      options: [
        {
          value: 0,
          label: "目标金额",
        },
        {
          value: 1,
          label: "合同金额",
        },
        {
          value: 2,
          label: "回款金额",
        },
      ],
      value: 0,
    };
  },
  mounted() {
    this.shoukuan();
    this.yeji();
    this.loudou();
  },
  methods: {
    // 收款趋势图表
    shoukuan() {
      let myChart = this.$echarts.init(this.$refs.myecharts);
      let dataAxis = [];
      let _this = this;
      let option = {
        grid: {
          left: "8%",
          right: "4%",
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: true,
            type: "cross",
            label: {
              backgroundColor: "#409efe",
            },
            lineStyle: {
              width: 4,
              color: "rgba(255,255,255,.1)",
            },
          },
          backgroundColor: "#409efe",
          confine: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#333333",
            padding: [10, 0, 0, 0],
          },
          data: [
            "2019-06",
            "2019-07",
            "2019-08",
            "2019-09",
            "2019-10",
            "2019-11",
            "2019-12",
          ],
        },
        yAxis: {
          type: "value",
          inverse: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#EEEEEE",
              type: "solid",
            },
          },
          nameTextStyle: {
            color: "#ffffff",
            fontSize: 18,
          },
          axisLabel: {
            color: "#969696",
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            symbolSize: 10,
            hoverAnimation: true,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              borderWidth: 5,
              color: "#409efe",
              shadowColor: "#409efe",
            },
            lineStyle: {
              color: "#409efe",
              width: 2,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(13, 36, 129, .5)" },
                  { offset: 0.8, color: "rgba(13, 36, 129, 0)" },
                ]),
              },
            },
          },
          {
            data: [60, 80, 888, 250, 455, 365, 454],
            type: "line",
            symbolSize: 10,
            hoverAnimation: true,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              borderWidth: 5,
              color: "#FFA475",
              shadowColor: "rgba(255, 164, 117, 1)",
            },
            lineStyle: {
              color: "#FFA475",
              width: 2,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(255, 164, 117, .5)" },
                  { offset: 0.8, color: "rgba(255, 164, 117, 0)" },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    // 业绩指标图表
    yeji() {
      var option = {
        type: "pie", // pie 环形图|| gauge 计量图
        title: {
          show: true,
          text: "总资产(元)",
          textStyle: {
            fontSize: "14px",
            lineHeight: "30px",
            color: "#9f9f9f",
          },
          subtext: "360",
          subtextStyle: {
            fontSize: "14px",
            lineHeight: "35px",
            color: "#e53344",
          },
          x: "50%", // title 位置
          y: "50%",
        },
        tooltip: {
          show: false,
          fontStyle: "normal", // 	规定字体样式 normal || italic || oblique
          fontVariant: "normal", // 规定字体变体 normal || small-caps
          fontWeight: "normal", // 规定字体的粗细 normal || bold || bolder || lighter || 100 || 200 || 300 || 400 || 500 || 600 || 700 || 800 || 900
          fontSize: "14px", // 规定字号，以像素计
          lineHeight: "30px", // 规定行高，以像素计
          fontFamily: "Arial", // 规定字体系列
          color: "white", // 字体颜色
          backgroundColor: "#00000099", // tip 背景
          formatter: function(param) {
            // 类似echarts 富文本编辑
            var str =
              "{a|" +
              param.name +
              "}" +
              "{c|" +
              param.percent +
              "}" +
              "\n" +
              "{b|" +
              param.value +
              "元}";
            return str;
          },
          rich: {
            a: {
              fontStyle: "normal",
              fontVariant: "normal",
              fontWeight: "bold",
              fontSize: "20px",
              lineHeight: "30px",
              fontFamily: "Arial",
              color: "white",
            },
            c: {
              fontStyle: "normal",
              fontVariant: "normal",
              fontWeight: "normal",
              fontSize: "20px",
              lineHeight: "30px",
              fontFamily: "Arial",
              color: "white",
            },
            b: {
              fontStyle: "normal",
              fontVariant: "normal",
              fontWeight: "bold",
              fontSize: "30px",
              lineHeight: "35px",
              fontFamily: "Arial",
              color: "#e53344",
            },
          },
        },
        x: "50%", // 图标位置
        y: "50%",
        radius: "30%", // 半径
        lineWidth: "15%", // 圆环宽度
        data: [
          {
            name: "目标金额",
            value: 110,
          },
          {
            name: "合同金额",
            value: 120,
          },
          {
            name: "汇款金额",
            value: 130,
          },
        ],

        // {{/if}}
        label: {
          show: true,
          fontStyle: "normal",
          fontVariant: "normal",
          fontWeight: "bold",
          fontSize: "14px",
          lineHeight: "30px",
          fontFamily: "Arial",
          color: "#9f9f9f",
          formatter: function(param) {
            var str =
              "{a|" +
              param.name +
              "}" +
              "{c|" +
              param.percent +
              "}" +
              "\n" +
              "{b|" +
              param.value +
              "元}";
            return str;
          },
          rich: {
            a: {
              fontStyle: "normal",
              fontVariant: "normal",
              fontWeight: "bold",
              fontSize: "14px",
              lineHeight: "30px",
              fontFamily: "Arial",
            },
            b: {
              fontStyle: "normal",
              fontVariant: "normal",
              fontWeight: "bold",
              fontSize: "14px",
              lineHeight: "35px",
              fontFamily: "Arial",
              color: "#e53344",
            },
            c: {
              fontStyle: "normal",
              fontVariant: "normal",
              fontWeight: "bold",
              fontSize: "14px",
              lineHeight: "30px",
              fontFamily: "Arial",
            },
          },
        },
        capType: "round", // 圆角 || butt 平角
        selectedStyle: {
          // 选中时的样式
          color: "white", // 包边颜色
          borderWidth: 10, // 包边宽度
        },
        color: ["#E8EAF7", "#596EC4", "#FFB690"],
        labelCoverTitle: true, // label 是否覆盖标题
        backgroundArc: "#999", // 空圆环的颜色
      };
      var cir = new DonutChart("myCanvas", option);
      cir.init(function(result) {
        // result 选中的选区的相关信息
      });
    },
    // 漏斗
    loudou() {
      let myChart = this.$echarts.init(this.$refs.myecharts2);
      let dataAxis = [];
      let _this = this;
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          show: false,
        },
        legend: {
          show: false,
          data: ["点击", "访问", "咨询", "订单"],
        },
        series: [
          {
            name: "漏斗图",
            type: "funnel",
            left: "10%",
            top: 60,
            //x2: 80,
            bottom: 60,
            width: "80%",
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside",
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              label: {
                fontSize: 20,
              },
            },
            data: [
              { value: 60, name: "访问" },
              { value: 40, name: "咨询" },
              { value: 20, name: "订单" },
              { value: 80, name: "点击" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
