echarts 自定义legend，线性渐变

向右看齐 2021-09-20 01:16 1121阅读 0赞

先看效果图，业务要求：一次最多两个系列，去掉最开始的系列  
不管是用原生 jquery vue react基本思路都是 ：  
改变 series clear() 再setOption()  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]

html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
      <title>个人中心</title>
      <link rel="stylesheet" href="home0.css">
      <link rel="stylesheet" href="https://at.alicdn.com/t/font_1180049_a8az93esj55.css">
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
      <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    
    </head>
    
    <body>
      <script>
        function AutoRem() {
          var designWidth = 1920
          var curWidth = document.body.clientWidth;
          var htmlEl = document.getElementsByTagName('html')[0];
          htmlEl.style.fontSize = curWidth / designWidth * 625 + '%';
        }
        AutoRem()
        window.addEventListener('resize', function () {
          AutoRem()
        })
      </script>
      <div id="personCenter">
        <section id="leftNav">
          <div class="navItem  active">
            <a href="">
              <p class="L1">
                <i class="iconfont iconshouye-xuanzhong"></i>
                个人中心
              </p>
            </a>
          </div>
          <div class="navItem">
            <a href="">
              <p class="L1">
                <i class="iconfont  icongongsi"></i>
                企业信息
              </p>
            </a>
          </div>
          <div class="navItem">
            <a href="">
              <p class="L1">
                <i class="iconfont  icondingdan1"></i>
                我的订单
              </p>
            </a>
          </div>
          <div class="navItem">
            <a href="">
              <p class="L1">
                <i class="iconfont  iconshezhi"></i>
                安全设置
              </p>
            </a>
          </div>
        </section>
        <section id="centerContenr">
          <div class="box2 clearfix">
            <section class="left clearfix companyBox">
              <div class="left div1">
                <p class="p11 clearfix">
                  <span>xxxx有限公司</span>
                  <span class="mark">本月已报税</span>
                </p>
                <section class="p22 clearfix">
                  <span class="left">当前账期</span>
                  <select id="years" class="left"></select>
                  <div class="mouths_box left ">
                    <i class="iconfont iconjiantou_zuo left"></i>
                    <div class="mouths_wrap left">
                      <p id="mouths"></p>
                    </div>
                    <i class="iconfont iconjiantou_you left"></i>
                  </div>
                </section>
              </div>
            </section>
          </div>
          <div class="box3">
            <section>
              <div class="left i1">
                <i class="iconfont iconshouru"></i>
              </div>
              <div class="left">
                <p>营业收入</p>
                <p><span>￥</span><b>698,137.00</b></p>
              </div>
            </section>
            <section>
              <div class="left i2">
                <i class="iconfont iconzhichu3"></i>
              </div>
              <div class="left">
                <p>支出金额</p>
                <p><span>￥</span><b>698,137.00</b></p>
              </div>
            </section>
            <section>
              <div class="left i3">
                <i class="iconfont iconlirun1"></i>
              </div>
              <div class="left">
                <p>净利润</p>
                <p><span>￥</span><b>698,137.00</b></p>
              </div>
            </section>
            <section>
              <div class="left i4">
                <i class="iconfont iconshuiwu" style="font-size:0.32rem;"></i>
              </div>
              <div class="left">
                <p>纳税总额</p>
                <p><span>￥</span><b>698,137.00</b></p>
              </div>
            </section>
          </div>
          <div class="box4 clearfix">
            <section class="left linebox">
              <div class="lineHead clearfix">
                <img src="img/linekico.png" class="left">
                <b class="left">营业支出金额走势</b>
                <div class="checkGroup left">
                  <span class="item check" data-v="0">
                    <i class="iconfont icongou"></i>
                    <span>营业收入</span>
                  </span>
                  <span class="item check" data-v="1">
                    <i class="iconfont icongou"></i>
                    <span>支出金额</span>
                  </span>
                  <span class="item" data-v="2">
                    <i class="iconfont icongou"></i>
                    <span>净利润</span>
                  </span>
                  <span class="item" data-v="3">
                    <i class="iconfont icongou"></i>
                    <span>纳税总额</span>
                  </span>
                </div>
              </div>
              <div id="lineChart"></div>
            </section>
            <section class="right piebox">
              <div class="lineHead clearfix">
                <img src="img/linekico.png" class="left">
                <b class="left">应纳税金额</b>
              </div>
              <div class="fushuiLv">
                <span>综合负税率</span>
                <b>89.1%</b>
              </div>
              <div id="pieCharts"></div>
              <span class="allData">
                ￥<b>712</b>
              </span>
              <div class="dataDetail clearfix">
                <section class="left sec11">
                  <p class="dot1">20</p>
                  <p>增值税</p>
                </section>
                <section class="left sec22">
                  <p class="dot2">30</p>
                  <p>印花税</p>
                </section>
                <section class="left sec33">
                  <p class="dot3">40</p>
                  <p>城建税</p>
                </section>
                <section class="left sec44">
                  <p class="dot4">50</p>
                  <p>附加税</p>
                </section>
              </div>
            </section>
          </div>
        </section>
      </div>
      <script src="home0.js"></script>
    </body>
    
    </html>

