236 lines
4.6 KiB
Vue
236 lines
4.6 KiB
Vue
<!--
|
|
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>
|