echarts 自定义legend，线性渐变

先看效果图，业务要求：一次最多两个系列，去掉最开始的系列不管是用原生 jquery vue react基本思路都是：改变 series clear() 再setOption()html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta ...

秋刀鱼笛滋味

3850人浏览 · 2019-06-12 15:10:46

秋刀鱼笛滋味 · 2019-06-12 15:10:46 发布

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

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 */

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...