$(function () {
    
    
    
      // 年份
      function createdYears (min, max) {
        var html = ''
        for (var i = min; i <= max; i++) {
          html += '<option value="' + i + '">' + i + '年</option>'
        }
        $('#years').html(html)
      }
      createdYears(2015, 2200);
    
      // 月份
      function createdMouths () {
        var html = ''
        for (var i = 1; i <= 12; i++) {
          html += '<span data-v="' + i + '">' + i + '月</span>'
        }
        $('#mouths').html(html)
      }
      createdMouths();
      // 切换月份
      $('.mouths_box .iconjiantou_zuo').on('click', function () {
        $('#mouths').removeClass('change')
      })
      $('.mouths_box .iconjiantou_you').on('click', function () {
        $('#mouths').addClass('change')
      })
    
      // 初始化年月
      function initDate () {
        var now = new Date()
        var nowYear = now.getFullYear()
        var nowMounth =  now.getMonth() + 1
        $("#years").val(nowYear);
        var mounthChecked_el = "#mouths span[data-v=" + nowMounth + "]"
        $(mounthChecked_el).addClass('checked')
        if (nowMounth > 6) {
          $('.mouths_box .iconjiantou_you').trigger('click')
        }
      }
      initDate()
    
    
      // 选择年份
      $("#years").on('change', function () {
        // 获取年份
        var y = $(this).val()
      })
      // 点击月份
      $('#mouths span').on('click', function () {
        $(this).addClass('checked').siblings('span').removeClass('checked')
        // 获取月份
        var m = $(this).attr('data-v')
      })
    
      // 折线图
      var myChart = echarts.init(document.getElementById('lineChart'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis:
        {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          minInterval: 1, //最小分割数
          axisLine: {                  //---坐标轴 轴线
            show: false,                  //---是否显示
          },
          axisTick: {                  //---坐标轴 刻度
            show: false,                  //---是否显示
          },
          axisLabel: {                 //---坐标轴 标签
            color: '#666',
            fontSize: 14,              //---默认取轴线的颜色
          },
        }
        ,
        yAxis:
        {
          type: 'value',
          minInterval: 1, //最小分割数
          axisLine: {                  //---坐标轴 轴线
            show: false,                  //---是否显示
            lineStyle: {
              color: '#F0F0F0',
            },
          },
          axisTick: {                  //---坐标轴 刻度
            show: false,                  //---是否显示
          },
          axisLabel: {                 //---坐标轴 标签
            color: '#666',
            fontSize: 14,              //---默认取轴线的颜色
          },
          splitLine: {// 方向分割线
            lineStyle: {
              color: "#F0F0F0"
            }
          }
        },
        series: [],
        color: []
      };
    
      // 四个系列
      var colorArr = ['#ff3838', '#4b9bff', '#ff8314', '#1cdb64']
      var seriesArr = [
        {
          name: '营收收入',
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#ff3838'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 94, 38, 0.3)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255, 94, 38, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: [120, 132, 101, 134, 90, 230, 210, 191, 234, 290, 330, 310, 120, 132, 101, 134,]
        },
        {
          name: '支出金额',
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#4b9bff'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(67, 93, 224, 0.3)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(67, 93, 224, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: [220, 100, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '净利润',
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#ff8314'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 174, 0, 0.3)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(255, 174, 0, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: [120, 230, 210, 191, 234, 290, 330, 310, 132, 101, 134, 90, 120, 132, 101, 134,]
        },
        {
          name: '纳税总额',
          type: 'line',
          lineStyle: {
            color: '#1cdb64'
          },
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(45, 221, 202, 0.3)' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(45, 221, 202, 0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: [290, 330, 310, 120, 132, 101, 134, 90, 230, 210, 220, 100, 191, 234]
        }
      ]
    
    
      // 选中的系列的索引
      var checkedItem = [0, 1]
      // 切换折线图
      $('.checkGroup .item').on('click', function () {
        // 当前系列的值-- 索引
        var v = parseInt($(this).attr('data-v'))
        var index = checkedItem.indexOf(v)
        // 已经存在
        if (index != -1) {
          checkedItem.splice(index, 1)
          $(this).removeClass('check')
        } else {
          $(this).addClass('check')
          checkedItem.push(v)
        }
        // 超过两个
        if (checkedItem.length > 2) {
          var i = checkedItem.shift()
          $('.checkGroup .item').eq(i).removeClass('check')
        }
        changLineChart()
      })
    
      // 重新渲染折线图
      function changLineChart () {
        option.series = checkedItem[1] === undefined ? [seriesArr[checkedItem[0]]] : [seriesArr[checkedItem[0]], seriesArr[checkedItem[1]]]
        option.color = checkedItem[1] === undefined ? [colorArr[checkedItem[0]]] : [colorArr[checkedItem[0]], colorArr[checkedItem[1]]]
        myChart.clear();
        myChart.setOption(option);
      }
    
      // 初始化折线图
      changLineChart()
    
    
    
      //饼图配置
      var pieOptions = {
        tooltip: {
          trigger: 'item',
        },
        calculable: true,
        series: [
          {
            type: 'pie',
            radius: [50, 90],
            center: ['50%', '52%'],
            roseType: 'radius',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              },
    
            },
            lableLine: {
              emphasis: {
                show: true
              },
              lineStyle: {
                width: 2
              }
            },
            data: [
              {
                value: 20, name: '增值税', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0983FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#9B19FF' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                value: 30, name: '印花税', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#FFC809' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#FF8A00' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                value: 40, name: '城建税', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#57FDFF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#14FF78' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                value: 50, name: '附加税', itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#6F9DFF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#225BDD' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
            ]
          }
        ]
      };
    
      //初始化直营pie
      var pieChart = echarts.init(document.getElementById('pieCharts'));
      pieChart.setOption(pieOptions)
    
    
    
    
    })

