tnc-fe/src/components/layouts/stock/AuditTable.vue

<template>
  <a-card>
   <div>

      <h2 style='text-align:center;margin : 0px'>稽核人员工作量统计列表</h2>
     <a-row>
       <a-card>
       <a-col :span="12"><div id="typeChart6" style="width: 600px;height:10px;"></div></a-col>
       <a-col :span="24"><div id="typeChart5" style="width: 1200px;height:600px;"></div></a-col>
       </a-card>
       <a-card>
       <h2 style='text-align:center;margin : 30px'>稽核人员稽核数量排名</h2>
       <a-col :span="24"><div id="typeCharts" style="width: 1200px;height:700px;"></div></a-col>
       </a-card>
     </a-row>

     <div style='height: 30px'></div>
     <h2 style='text-align:center'>稽核人员稽核明细</h2>
     <a-col  >
       <div class="table-page-search-wrapper">
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="客户编号">
                 <j-input placeholder="请输入客户编号" v-model="queryParam.customerNo"  ></j-input>
               </a-form-item>
             </a-col>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="用户编号">
                 <j-input placeholder="用户编号"  v-model="queryParam.userNo"  ></j-input>
               </a-form-item>
             </a-col>



             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="稽核类型">
                 <j-dict-select-tag placeholder="请选择稽核类型"  v-model="queryParam.type"  dictCode="sms_check_task_type" />
               </a-form-item>
             </a-col>

             <div class="table-operator" style='float: right'>
               <!-- 高级查询区域 -->
               <a-dropdown v-if="selectedRowKeys.length > 0">
                 <a-menu slot="overlay">
                   <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
                 </a-menu>
                 <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
               </a-dropdown>
                  <a-button type="primary" @click="searchQuery()" icon="search" >查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>


             </div>
             <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"></span>
             </a-col>
           </a-row>
         </a-form>
       </div>
     </a-col>


      <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">

          <template v-slot:checkState="status">
            <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
          </template>
          <template v-slot:checkType="text">
            <a-badge  :text="text | checkType "/>
          </template>
          <template v-slot:rowIndex="text,records,index">
            {{ (ipagination.current - 1) * ipagination.pageSize + Number(index)+1 }}
          </template>
        </a-table>
      </div>
      <!-- table区域 end -->
      <div style="width: 600px;height:5px;"></div>

   </div>
  </a-card>
</template>

<script>
import * as echarts from 'echarts'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@api/manage'



