<template>
  <a-card>


    <!-- table区域-begin -->

    <div>

      <h2 style='text-align:center;margin-top: 10px'>存量用户月收入及存量增量收入及分布明细</h2>
      <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">
        </a-table>

      </div>
      <!-- table区域 end -->
      <div style="width: 600px;height:20px;"></div>
<!--      <a-row>-->
<!--        <a-col :span="12"><div id="typeChart10" style="width: 600px;height:400px;"></div></a-col>-->
<!--        <a-col :span="12"><div id="typeChart11" style="width: 600px;height:400px;"></div></a-col>-->
<!--      </a-row>-->
      <a-row>
        <a-col :span="12"><div id="typeChart" style="width: 600px;height:400px;"></div></a-col>
        <a-col :span="12"><div id="typeChart2" style="width: 600px;height:400px;"></div></a-col>
       </a-row>
<!--      <a-row style='margin-top: 20px'>-->
<!--        <a-col :span="8"><div id="typeChart3" style="width: 400px;height:300px;"></div></a-col>-->
<!--        <a-col :span="8"><div id="typeChart4" style="width: 400px;height:300px;"></div></a-col>-->
<!--        <a-col :span="8"><div id="typeChart6" style="width: 400px;height:300px;"></div></a-col>-->
<!--      </a-row>-->
    </div>
  </a-card>
</template>

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



