下载Echarts
npm install echarts
代码案例
<template>
<div id="jrgjbt" style="width: 100%;height: 100%;"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
getTj();
})
const getTj = () => {
let chartDom: any = document.getElementById("jrgjbt");
let myChart = echarts.init(chartDom);
let img = 'data:image/png;base64,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'
let data = [
{id:1,name:"网络扫描",value:88},
{id:2,name:"Drcode of an Rp",value:78},
{id:3,name:"Unsucessful",value:68},
{id:4,name:"网络扫描",value:66},
{id:5,name:"网络扫描",value:20},
];
let color2 = ['rgba(35, 255, 255,1)', 'rgba(255, 255, 212,1)', 'rgba(255, 156, 70,1)', 'rgba(255, 123, 252,1)', 'rgba(61, 122, 255,1)','rgba(252,34,90,1)','rgba(25,217,92,1)','rgba(122,36,209,1)','rgba(252,244,34,1)','rgba(137,252,34,1)'];
let color1 = ['rgba(35, 255, 255,.3)', 'rgba(255, 255, 212,.3)', 'rgba(255, 156, 70,.3)', 'rgba(255, 123, 252,.3)', 'rgba(61, 122, 255,.3)','rgba(252,34,90,.3)','rgba(25,217,92,.3)','rgba(122,36,209,.3)','rgba(252,244,34,.3)','rgba(137,252,34,.3)'];
let baseData1 = [];
let baseData2 = [];
for (var i = 0; i < data.length; i++) {
baseData1.push({
value: data[i].value,
name: data[i].name,
itemStyle: {
normal: {
color: color1[i],
}
}
}, {
value: 1,
itemStyle: {
normal: {
color: 'transparent',
borderColor: 'transparent',
}
}
});
}
for (var i = 0; i < data.length; i++) {
baseData2.push({
value: data[i].value,
name: data[i].name,
itemStyle: {
normal: {
color: color2[i],
}
}
}, {
value: 1,
itemStyle: {
normal: {
color: 'transparent',
borderColor: 'transparent',
}
}
});
}
let option = {
graphic: [
{
name: '今日攻击类型数量分布',
type: "image",
z: 3,
style: {
image: img,
width: 60,
height: 60,
shadowBlur: 0,
shadowColor: '#000',
},
left: 'center',
top: 'center',
},
{
type:'text',
left: "center",
top:"bottom",
style:{
text:'今日攻击类型数量分布',
fill:"#fff",
fontSize:"0.0729rem"
},
}
],
series: [{
itemStyle: {
normal: {
// color: '#2afeff',
color: {
type: 'linear', // 线性渐变
x: 0, // 渐变方向起点 x
y: 0, // 渐变方向起点 y
x2: 1, // 渐变方向终点 x
y2: 1, // 渐变方向终点 y
colorStops: [ // 渐变颜色数组
{
offset: 0, // 渐变位置 0 表示起点
color: '#24ffff' // 起点颜色
},
{
offset: 1, // 渐变位置 1 表示终点
color: '#ff9a46' // 终点颜色
}
],
global: false // 是否全局渐变
}
},
},
type: 'pie',
hoverAnimation: false,
radius: ['59%', '57%'],
center: ['50%', '50%'],
label: {
normal: {
show: false,
},
},
data: [
{
value: 1,
},
],
z: 10,
// data: baseData1
},{
type: 'pie',
hoverAnimation: false,
radius: ['58%', '12%'],
center: ['50%', '50%'],
tooltip: {
show: false
},
label: {
normal: {
show: false
}
},
data: baseData1
},
{
type: 'pie',
hoverAnimation: false,
color: color1,
radius: ['73%', '68%'],
center: ['50%', '50%'],
tooltip: {
show: false
},
label: {
show: false,
position: 'center'
},
data: baseData2
},
]
};
myChart.setOption(option);
}
</script>
<style>
</style>
