echarts 自定义legend,线性渐变
先看效果图,业务要求:一次最多两个系列,去掉最开始的系列不管是用原生 jquery vue react基本思路都是 :改变 series clear() 再setOption()html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta ...
·
先看效果图,业务要求:一次最多两个系列,去掉最开始的系列
不管是用原生 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>
js
$(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 */
更多推荐
已为社区贡献7条内容
所有评论(0)