98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<!-- 半圆饼图-Half Doughnut Chart -->
|
||
|
|
<!-- 用于预警服务-异常检测的三个数据 -->
|
||
|
|
<div ref="echarts" style="width: 800px; height: 400px;padding-left:250px"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
export default {
|
||
|
|
props:{myHalfData:{
|
||
|
|
type:Array,
|
||
|
|
|
||
|
|
}},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
myData:this.myHalfData
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
watch:{
|
||
|
|
myHalfData(){
|
||
|
|
this.initCharts()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
|
||
|
|
initCharts(){
|
||
|
|
var myChart = echarts.init(this.$refs.echarts)
|
||
|
|
var option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: "异常类型占比",
|
||
|
|
left: "center",
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 17,
|
||
|
|
lineHeight: 85,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '0%',
|
||
|
|
top: '0%',
|
||
|
|
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: "15%",
|
||
|
|
left: "center",
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "proportion of abnormal risk",
|
||
|
|
type: "pie",
|
||
|
|
radius: ["40%", "80%"],
|
||
|
|
center: ["50%", "70%"],
|
||
|
|
// adjust the start angle
|
||
|
|
startAngle: 180,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
formatter(param) {
|
||
|
|
// correct the percentage
|
||
|
|
return param.name + " (" + param.percent * 2 + "%)";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// data: [
|
||
|
|
// { value: 300, name: "股价波动异常" },
|
||
|
|
// { value: 350, name: "高频交易" },
|
||
|
|
// { value: 200, name: "资产泡沫" },
|
||
|
|
// { value: 120, name: "事件风险波及" },
|
||
|
|
// { value: 110, name: "风险事件时长" },
|
||
|
|
// { value: 280, name: "事件热度异常" },
|
||
|
|
// {
|
||
|
|
// // make an record to fill the bottom 50%
|
||
|
|
// value: 300+350+200+120+110+280,
|
||
|
|
// itemStyle: {
|
||
|
|
// color: "none",
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
// ],
|
||
|
|
data: this.myHalfData
|
||
|
|
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.initCharts()
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|