export default {
  name: 'TaskCheckList',
  mixins:[JeecgListMixin],
  inject:['closeCurrent'],
  data () {
    return{
      url: {
        queryTask: "/smsCheck/task/queryById",
        list: "/smsCheck/customerInfo/warningPageList",
        infoListTop: "/smsCheck/customerInfo/infoListTop",
        infoListTopTable: "/smsCheck/customerInfo/infoListTopTable",
      },
      dataSource:[

      ],
      topList:[],
     shortMap :[],
      lotMap :[],
      truckMap:[],
      speMap :[],
      dep:[],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          scopedSlots: { customRender: 'rowIndex' }
        },
        {
          title:'稽核类型',
          align:"center",
          sorter: true,
          dataIndex: 'type',
          customRender: function (text) {
            //客户信息所属类型：1:行短稽核 2：物联网业务稽核 3.复开审批 4.中继线稽核
            if (text == '1') {
              return "行短稽核";
            } else if (text == "2") {
              return "物联网业务稽核";
            }  else if (text == "3") {
              return "复开审批";
            }  else if (text == "4") {
              return "中继线稽核";
            }
          }
        },
        {
          title:'客户编号',
          align:"center",
          sorter: true,
          dataIndex: 'customerNo'
        },
        {
          title:'用户编号',
          align:"center",
          dataIndex: 'userNo'
        },
        {
          title:'入网时间',
          align:"center",
          sorter: true,
          dataIndex: 'networkAccessTime'
        },
        {
          title:'员工姓名',
          align:"center",
          dataIndex: 'staffName'
        },
        {
          title:'员工编号',
          align:"center",
          sorter: true,
          dataIndex: 'staffNo'
        },
        {
          title: '员工二级部门',
          align: "center",
          dataIndex: 'staffDeptLevel2Name'
        },
        {
          title: '员工三级部门',
          align: "center",
          dataIndex: 'staffDeptLevel3Name'
        },
        {
          //0：未处理；1：未完善；2：待稽核；4：待整改；5：稽核通过；）
          title:'预警稽核进度',
          align:"center",
          sorter: true,
          dataIndex: 'warningState',
          scopedSlots: { customRender: 'checkState' }
        }
      ],
    }

  },
  created() {
    // this.selectListCount()
    // this.selectList();
    this.loadData(1)
    this.selectCountTop();
    this.infoListTopTable();
  },
  filters: {

    statusTypeFilter(type) {
      const statusTypeMap = {
        '0': 'error',
        '1': 'purple',
        '2': 'warning',
        '3': 'warning',
        '4': 'processing',
        '5': 'success'
      }
      return statusTypeMap[type]
    },
    checkType(text) {
      const statusMap = {
        '0': '未处理',
        '1': '未完善',
        '2': '待稽核',
        '3': '待稽核',
        '4': '待整改',
        '5': '通过'
      }
      return statusMap[text]
    },
    statusFilter(status) {
      const statusMap = {
        '0': '未处理',
        '1': '未完善',
        '2': '待稽核',
        '3': '待稽核',
        '4': '待整改',
        '5': '通过'
      }
      return statusMap[status]
    }
  },
  methods: {
    typeChart() {
      var myChart = echarts.init(document.getElementById('typeChart'));

      var option = {
        title: {
          text: '多个指标分析',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top:" 15%",//与上方的距离 可百分比% 可像素p
          bottom: '100%',
          data: [
            '当月存量用户月均ARPU',
            '流失用户分析'
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',

          data: ['月份1', '月份2', '月份3', '月份4']
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '当月存量用户月均ARPU',
            type: 'bar',
            data: [30, 40, 50, 60]
          },

          {
            name: '流失用户分析',
            type: 'bar',
            data: [20, 30, 40, 50]
          }
        ]
      };

      myChart.setOption(option);
    },
    typeChart2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('typeChart2'));
      var option = {
        title: {
          subtext: '',
          left: 'center',
          text: '指标保有率分析',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '10%',
          top:" 15%",//与上方的距离 可百分比% 可像素px
          data: [

            '存量收入月均保有率(全量)',
            '存量收入月均保有率(政企)',
            '存量收入月均保有率(公众)',
            '政企/公众用户保有率',
            '政企直销单位户保有率',
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',

          data: ['指标1', '指标2', '指标3', '指标4']
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '存量收入月均保有率(全量)',
            type: 'line',

            data: [0.8, 0.7, 0.6, 0.9]
          },
          {
            name: '存量收入月均保有率(政企)',
            type: 'line',

            data: [0.6, 0.5, 0.7, 0.8]
          },
          {
            name: '存量收入月均保有率(公众)',
            type: 'line',

            data: [0.7, 0.8, 0.6, 0.9]
          },

          {
            name: '存量用户保有率',
            type: 'line',

            data: [0.9, 0.8, 0.7, 0.6]
          },
          {
            name: '政企/公众用户保有率',
            type: 'line',

            data: [0.7, 0.8, 0.6, 0.9]
          },
          {
            name: '政企直销单位户保有率',
            type: 'line',

            data: [0.5, 0.6, 0.4, 0.7]
          }
        ]
      };

      myChart.setOption(option);

    },
    typeChart3() {
      var myChart = echarts.init(document.getElementById('typeChart3'));

      var option = {
        title: {
          text: '续约加约情况',
          left: 'center'
        },
        tooltip: {},
        legend: {
          top:" 15%",//与上方的距离 可百分比% 可像素px
          data: ['合约用户续约数',  '无合约用户加约数' ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',

          data: ['1季度','2季度','3季度','4季度']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '合约用户续约数',
            type: 'bar',
            stack: '续约加约',
            data: [120,190,140,150],
            itemStyle: {
              normal: {
                //这里是颜色
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#FFA100','#BBFFAA', '#ffc0cb','#00A3E0', '#CCCCCC', '#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
                }
              }
            }
          },

          {
            name: '无合约用户加约数',
            type: 'bar',
            stack: '续约加约',
            data: [220,100,300,200],
            itemStyle: {
              normal: {
                //这里是颜色
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [ '#CCCCCC','#749f83',  '#FFA100','#BBFFAA', '#ffc0cb','#00A3E0','#ca8622'];
                  return colorList[params.dataIndex]
                }
              }
            }
          },

        ]
      };

      myChart.setOption(option);
    },
    typeCharts(){
      var nameList=[];
      var shortList=[];
      var lotList=[];
      var truckList=[];
      var specialList=[];
      for (var k in this.topList) {
        nameList.push(this.topList[k].staffNo)
        shortList.push(this.topList[k].shortCount)
        lotList.push(this.topList[k].lotCount)
        truckList.push(this.topList[k].truckCount)
        specialList.push(this.topList[k].specialCount)
      }

      var myChart = echarts.init(document.getElementById('typeCharts'));
       var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: nameList
        },
        series: [
          {
            name: '行短稽核数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: shortList
          },
          {
            name: '物联网稽核数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: lotList
          },
          {
            name: '中继线稽核数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: truckList
          },
          {
            name: '特审复开数量',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: specialList
          }
        ]
      };
      myChart.setOption(option);
    },
    typeChart5(){

      var myChart = echarts.init(document.getElementById('typeChart5'));
      var dataMap = {};


        var depName =this.dep;
        var  shortMap =this.shortMap;
        var  lotMap =this.lotMap;
        var   truckMap=this.truckMap;
        var   speMap =this.speMap;
      function dataFormatter(obj) {
        debugger
        // prettier-ignore
        var pList = depName;
        var temp;
        for (var year = 1; year <= 1; year++) {
          var max = 0;
          var sum = 0;
          temp = obj[year];
          for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i]);
            sum += temp[i];
            obj[year][i] = {
              name: pList[i],
              value: temp[i]
            };
          }
          obj[year + 'max'] =  Math.floor(max / 100) * 100;
          obj[year + 'sum'] =  sum/100;
        }
        return obj;
      }
      dataMap.dataShort = dataFormatter({
        //max : 60000,
        1: shortMap,

              });
