- Label颜色。
- 下拉框样式。
- 标题字体大小。
<div class="card">
<div class="card-head">
<span style="margin: 0 20px;">隐患专业</span>
<select style="float: right;margin: 5px 10px;border: 1px solid #074290;background-color: #011643;color:#ccc;">
<option>全部</option>
<option>2017年</option>
<option>2018年</option>
<option>2019年</option>
<option>2020年</option>
</select>
</div>
<div class="card-body" id="main2" style="height:210px;"></div>
</div>
body{
background-color: #050c29;
padding: 30px;
}
.card{
margin: 20px;
width: 476px;
padding:1px;
background: linear-gradient(to left, #007bff, #007bff) left top no-repeat,
linear-gradient(to bottom, #007bff, #007bff) left top no-repeat,
linear-gradient(to left, #007bff, #007bff) right top no-repeat,
linear-gradient(to bottom, #007bff, #007bff) right top no-repeat,
linear-gradient(to left, #007bff, #007bff) left bottom no-repeat,
linear-gradient(to bottom, #007bff, #007bff) left bottom no-repeat,
linear-gradient(to left, #007bff, #007bff) right bottom no-repeat,
linear-gradient(to left, #007bff, #007bff) right bottom no-repeat;
background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
box-shadow: 0 1px 1px rgba(0 0 0 / 5%);
border-radius:5px;
border: 1px solid rgba(50, 105, 89, 0.17);
}
.card-head{
height: 30px;
width: 100%;
background-color: #011643;
line-height: 30px;
font-size: 14px;
color: #ccc;
}
.card-body{
width: 100%;
background-color: #04133a;
}
var myChart2 = echarts.init(document.getElementById('main2'));
var option2 = {
tooltip: {
trigger: 'item'
},
legend: {
show: false,
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold',
color: '#ccc'
}
},
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
color: '#ddd'
}
}
},
labelLine: {
show: true,
color: '#ccc'
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}
]
};
myChart2.setOption(option2);