<template>
  <div>
    <div class="label">用户数量</div>
    <div style="height: 50%;width: 100%;padding: 2%;">
      <div id="usernum" class="d0"></div>
      <div class="d1">
        <div class="flex" style="height: 30%; text-align: center; padding-top: 5%;" v-for="item in model">
          <span class="f24">{{item.num}}</span>
          <span class="f12">{{item.name}}</span>
        </div>
      </div>
    </div>
    <div style="height: 49%; width: 100%;padding: 2%;">
      <div id="userdatatwo"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "user-number",
    data() {
      return {
        model: [
          {num: '38万', name: '现有总用户'},
          {num: '1.2万', name: '开发用户数'},
          {num: '35万', name: '潜在用户数'},
        ]
      }
    },
    methods: {
      setUserNum() {
        this.xc = this.$echarts.init(document.getElementById('usernum'))
        var visits = [100, 300, 400]   //本期占总的百分比*100
        var warnImg = "../../../../static/ManageHomePic/椭圆4.png"
        var grade = ['图片', '图片', '图片']
        var data = {
          grade: grade,
          visits: visits,
          totalCost: [1, 1, 1],
          cost: [0.7, 0.2, 0.65],
        }
        this.xc.setOption({
          title: {
            text: '',
            x: 'left',
            y: 'top',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          grid: {left: '12%', top: "12%", bottom: "5%", containLabel: true},
          xAxis: {
            show: false,
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              formatter: function (value) {
                //判断是否要显示预警
                return '{warnValue|}'
              },
              rich: {
                //这里的rich，下面有解释
                warnValue: {
                  //这里的warnValue对应上面的标签名
                  height: 20,
                  align: 'center',
                  backgroundColor: {
                    image: warnImg  	//这个warnImg是上面定义的图片var warnImg = "img/warn.png";
                  }
                }
              },
              margin: 10,
              show: true,
              color: '#15dce2',
              fontSize: 12
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: data.grade
          },
          series: [{
            type: 'bar',
            barGap: '-100%',
            label: {
              normal: {show: false}
            },
            barWidth: '20%',
            itemStyle: {
              normal: {
                borderColor: 'rgba(1,207,242,0.05)',
                borderWidth: 2,
                barBorderRadius: 15,
                color: '#003d4c',
              },
            },
            z: 1,
            data: data.totalCost,
            // data: da
          }, {
            type: 'bar',
            barGap: '-99%',
            barWidth: '20%',
            itemStyle: {
              normal: {
                barBorderRadius: 12,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#02ddff'
                  }, {
                    offset: 1,
                    color: '#00feff'
                  }]
                }
              },
            },
            max: 1,
            labelLine: {
              show: true,
            },
            z: 2,
            data: data.cost,
          }]
        })
      },
      setUserType() {
        this.xc = this.$echarts.init(document.getElementById('userdatatwo'))
        var echartData = [{
          value: 2154,
          name: '民用锅炉'
        }, {
          value: 3854,
          name: '非民用用户'
        }, {
          value: 3515,
          name: '民用用户'
        }]
        var rich = {
          yellow: {
            color: "#ffc72b",
            fontSize: 12 * scale,
            padding: [5, 4],
            align: 'center'
          },
          total: {
            color: "#ffc72b",
            fontSize: 12 * scale,
            align: 'center'
          },
          white: {
            color: "#fff",
            align: 'center',
            fontSize: 12 * scale,
            padding: [11, 0, 11, 0]
          },
          blue: {
            color: '#15dce2',
            fontSize: 12 * scale,
            align: 'center',
            padding: [10, 0]
          }
        }
        var scale = 0.8
        var total = 0; //用户总和
        echartData.forEach(function (value) {
          total += value.value;
        });
        this.xc.setOption({
          title: [
            {
              text: '总用户数',
              x: '42%',
              y: '30%',
              textStyle: {
                color: '#ffffff',
                fontSize: 12 * scale,
              }
            },
            {
              text: total,
              x: '38%',
              y: '33%',
              padding: [15, 20],
              textStyle: {
                color: '#00e2ea',
                fontSize: 12 * scale,

              }
            }],
          legend: {
            orient: 'vertical',
            icon: 'circle',
            x: '73%',
            bottom:'6%',
            itemWidth: 20 * scale,
            itemHeight: 10 * scale,
            textStyle: {
              fontSize: 12 * scale,
              padding: [0, 0, 0, 4],
              color: '#ffffff'
            },
            data: ['民用用户', '非民用用户', '民用锅炉']
          },
          series: [
            {
              name: 'Line 1',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['25%', '26%'],
              center: ['50%', '36%'],
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              tooltip: {
                trigger: 'axis'
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {
                    color: '#29b7ff',//未完成的圆环的颜色
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    }
                  }
                }
              }]
            },
            {
              name: '总用户数',
              type: 'pie',
              radius: ['30%', '45%'],
              center: ['50%', '36%'],
              hoverAnimation: false,
              color: ['#6fd9d0', '#ede61f', '#6d9bdc'],
              label: {
                normal: {
                  borderWidth: 20 * scale,
                  borderRadius: 4,
                  formatter: function (params, ticket, callback) {
                    var total = 0; //用户总数量
                    var percent = 0;
                    echartData.forEach(function (value, index, array) {
                      total += value.value;
                    });
                    percent = ((params.value / total) * 100).toFixed(1);
                    return '{blue|' + params.name + '}{blue|' + params.value + '}\n\n';
                  },
                  padding: [0, -102 * scale],
                  rich: rich,
                }
              },

              labelLine: {
                normal: {
                  length: 15 * scale,
                  length2: 100 * scale,
                  lineStyle: {
                    formatter: function (params, ticket, callback) {
                      var total = 0; //用户总数量
                      var percent = 0; //用户占比
                      echartData.forEach(function (value, index, array) {
                        total += value.value;
                      });
                      percent = ((params.value / total) * 100).toFixed(1);
                      return '{white|     ' + params.name + '}\n{hr|}\n{yellow|     ' + params.value + '}\n{blue|    ' + percent + '%}';
                    },
                  }
                }
              },
              data: echartData
            }, {
              name: 'Line 2',
              type: 'pie',
              animation: false,
              clockWise: false,
              radius: ['50%', '51%'],
              center: ['50%', '36%'],
              itemStyle: {
                normal: {label: {show: false}, labelLine: {show: false},}
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              data: [{
                value: 100,
                name: '02',
                itemStyle: {
                  normal: {color: '#29b7ff',label: {show: false},labelLine: {show: false}}
                }
              }]
            }]
        }, true)
      },
    },
    ready() {
      this.setUserNum()
      this.setUserType()
    }
  }
</script>

<style scoped>
  .label {
    margin-left: 1%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }
.d1{
  margin-top: 10%;
  width: 30%;
  height: 80%;
  float: right;
}
.d0{
  width: 70%;
  height: 100%;
  float: left;
}
  .f24 {
    font-size: 0.85em;
    color: #f3c832;
  }

  .f12 {
    font-size: 0.85em;
    color: #ffffff;
  }
</style>