css

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div, section {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    * {
      box-sizing: border-box;
    }
    
    fieldset, img {
      border: none;
    }
    
    img {
      display: block;
    }
    
    address, caption, cite, code, dfn, th, var {
      font-style: normal;
      font-weight: normal;
    }
    
    ul, ol {
      list-style: none;
    }
    
    input {
      padding-top: 0;
      padding-bottom: 0;
    }
    
    button {
      border: none;
      outline: none;
    }
    
    input::-moz-focus-inner {
      border: none;
      padding: 0;
    }
    
    select, input {
      vertical-align: middle;
    }
    
    select, input, textarea {
      font-size: 12px;
      margin: 0;
    }
    
    input[type="text"], input[type="password"], textarea {
      border: none;
      outline-style: none;
      -webkit-appearance: none;
    }
    
    textarea {
      resize: none;
    }
    
    table {
      border-collapse: collapse;
    }
    
    body {
      color: #333;
      font-size: 16px;
      font-family: "PingFang SC";
      background: #fff;
      min-width: 1267px;
    }
    
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    
    .clearfix {
      zoom: 1;
    }
    
    .clearit {
      clear: both;
      height: 0;
      font-size: 0;
      overflow: hidden;
    }
    
    .left {
      float: left;
    }
    
    .right {
      float: right;
    }
    
    a {
      text-decoration: none;
    }
    
    #personCenter {
      min-height: 100vh;
      padding: 70px 30px 30px 250px;
      background: #F3F4F4;
    }
    #personCenter #centerContenr {
      width: 100%;
      background: #fff;
    }
    #personCenter #centerContenr .box1 {
      margin-bottom: 0.2rem;
    }
    #personCenter #centerContenr .box1 > section {
      width: 32%;
      height: 1.51rem;
      margin-right: 2%;
      background-size: 100% 100%;
      padding: 0.18rem  0.3rem 0 0.3rem;
    }
    #personCenter #centerContenr .box1 > section:last-child {
      margin-right: 0;
    }
    #personCenter #centerContenr .box1 > section .left {
      width: 2.6rem;
    }
    #personCenter #centerContenr .box1 > section .left p:nth-of-type(1) {
      font-size: 0.16rem;
      color: #333333;
    }
    #personCenter #centerContenr .box1 > section .left p:nth-of-type(2) {
      display: inline-block;
      padding: 0 0.1rem;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      font-size: 0.12rem;
      border-radius: 3px;
      margin-top: 0.25rem;
    }
    #personCenter #centerContenr .box1 > section .left .p1 {
      border: 1px solid #8f7dfb;
    }
    #personCenter #centerContenr .box1 > section .left .p1 a {
      color: #8f7dfb;
    }
    #personCenter #centerContenr .box1 > section .left .p2 {
      border: 1px solid #4590f6;
    }
    #personCenter #centerContenr .box1 > section .left .p2 a {
      color: #4590f6;
    }
    #personCenter #centerContenr .box1 > section .left .p3 {
      border: 1px solid #ff982d;
    }
    #personCenter #centerContenr .box1 > section .left .p3 a {
      color: #ff982d;
    }
    #personCenter #centerContenr .box1 > section img {
      width: 1.31rem;
      height: 1.11rem;
    }
    #personCenter #centerContenr .box1 .sec1 {
      background-image: url(img/bgx1.png);
    }
    #personCenter #centerContenr .box1 .sec2 {
      background-image: url(img/bgx2.png);
    }
    #personCenter #centerContenr .box1 .sec3 {
      background-image: url(img/bgx3.png);
    }
    #personCenter #centerContenr .box2 {
      padding: 0.3rem 0.46rem;
    }
    #personCenter #centerContenr .box2 .companyBox {
      width: 67%;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p11 {
      font-size: .28rem;
      font-weight: bold;
      color: #3f434c;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p11 span {
      float: left;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p11 .mark {
      font-size: .18rem;
      font-weight: 500;
      color: #6c4e0e;
      width: 1.3rem;
      height: 0.4rem;
      border-radius: 0.2rem;
      line-height: 0.4rem;
      text-align: center;
      background: url(img/linkbe1.png);
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 {
      height: 0.46rem;
      line-height: 0.46rem;
      margin-top: 0.33rem;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 > span {
      font-size: 0.18rem;
      font-weight: 500;
      color: #999999;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 select {
      width: 1.2rem;
      height: 0.46rem;
      background: #f1f4f7;
      border: 1px solid #ebeff5;
      box-shadow: 0px 0.06rem 0.27rem 0px rgba(197, 197, 197, 0.27);
      border-radius: 0.05rem;
      margin: 0 0.15rem;
      text-indent: 15px;
      font-size: 0.16rem;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 .mouths_box i {
      font-size: 7px;
      font-size: 0.07rem;
      color: #8D9BAB;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 .mouths_box .mouths_wrap {
      width: 4rem;
      height: 0.46rem;
      overflow: hidden;
      position: relative;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 .mouths_box #mouths {
      position: absolute;
      left: 0;
      top: 0;
      height: 0.46rem;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 .mouths_box #mouths.change {
      top: 0;
      left: -3.7rem;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 .mouths_box #mouths span {
      display: inline-block;
      width: 0.43rem;
      height: 0.43rem;
      text-align: center;
      border-radius: 50%;
      margin: 0 0.1rem;
      font-size: 0.16rem;
      cursor: pointer;
    }
    #personCenter #centerContenr .box2 .companyBox .div1 .p22 .mouths_box #mouths span.checked {
      background: #3586ff;
      color: white;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox {
      padding-top: 0.16rem;
      position: relative;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox:hover .phoneNum {
      display: block !important;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .kuijiInfo {
      padding-top: 0.16rem;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .kuijiInfo p {
      text-align: right;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .kuijiInfo p:nth-of-type(1) {
      font-size: 0.14rem;
      font-weight: 400;
      color: #84b0f2;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .kuijiInfo p:nth-of-type(2) {
      font-size: 0.16rem;
      font-weight: 400;
      color: #999999;
      margin-top: 0.12rem;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .kuijiInfo p:nth-of-type(2) span {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox img {
      width: 0.76rem;
      height: 0.76rem;
      border-radius: 50%;
      margin-left: 0.2rem;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .icondianhua3 {
      font-size: 0.2rem;
      color: #568AFF;
      position: absolute;
      right: 0;
      top: 0.66rem;
      background: white;
      border-radius: 50%;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .phoneNum {
      position: absolute;
      bottom: -0.4rem;
      right: 0;
      display: none;
      width: 2rem;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #3586ff;
      border-radius: 5px;
      color: white;
      font-size: 0.18rem;
      text-indent: 0.15rem;
    }
    #personCenter #centerContenr .box2 .companyBox .kuijibox .phoneNum .sanjiao {
      border: 0.1rem solid transparent;
      border-bottom: 0.1rem solid #3586ff;
      position: absolute;
      top: -0.18rem;
      right: 0.3rem;
    }
    #personCenter #centerContenr .box2 .app {
      width: 33%;
      background-image: url(img/breic.png);
      background-size: 100% 100%;
      padding: 0.12rem 0.3rem 0 0;
    }
    #personCenter #centerContenr .box2 .app .sao {
      width: 2.5rem;
      padding-top: 0.18rem;
    }
    #personCenter #centerContenr .box2 .app .sao p {
      text-align: right;
    }
    #personCenter #centerContenr .box2 .app .sao p:nth-of-type(1) {
      font-size: 16px;
      font-size: .16rem;
      font-family: PingFang-SC-Medium;
      font-weight: 500;
      color: #333333;
    }
    #personCenter #centerContenr .box2 .app .sao p:nth-of-type(2) {
      width: 1.5rem;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      border: 1px solid #ff982d;
      color: #ff982d;
      border-radius: 3px;
      font-size: 0.12rem;
      margin-left: 1rem;
      margin-top: 0.2rem;
    }
    #personCenter #centerContenr .box2 .app img {
      width: 1.2rem;
      margin-left: 0.27rem;
    }
    #personCenter #centerContenr .box3 {
      padding: 0 .46rem;
      display: flex;
      justify-content: space-between;
    }
    #personCenter #centerContenr .box3 section {
      width: 24%;
      height: 1.27rem;
      padding: 0.34rem;
      box-shadow: 0px 6px 32px 0px rgba(197, 197, 197, 0.27);
    }
    #personCenter #centerContenr .box3 section > div:nth-of-type(1) {
      width: 0.6rem;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      border-radius: 0.05rem;
      margin-right: 0.24rem;
    }
    #personCenter #centerContenr .box3 section > div:nth-of-type(1) i {
      font-size: 0.28rem;
      color: #fff;
    }
    #personCenter #centerContenr .box3 section > div:nth-of-type(2) p:nth-of-type(1) {
      font-size: 0.2rem;
      font-weight: 500;
      color: #666666;
    }
    #personCenter #centerContenr .box3 section > div:nth-of-type(2) p:nth-of-type(2) {
      margin-top: 0.02rem;
    }
    #personCenter #centerContenr .box3 section > div:nth-of-type(2) p:nth-of-type(2) span {
      font-size: 18px;
      font-size: 0.18rem;
      font-weight: 500;
      color: #878787;
    }
    #personCenter #centerContenr .box3 section > div:nth-of-type(2) p:nth-of-type(2) b {
      font-size: 30px;
      font-size: 0.3rem;
      font-family: AvantGarde-Demi;
      font-weight: 400;
      color: #333333;
    }
    #personCenter #centerContenr .box3 section .i1 {
      background: linear-gradient(-44deg, #ff5e26, #ff3838);
    }
    #personCenter #centerContenr .box3 section .i2 {
      background: linear-gradient(-44deg, #435de0, #4b9bff);
    }
    #personCenter #centerContenr .box3 section .i3 {
      background: linear-gradient(-44deg, #ffae00, #ff8314);
    }
    #personCenter #centerContenr .box3 section .i4 {
      background: linear-gradient(-44deg, #2dddca, #1cdb64);
    }
    #personCenter #centerContenr .box4 {
      margin-top: 0.5rem;
      padding: 0 0.46rem 0.5rem 0.46rem;
    }
    #personCenter #centerContenr .box4 .linebox {
      width: 67%;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead {
      height: 0.38rem;
      line-height: 0.38rem;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead img {
      height: 0.38rem;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead b {
      font-size: 0.2rem;
      color: #333333;
      margin: 0 0.6rem 0 0.3rem;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item {
      margin-right: 0.3rem;
      float: left;
      cursor: pointer;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item i {
      margin-top: 0.08rem;
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      text-align: center;
      font-size: 0.1rem;
      float: left;
      background: white;
      border: 1px solid #aeaeae;
      border-radius: 2px;
      margin-right: 0.1rem;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item i::before {
      display: none;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item span {
      float: left;
      font-size: 0.14rem;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item.check {
      color: #287EFF;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item.check i {
      border: 1px solid #287EFF;
      color: #287EFF;
    }
    #personCenter #centerContenr .box4 .linebox .lineHead .checkGroup .item.check i::before {
      display: block;
    }
    #personCenter #centerContenr .box4 .linebox #lineChart {
      height: 4.5rem;
    }
    #personCenter #centerContenr .box4 .piebox {
      width: 33%;
      position: relative;
    }
    #personCenter #centerContenr .box4 .piebox .lineHead {
      height: 0.38rem;
      line-height: 0.38rem;
    }
    #personCenter #centerContenr .box4 .piebox .lineHead img {
      height: 0.38rem;
    }
    #personCenter #centerContenr .box4 .piebox .lineHead b {
      font-size: 0.2rem;
      color: #333333;
      margin: 0 0.6rem 0 0.3rem;
    }
    #personCenter #centerContenr .box4 .piebox .fushuiLv {
      padding-left: 0.4rem;
    }
    #personCenter #centerContenr .box4 .piebox .fushuiLv span {
      font-size: .14rem;
      font-weight: 500;
      color: #666666;
    }
    #personCenter #centerContenr .box4 .piebox .fushuiLv b {
      font-size: .24rem;
      font-family: AvantGarde-Demi;
      font-weight: 400;
      color: #333333;
    }
    #personCenter #centerContenr .box4 .piebox #pieCharts {
      height: 2.8rem;
      margin-top: 0.5rem;
    }
    #personCenter #centerContenr .box4 .piebox .allData {
      position: absolute;
      top: 52%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.16rem;
      color: #666666;
    }
    #personCenter #centerContenr .box4 .piebox .allData b {
      font-size: 0.24rem;
      font-weight: 400;
      color: #333333;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail {
      padding-top: 0.36rem;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section {
      width: 25%;
      padding-left: 0.2rem;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section p:nth-of-type(1) {
      font-size: 0.18rem;
      font-weight: 500;
      color: #282828;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section p:nth-of-type(1)::before {
      content: '';
      display: inline-block;
      width: 0.10rem;
      height: 0.10rem;
      border-radius: 50%;
      margin: 0 0.05rem 0.01rem 0;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section p:nth-of-type(2) {
      font-size: 0.14rem;
      font-weight: 500;
      color: #999999;
      padding-left: 0.15rem;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section .dot1::before {
      background: #7B41ED;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section .dot2::before {
      background: #FFB44D;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section .dot3::before {
      background: #68FEBD;
    }
    #personCenter #centerContenr .box4 .piebox .dataDetail > section .dot4::before {
      background: #6F9DFF;
    }
    
    #leftNav {
      min-height: 100%;
      position: fixed;
      top: 60px;
      left: 0;
      width: 220px;
      background: white;
      padding-top: 24px;
    }
    #leftNav .navItem .L1 {
      height: 58px;
      line-height: 58px;
      font-size: 16px;
      color: #666666;
      padding-left: 40px;
      cursor: pointer;
    }
    #leftNav .navItem .L1 i {
      color: #568AFF;
      font-size: 18px;
      margin-right: 10px;
    }
    #leftNav .navItem.active .L1 {
      background: #4e88ff;
      color: #fff;
      border-left: 5px solid #225BDD;
      padding-left: 35px;
    }
    #leftNav .navItem.active .L1 i {
      color: #fff;
    }
    #leftNav .navItem .L2 {
      height: 40px;
      line-height: 40px;
      padding-left: 60px;
      font-size: 14px;
    }
    #leftNav .navItem .L2 a {
      color: #666666;
    }
    #leftNav .navItem .L2 a::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      background: #e2e2e2;
      border-radius: 50%;
      margin-right: 8px;
      margin-bottom: 3px;
    }
    
    /*# sourceMappingURL=home0.css.map */

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/eee7d450b4ff49a1b60fcdfc228d2f5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70 1]: /images/20210812/2a611e72e20d4473ad9131a6e3be3d27.png