<template>
  <view class="ComCss">
    <u-navbar class="navBarCss" title="数据统计" leftIconSize="0"
      :titleStyle="{'fontSize':'36rpx','color':'#333333','fontWeight':'700'}" safeAreaInsetTop placeholder />
    <view class="bigCardCss">
      <view class="titleCss">
        本财年报告已上报数
      </view>
      <view class="numCss">
        23300
      </view>
    </view>
    <view class="flexCss">
      <view class="cardCss">
        <view class="titleCss">
          待开发居民用户
        </view>
        <view class="numCss">
          23300
        </view>
      </view>
      <view class="cardCss">
        <view class="titleCss">
          待开发商业用户
        </view>
        <view class="numCss">
          23300
        </view>
      </view>
      <view class="cardCss">
        <view class="titleCss">
          待开发工业用户
        </view>
        <view class="numCss">
          23300
        </view>
      </view>
    </view>
    <view class="charCardCss">
      <view class="charTitleCss">
        本财年市场摸底分析
      </view>
      <view class="charbox">
        <echarts class="pie-chart" :option="pieOption" canvasId="pie1"></echarts>
      </view>
    </view>
    <view class="charCardCss">
      <view class="charTitleCss">
        待开发用户池数据分析
      </view>
      <view class="charbox">
        <echarts class="pie-chart" :option="pieOption2" canvasId="pie2"></echarts>
      </view>
    </view>
    <view class="charCardCss">
      <view class="charTitleCss">
        近4年待开发用户池数据情况
      </view>
      <view class="charbox">
        <echarts class="line-chart" :option="lineOption" canvasId="line"></echarts>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {
    },
    props: {

    },
    data() {
      return {
        pieOption: {},
        pieOption2: {},
        lineOption: {},

      }
    },
    mounted() {
      this.refreshData()
    },
    computed: {

    },
    onLoad() {},
    methods: {
      refreshData() {
        this.pieOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            // x:'right',
            y: 'center',
            right: 50,
            icon: 'circle',
            align: 'left'
          },
          series: [{
            name: '摸底分析',
            type: 'pie',
            right: 100,
            radius: ['65%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                lineHeight: 26,
                fontWeight: 'bold',
                formatter: '{b}\n{c}'
              }
            },
            labelLine: {
              show: true
            },
            data: [{
                value: 1048,
                name: '待申报'
              },
              {
                value: 735,
                name: '待评审'
              },
              {
                value: 580,
                name: '待修改'
              },
              {
                value: 484,
                name: '已通过'
              },
              {
                value: 300,
                name: '未创建'
              }
            ]
          }]
        };
        this.pieOption2 = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            // x:'right',
            y: 'center',
            right: 10,
            icon: 'circle',
            align: 'left'
          },
          series: [{
            name: '摸底分析',
            type: 'pie',
            right: 100,
            radius: ['65%', '80%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                lineHeight: 26,
                fontWeight: 'bold',
                formatter: '{b}\n{c}'
              }
            },
            labelLine: {
              show: true
            },
            data: [{
                value: 1048,
                name: '待开发居民用户'
              },
              {
                value: 735,
                name: '待开发商业用户'
              },
              {
                value: 580,
                name: '待开发工业用户'
              },
            ]
          }]
        };
        this.lineOption = {
          // title: {
          //   text: 'Stacked Line'
          // },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right:10,
            top:'10%',
            icon: 'roundRect',
            itemWidth: 10,
            itemHeight: 2,
            itemGap:20,
            data: ['民居用户', '商业用户', '工业用户']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['2020财年', '2021财年', '2021财年', '2023财年']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '民居用户',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '商业用户',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '工业用户',
              type: 'line',
              stack: 'Total',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
          ]
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .ComCss {
    background: #f2f4f3;
  }

  .bigCardCss {
    margin: 20rpx 20rpx 0rpx 20rpx;
    padding: 40rpx 25rpx;
    height: 177rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .cardCss {
    width: 220rpx;
    margin: 20rpx 0rpx;
    padding: 40rpx 25rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .titleCss {
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #45496a;
    text-align: left;
    line-height: normal;
    font-size: 24rpx;
  }

  .numCss {
    margin-top: 17rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #cf000d;
    text-align: left;
    line-height: normal;
    font-size: 34rpx;
  }

  .flexCss {
    display: flex;
    justify-content: space-around;
  }

  .charCardCss {
    margin: 0rpx 24rpx 20rpx 24rpx;
    height: 486rpx;
    padding: 16rpx 2rpx 2rpx 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .charTitleCss {
    height: 40rpx;
    margin: 32rpx 0rpx 0rpx 30rpx;
    background-color: rgba(255, 255, 255, 0);
    box-sizing: border-box;
    font-family: '苹方 中等', '苹方', sans-serif;
    color: #45496a;
    text-align: left;
    line-height: normal;
    font-size: 30rpx;
  }

  .charbox {
    width: 100%;
    height: 400rpx;
  }

  .charCss {}
</style>