// prettier-ignore
      dataMap.dataLot = dataFormatter({
        //max : 4000,
        1: lotMap});
// prettier-ignore
      dataMap.dataTruck = dataFormatter({
        //max : 26600,
        1: truckMap});
// prettier-ignore
      dataMap.dataSpe = dataFormatter({
        //max : 25000,
        1: speMap
             });
// prettier-ignore

      var option = {
        baseOption: {
          timeline: {
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: [


              {
                value: '稽核量统计图',
                tooltip: {
                  formatter: function (params) {
                    return params.name + ' 达到又一个高度';
                  }
                },
                symbol: 'diamond',
                symbolSize: 18
              }
            ],
            label: {
              formatter: function (s) {
                return  s;
              }
            }
          },
          title: {
            subtext: ' '
          },
          tooltip: {},
          legend: {
            left: 'right',
            data: ['行短稽核', '物联网稽核', '中继线稽核', '特审复开' ],
          },
          calculable: true,
          grid: {
            top: 80,
            bottom: 100,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value.replace('\n', '');
                  }
                }
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              data: depName,
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量（个）'
            }
          ],
          series: [

            { name: '特审复开', type: 'bar' },
            { name: '行短稽核', type: 'bar' },
            { name: '物联网稽核', type: 'bar' },
            { name: '中继线稽核', type: 'bar' },

          ]
        },
        options: [

          {
            title: { text: '稽核人员工作量统计列表' },
            series: [
              { data: dataMap.dataSpe['1'] },
              { data: dataMap.dataShort['1'] },
              { data: dataMap.dataLot['1'] },
              { data: dataMap.dataTruck['1'] },


            ]
          },

        ]
      };

      myChart.setOption(option);
    },
    typeChart7(){
      var myChart = echarts.init(document.getElementById('typeChart7'));

      var option = {
        title: {
          text: '专项存量维系数据分析',
          left: 'center'
        },
        tooltip: {},
        legend: {
          y: 'bottom',
          top:" 15%",//与上方的距离 可百分比% 可像素px
          data: [
            '翼企行动用户维系(单位户)',
            '翼企行动用户维系(个人户)',
            '每月存量客户拉新数量',
            '移动三零用户数',
            '低零流量用户数'
          ],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['北区整体', '分部门1', '分部门2']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '翼企行动用户维系(单位户)',
            type: 'bar',
            stack: '翼企行动',
            data: [120, 132, 101]
          },
          {
            name: '翼企行动用户维系(个人户)',
            type: 'bar',
            stack: '翼企行动',
            data: [80, 90, 70]
          },


          {
            name: '每月存量客户拉新数量',
            type: 'bar',
            data: [50, 60, 40]
          },
          {
            name: '移动三零用户数',
            type: 'bar',
            stack: '移动三零',
            data: [20, 25, 15]
          },

          {
            name: '低零流量用户数',
            type: 'bar',
            stack: '低零流量',
            data: [30, 35, 25]
          }
        ]
      };

      myChart.setOption(option);
    },
    typeChart8(){
      var myChart = echarts.init(document.getElementById('typeChart8'));

      var option = {
        title: {
          text: '专项存量维系数据分析',
          left: 'center'
        },
        tooltip: {},
        legend: {
          top:" 15%",//与上方的距离 可百分比% 可像素px
          data: [

            '客户保有率',
            '客户流失率',

          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['北区整体', '分部门1', '分部门2']
        },
        yAxis: {
          type: 'value'
        },
        series: [

          {
            name: '客户保有率',
            type: 'line',
            data: [0.8, 0.7, 0.6]
          },
          {
            name: '客户流失率',
            type: 'line',

            data: [0.2, 0.3, 0.4]
          },

          {
            name: '移动三零用户占比',
            type: 'line',
            stack: '移动三零',

            data: [0.1, 0.15, 0.1]
          },

          {
            name: '低零流量用户占比',
            type: 'line',
            stack: '低零流量',

            data: [0.2, 0.25, 0.2]
          }
        ]
      };

      myChart.setOption(option);
    },
    typeChart9(){
      var myChart = echarts.init(document.getElementById('typeChart9'));

      var option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '低零流量客户' },
              { value: 38, name: '移动三零客户' },
              { value: 32, name: '存量客户拉新数量' }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    typeChart10(){
      var myChart = echarts.init(document.getElementById('typeChart10'));
      var option = {
        title: {
          text: '多个指标分析',
          left: 'center'
        },
        legend: {  top:"45%" },
        tooltip: {

          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['政企直销单位户', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['流失用户', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['攻企/公众用户', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['存量用户', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['当月存量用户月均ARPU', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ['存量收入月均保有率(全量/政企/公众)', 42.1, 62.2, 46.5, 36.4, 45.2, 32.5],
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      };
      myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      myChart.setOption(option);
    },
    selectList() {
      this.loading = true;
      let params = {
        customerNo: this.queryParam.customerNo,
        userNo: this.queryParam.userNo,
        checkState:this.currentCheckState,
        staffNo: this.queryParam.staffNo,
        type: this.queryParam.type
      }
      getAction(this.url.lists, params).then((res) => {
        if (res.success) {
          if (!res.result){
            this.dataSource = []
          }else {
            this.dataSource = res.result.records ;
          }
          if(res.result && res.result.total) {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },

    infoListTopTable() {
      this.loading = true;
      getAction(this.url.infoListTopTable).then((res) => {
        if (res.success) {
          this.shortMap =res.result.short
          this.lotMap=res.result.lot
            this.truckMap=res.result.truck
            this.speMap =res.result.spe
            this.dep =res.result.name

          this.shortMapCount=res.result.shortCount
          this.lotMapCount=res.result.lotCount
          this.truckMapCount=res.result.truckCount
          this.speMapCount=res.result.speCount

          debugger
          this.typeChart5()

        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    selectCountTop() {
      this.loading = true;
      getAction(this.url.infoListTop).then((res) => {
        if (res.success) {
          if (!res.resultList){
            this.topList = []
          }else {

            this.topList = res.resultList ;
            this.typeCharts()
          }

        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    selectListCount() {

      getAction(this.url.infoListTop).then((res) => {
        if (res.success) {
          if (!res.result){
            this.dataSource = []
          }else {
            this.dataSource = res.result.records ;
          }
          if(res.result && res.result.total) {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    typeChart11(){
      var myChart = echarts.init(document.getElementById('typeChart11'));
      var option = {
        title: {
          text: '续约加约分析',
          left: 'center'
        },
        legend: {  top:"45%" },
        tooltip: {

          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['季度', '第一季度', '第二季度', '第三季度', '第四季度' ],
            ['无合约用户续约数', 60.5, 82.1, 54.7, 70.1 ],
            ['合约用户续约数', 56.5, 70.1, 88.7, 78.1 ]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      };
      myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      myChart.setOption(option);
    },
    typeChart12(){
      var myChart = echarts.init(document.getElementById('typeChart12'));
      var option = {
        title: {
          text: '每月4G迁转5G套餐用户数和ARPU值统计',
          left: 'center'
        },
        legend: {  top:"45%" },
        tooltip: {

          trigger: 'axis',
          showContent: false
        },
        dataset: {
          source: [
            ['4G 迁转 5G 套餐用户数', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['政企升级 ARPU 值变化', 26.5, 52.1, 48.7, 30.1, 53.4, 65.1],
            ['公众升级 ARPU 值变化', 41.1, 55.4, 55.1, 63.3, 43.8, 58.7],
            ['5G 终端机套匹配用户数', 80.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['5G渗透率', 25.2, 37.1, 41.2, 48, 33.9, 49.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2012',
              tooltip: '2012'
            }
          }
        ]
      };
      myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      myChart.setOption(option);
    },


  },

  mounted() {


  }
};
</script>