export default {
  name: 'TaskCheckList2',
  mixins:[JeecgListMixin],
  inject:['closeCurrent'],
  data () {
    return{
      dataSource:[
        {
          "id": "1712649352008179713",
          "dataId": "1712660980103651330",
          "dataLogId": "1712661582091132929",
          "taskId": "1712648713974849538",
          "customerNo": "200001817629",
          "customerName": null,
          "smsNumber": null,
          "userNo": "102010181195",
          "networkAccessTime": "2010-10-11",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "1月",
          "staffNo": "1000",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "孙可",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": null,
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 10:00:00",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "待稽核"
        },
        {
          "id": "1712649353086115842",
          "dataId": null,
          "dataLogId": null,
          "taskId": "1712648713974849538",
          "customerNo": "200002340549",
          "customerName": null,
          "smsNumber": null,
          "userNo": "102015510391",
          "networkAccessTime": "2012-02-14",
          "userState": "在用",
          "staffInfo": "毛捷(1004320610)(A00776)",
          "staffUsername": "A00776",
          "staffName": "4月",
          "staffNo": "2000",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "赵六",
          "staffDeptLevel3": "北区电信局(2800000000)",
          "staffDeptLevel3Name": "北区电信局",
          "staffDeptLevel3No": "2800000000",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": null,
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 10:00:00",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        },
        {
          "id": "1712649343284027393",
          "dataId": null,
          "dataLogId": null,
          "taskId": "17126487139748495f38",
          "customerNo": "104003061446",
          "customerName": null,
          "smsNumber": null,
          "userNo": "103032259676",
          "networkAccessTime": "2013-08-05",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "5月",
          "staffNo": "1500",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "王武",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": null,
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 09:59:58",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        },
        {
          "id": "1712649344286466049",
          "dataId": null,
          "dataLogId": null,
          "taskId": "1712648713974849538",
          "customerNo": "104003061446",
          "customerName": null,
          "smsNumber": null,
          "userNo": "103030828532",
          "networkAccessTime": "2013-04-03",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "5月",
          "staffNo": "2500",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "李四",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": null,
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 300,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 09:59:58",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        },
        {
          "id": "1712649345687363585",
          "dataId": null,
          "dataLogId": null,
          "taskId": "1712648713974849538",
          "customerNo": "104004941911",
          "customerName": null,
          "smsNumber": null,
          "userNo": "102016844914",
          "networkAccessTime": "2012-06-01",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "5月",
          "staffNo": "3000",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "张三",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": null,
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 09:59:58",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        }
      ],


      columns: [

        // {
        //   title:'客户名称',
        //   align:"left",
        //   sorter: true,
        //   dataIndex: 'customerName',
        //   scopedSlots: { customRender: 'customerName' }
        // },
        {
          title:'客户编号',
          align:"center",
          sorter: true,
          dataIndex: 'customerNo'
        },
        // {
        //   title:'服务号码（全）',
        //   align:"center",
        //   dataIndex: 'smsNumber'
        // },
        {
          title:'用户编号',
          align:"center",
          dataIndex: 'userNo'
        },
        {
          title:'入网时间',
          align:"center",
          sorter: true,
          dataIndex: 'networkAccessTime'
        },
        {
          title: '用户姓名',
          align: "center",
          dataIndex: 'staffDeptLevel2No'
        },
        {
          title:'统计时间',
          align:"center",
          dataIndex: 'staffName'
        },

        {
          title:'存量月收入',
          align:"center",
          sorter: true,
          dataIndex: 'staffNo'
        },
        {
          title:'存量增量月收入',
          align:"center",
          sorter: true,
          dataIndex: 'checkState',

        },
        {
          title: '员工二级部门',
          align: "center",
          dataIndex: 'staffDeptLevel2Name'
        },

        {
          title: '员工三级部门',
          align: "center",
          dataIndex: 'staffDeptLevel3Name'
        },

      ],
    }

  },
  methods: {
    typeChart() {
      var myChart = echarts.init(document.getElementById('typeChart'));

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

          data: ['月份1', '月份2', '月份3', '月份4']
        },
        yAxis: {
          top: "20%",
          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:" 0%",//与上方的距离 可百分比% 可像素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);
    // },
    // typeChart4() {
    //   var myChart = echarts.init(document.getElementById('typeChart4'));
    //
    //   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',
    //       min: 0,
    //       max: 1,
    //     },
    //     series: [
    //
    //       {
    //         name: '续约率',
    //         type: 'line',
    //         data: [0.8,0.5,0.3,0,7]
    //       },
    //       {
    //         name: '加约率',
    //         type: 'line',
    //         data: [0.5,0.3,0.5,0,7]
    //       }
    //     ]
    //   };
    //
    //   myChart.setOption(option);
    // },
    // typeChart5(){
    //   var myChart = echarts.init(document.getElementById('typeChart5'));
    //
    //   var option = {
    //     title: {
    //       text: '每月4G迁转5G套餐用户数和ARPU值统计',
    //       left: 'center'
    //     },
    //     tooltip: {},
    //     legend: {
    //       top:" 15%",//与上方的距离 可百分比% 可像素px
    //       data: [
    //         '4G 迁转 5G 套餐用户数',
    //         '5G 终端机套匹配用户数',
    //       ]
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     xAxis: {
    //       type: 'category',
    //
    //       data: ['月份1', '月份2', '月份3', '月份4']
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [
    //       {
    //         name: '4G 迁转 5G 套餐用户数',
    //         type: 'bar',
    //         data: [120, 132, 101, 134],
    //         itemStyle: {
    //           normal: {
    //             //这里是颜色
    //             color: function(params) {
    //               //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
    //               var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
    //               return colorList[params.dataIndex]
    //             }
    //           }
    //         }
    //       },
    //
    //       {
    //         name: '5G 终端机套匹配用户数',
    //         type: 'bar',
    //         data: [80, 90, 70, 100],
    //         itemStyle: {
    //           normal: {
    //             //这里是颜色
    //             color: function(params) {
    //               //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
    //               var colorList = ['#FFA100','#BBFFAA', '#ffc0cb','#00A3E0', '#CCCCCC', '#749f83', '#ca8622'];
    //               return colorList[params.dataIndex]
    //             }
    //           }
    //         }
    //       }
    //     ]
    //   };
    //
    //   myChart.setOption(option);
    // },
    // typeChart6(){
    //   var myChart = echarts.init(document.getElementById('typeChart6'));
    //
    //   var option = {
    //     title: {
    //       text: '每月4G迁转5G套餐用户数和ARPU值变化',
    //       left: 'center'
    //     },
    //     tooltip: {},
    //     legend: {
    //       top:" 15%",//与上方的距离 可百分比% 可像素px
    //       data: [
    //
    //         '政企升级 ARPU 值变化',
    //         '公众升级 ARPU 值变化',
    //
    //         '5G 渗透率'
    //       ]
    //     },
    //     grid: {
    //       left: '3%',
    //       right: '4%',
    //       bottom: '3%',
    //       containLabel: true
    //     },
    //     xAxis: {
    //       type: 'category',
    //       boundaryGap: false,
    //       data: ['月份1', '月份2', '月份3', '月份4']
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [
    //
    //       {
    //         name: '政企升级 ARPU 值变化',
    //         type: 'line',
    //         data: [0.5, 0.6, 0.4, 0.7]
    //       },
    //       {
    //         name: '公众升级 ARPU 值变化',
    //         type: 'line',
    //         data: [0.3, 0.4, 0.2, 0.5]
    //       },
    //       {
    //         name: '5G 渗透率',
    //         type: 'line',
    //         data: [0.2, 0.3, 0.1, 0.4]
    //       }
    //     ]
    //   };
    //
    //   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: {
      //     ['政企直销单位户', '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],
          source: [
            ['单位', '4月', '5月', '6月', '7月', '8月', '9月'],
            ['政企直销单位户', 46.5, 62.1, 48.7, 40.1, 33.4, 65.1],
            ['流失用户', 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}: {@4月} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '4月',
              tooltip: '4月'
            }
          }
        ]
      };
      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);
    },
    typeChart11(){
      var myChart = echarts.init(document.getElementById('typeChart11'));
      var  option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      myChart.setOption(option);
    },

  },

  mounted() {
  //  this.typeChart13();
    this.typeChart();
    this.typeChart2();
  //   this.typeChart3();
  //   this.typeChart4();
  //   this.typeChart5();
  //   this.typeChart6();
  // //   this.typeChart7();
  // //   this.typeChart8();
  // //   this.typeChart9();
  //   this.typeChart10();
  //    this.typeChart11();
    // this.typeChart12();

  }
};
</script>