效果预览
组件调用示例：
组件示例数据：
/** 饼图数据示例 */
private chartData = [
{value: 22600, name: '侦察', suffix: '2.26万次 (7.05%)'},
{value: 10400, name: '可疑', suffix: '1.04万次 (7.05%)'},
{value: 43200, name: '拒绝服务', suffix: '2.26万次 (7.05%)'},
{value: 5567, name: '恶意文件', suffix: '5567次 (7.05%)'},
{value: 6918, name: 'WEB攻击', suffix: '6918次 (7.05%)'},
{value: 6918, name: '远程控制', suffix: '2.26万次 (7.05%)'},
{value: 6918, name: '恶意利用', suffix: '2.26万次 (7.05%)'},
{value: 6918, name: 'APT攻击', suffix: '2.26万次 (7.05%)'},
{value: 6918, name: '自定义威胁', suffix: '5401次 (7.05%)'},
]
具体代码实现：
Template 代码
Script 代码
SCSS 代码
.col-block {
padding: 15px 25px;
border-radius: 15px;
overflow: hidden;
&--inner-padding {
padding: 15px 20px;
}
&.normal-gray-border {
border: 1px solid $gray-dash-border-color;
//box-shadow: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03);
}
&--card {
background-color: #fff;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
.text-hover {
cursor: pointer;
&:hover {
color: $blue-color;
}
}
}
&--no-padding {
padding: 0;
border-radius: 0;
}
&__title {
margin-bottom: 5px;
align-items: center;
font-size: 16px;
font-weight: bolder;
display: flex;
justify-content: space-between;
&--normal-font {
font-weight: normal;
}
}
&__content {
height: fit-content;
margin-bottom: 5px;
&--full {
height: calc(100% - 10px);
}
&--full-b20 {
height: calc(100% - 20px);
}
&--full-b30 {
height: calc(100% - 30px);
}
&--left {
float: left;
}
&--right {
float: right;
}
&--between {
display: flex;
justify-content: space-between;
}
&__text {
line-height: 55px;
width: calc(100% - 55px);
overflow: hidden;
height: 55px;
&__append-text {
margin-left: 5px;
}
}
&__icon {
height: 55px;
width: 55px;
&--align-center {
align-self: center;
}
}
}
&__content--pie-center {
height: 100%; position: relative;
.pie-center-title {
position: absolute; text-align: center; top: 20px; width: 100%; z-index: 99;
.big-font-count {
font-size: 18px;
font-weight: bold;
}
}
}
&__footer {
margin-top: 10px;
display: flex;
justify-content: space-between;
span {
&:first-child {
//margin-right: 15%;
}
display: inline-block;
}
}
}
总结：
至此，我们的组件编码就已经完成了，小伙伴们可以尝试着跑起来了。
本专栏会定期更新 Vue_ElementUI_Echarts_Typescript 有关的实例教程，希望感兴趣的小伙伴们多多关注~ 有问题在评论区留言吧~ 谢谢
好文推荐
发表评论