174 lines
3.6 KiB
Vue
174 lines
3.6 KiB
Vue
<template>
|
||
<div :class="className" :style="{ height: height, width: width }" />
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
require('echarts/theme/macarons'); // echarts theme
|
||
import resize from '@/utils/chartMixins/resize';
|
||
|
||
const animationDuration = 1000;
|
||
|
||
export default {
|
||
mixins: [resize],
|
||
props: {
|
||
className: {
|
||
type: String,
|
||
default: 'chart',
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: 'chart',
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '100%',
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '250px',
|
||
},
|
||
pieData: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
};
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return;
|
||
}
|
||
this.chart.dispose();
|
||
this.chart = null;
|
||
},
|
||
methods: {
|
||
initChart() {
|
||
this.chart = echarts.init(this.$el, 'macarons');
|
||
let totalNumber = 0;
|
||
this.pieData.forEach((i) => {
|
||
i.value = i.num;
|
||
i.name = i.status;
|
||
totalNumber += i.num;
|
||
});
|
||
this.chart.setOption({
|
||
title: {
|
||
zlevel: 2, // 控制圆环图中间的字的层级
|
||
text: '总数',
|
||
subtext: totalNumber,
|
||
top: '35%', // 控制位置
|
||
left: '50%', // 控制位置
|
||
textAlign: 'center', // 让文字居中
|
||
textStyle: {
|
||
color: 'rgba(203, 195, 195, 1)',
|
||
},
|
||
subtextStyle: {
|
||
fontSize: 30,
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
show: true, // 控制鼠标悬浮是否显示数据
|
||
formatter: '{b}<br/>数量: {c}<br/>占比: {d}%',
|
||
},
|
||
legend: {
|
||
orient: 'vartical',
|
||
bottom: 0,
|
||
left: 'right',
|
||
icon: 'circle',
|
||
itemGap: 16, //图例每项之间的间隔
|
||
textStyle: {
|
||
// 文字的样式
|
||
fontSize: 24, // 可控制每个legend项的间距
|
||
color: '#828282',
|
||
rich: {
|
||
oneone: {
|
||
width: 50,
|
||
color: '#000000',
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
},
|
||
twotwo: {
|
||
width: 35,
|
||
color: '#333',
|
||
fontSize: 12,
|
||
},
|
||
threethree: {
|
||
width: 20,
|
||
color: '#959595',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
formatter: (name) => {
|
||
var target = this.pieData.find((item) => {
|
||
return item.name === name;
|
||
}).num;
|
||
var v = ((target / totalNumber) * 100).toFixed(2);
|
||
return `{oneone|${name}} {twotwo|${target}个} {threethree|${v}%}`;
|
||
},
|
||
},
|
||
|
||
// legend: {
|
||
// bottom: '0%',
|
||
// left: 'center',
|
||
// },
|
||
grid: {
|
||
top: 40,
|
||
left: '0%',
|
||
right: '2%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
series: [
|
||
{
|
||
name: 'pie',
|
||
type: 'pie',
|
||
radius: ['55%', '80%'],
|
||
bottom: '20%',
|
||
avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2,
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'outside', // 另有参数inside，可以让数据在圆环上
|
||
formatter: '{b}', //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
|
||
textStyle: {
|
||
// 牵引线上的文字的样式
|
||
align: 'right',
|
||
baseline: 'middle',
|
||
fontFamily: '微软雅黑',
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: '#333',
|
||
},
|
||
},
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 30,
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length: 17,
|
||
length2: 57,
|
||
},
|
||
data: this.pieData,
|
||
},
|
||
],
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|