|
|
@@ -0,0 +1,235 @@ |
|
|
|
<!-- |
|
|
|
filename: ISRAChart.vue |
|
|
|
author: liubin |
|
|
|
date: 2023-12-12 09:05:25 |
|
|
|
description: |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="isra-chart"></div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'ISRAChart', |
|
|
|
components: {}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chart: null, |
|
|
|
option: { |
|
|
|
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
}, |
|
|
|
title: { |
|
|
|
text: 11234, |
|
|
|
subtext: '总数', |
|
|
|
top: '43%', |
|
|
|
left: '49%', |
|
|
|
textAlign: 'center', |
|
|
|
textStyle: { |
|
|
|
fontSize: 32, |
|
|
|
lineHeight: 16, |
|
|
|
color: '#fff', |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
fontSize: 16, |
|
|
|
color: '#fff7', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'Access From', |
|
|
|
type: 'pie', |
|
|
|
radius: ['60%', '85%'], |
|
|
|
avoidLabelOverlap: true, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'outside', |
|
|
|
formatter: ({ dataIndex, percent }) => { |
|
|
|
// console.log( |
|
|
|
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4], |
|
|
|
// percent |
|
|
|
// ); |
|
|
|
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4]; |
|
|
|
return `{${styleName}|${percent}%}`; |
|
|
|
}, |
|
|
|
rich: { |
|
|
|
a: { |
|
|
|
color: '#2760ff', |
|
|
|
fontSize: 18, |
|
|
|
borderWidth: 0, |
|
|
|
textBorderWidth: 0, |
|
|
|
}, |
|
|
|
b: { |
|
|
|
color: '#518eec', |
|
|
|
fontSize: 18, |
|
|
|
borderWidth: 0, |
|
|
|
textBorderWidth: 0, |
|
|
|
}, |
|
|
|
c: { |
|
|
|
color: '#0ee8e4', |
|
|
|
fontSize: 18, |
|
|
|
borderWidth: 0, |
|
|
|
textBorderWidth: 0, |
|
|
|
}, |
|
|
|
d: { |
|
|
|
color: '#ddb523', |
|
|
|
fontSize: 18, |
|
|
|
borderWidth: 0, |
|
|
|
textBorderWidth: 0, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: true, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
borderRadius: 12, |
|
|
|
// borderColor: 'transparent', |
|
|
|
// borderWidth: 20 |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 1048, |
|
|
|
name: '缺陷1', |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 1, |
|
|
|
y: 1, |
|
|
|
x2: 0, |
|
|
|
y2: 0, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: '#2760ff', // 0% 处的颜色 |
|
|
|
}, |
|
|
|
// { |
|
|
|
// offset: 0.6, |
|
|
|
// color: 'transparent', // 80% 处的颜色 |
|
|
|
// }, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#2760ff33', // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 735, |
|
|
|
name: '缺陷2', |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 1, |
|
|
|
y2: 0, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: '#518eec', // 0% 处的颜色 |
|
|
|
}, |
|
|
|
// { |
|
|
|
// offset: 0.6, |
|
|
|
// color: 'transparent', // 80% 处的颜色 |
|
|
|
// }, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#518eec33', // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 580, |
|
|
|
name: '缺陷3', |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 1, |
|
|
|
y2: 1, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: '#0ee8e4', // 0% 处的颜色 |
|
|
|
}, |
|
|
|
// { |
|
|
|
// offset: 0.6, |
|
|
|
// color: 'transparent', // 80% 处的颜色 |
|
|
|
// }, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#0ee8e433', // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 484, |
|
|
|
name: '缺陷4', |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 1, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 0, |
|
|
|
colorStops: [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: '#ddb523', // 0% 处的颜色 |
|
|
|
}, |
|
|
|
// { |
|
|
|
// offset: 0.6, |
|
|
|
// color: 'transparent', // 70% 处的颜色 |
|
|
|
// }, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#ddb52333', // 100% 处的颜色 |
|
|
|
}, |
|
|
|
], |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.initChart(); |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
// this.initChart(); |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
methods: { |
|
|
|
initChart() { |
|
|
|
this.chart = echarts.init(this.$el); |
|
|
|
this.chart.setOption(this.option); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.isra-chart { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
</style> |