173 lines
4.2 KiB
Vue
173 lines
4.2 KiB
Vue
<template>
|
||
<div>
|
||
<Echart
|
||
:options="options"
|
||
id="centreRight2Chart1"
|
||
height="241px"
|
||
width="460px"
|
||
></Echart>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Echart from "@/common/echart";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
options: {},
|
||
seriesData: [80, 80, 97, 53, 95, 26, 72],
|
||
barLinearColors: [
|
||
new this.$echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#00a0ff", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0f4eac", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#47ddf5" },
|
||
{ offset: 1, color: "#21879b" },
|
||
]),
|
||
],
|
||
};
|
||
},
|
||
components: {
|
||
Echart,
|
||
},
|
||
props: {
|
||
cdata: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
},
|
||
methods: {
|
||
rankBarColor(cData) {
|
||
let tempData = [];
|
||
cData.forEach((item, index) => {
|
||
tempData.push({
|
||
value: item,
|
||
itemStyle: {
|
||
normal: {
|
||
color:
|
||
index % 2 == 0
|
||
? this.barLinearColors[0]
|
||
: this.barLinearColors[1],
|
||
// shadowColor: "rgba(0,160,221,1)",
|
||
// shadowBlur: 4,
|
||
barBorderRadius: 9,
|
||
},
|
||
},
|
||
});
|
||
});
|
||
return tempData;
|
||
},
|
||
},
|
||
watch: {
|
||
cdata: {
|
||
handler(newData) {
|
||
this.options = {
|
||
color: ["#edc523", "#2ac9cf", "#f87777", "#67a4fc", "#6dcc50"],
|
||
tooltip: {
|
||
// backgroundColor: "rgba(50,50,50,.3)",
|
||
// textStyle: {
|
||
// color: "#222",
|
||
// },
|
||
formatter: "{b} : {c}（{d}%）", // a->seriesName,b->legendName,c->value,d->percent
|
||
},
|
||
grid: {
|
||
top: "3%",
|
||
right: "19%",
|
||
left: "9%",
|
||
bottom: "9%",
|
||
},
|
||
legend: {
|
||
// orient: "hori",
|
||
bottom: 0,
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
series: [
|
||
{
|
||
name: "攻击次数",
|
||
type: "pie",
|
||
clockwise: false,
|
||
radius: "59%",
|
||
center: ["50%", "45%"],
|
||
hoverAnimation: false,
|
||
roseType: "radius",
|
||
data: [
|
||
{
|
||
value: 335,
|
||
name: "会议室",
|
||
},
|
||
{
|
||
value: 310,
|
||
name: "办公室",
|
||
},
|
||
{
|
||
value: 234,
|
||
name: "机房",
|
||
},
|
||
{
|
||
value: 135,
|
||
name: "设备间",
|
||
},
|
||
],
|
||
itemStyle: {
|
||
normal: {
|
||
borderColor: "#38f6c8",
|
||
borderWidth: 1,
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "outside",
|
||
formatter: "{a|{b}：{d}%}\n{hr|}",
|
||
rich: {
|
||
hr: {
|
||
backgroundColor: "t",
|
||
borderRadius: 100,
|
||
width: 0,
|
||
height: 6,
|
||
padding: [3, 3, 0, -12],
|
||
shadowColor: "#1c1b3a",
|
||
shadowBlur: 1,
|
||
shadowOffsetX: 1,
|
||
shadowOffsetY: 2,
|
||
},
|
||
a: {
|
||
padding: [-35, 15, -20, 5],
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
length: 10,
|
||
length2: 16,
|
||
lineStyle: {
|
||
width: 0.5,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
},
|
||
};
|
||
</script>
|