You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
6.3 KiB
220 lines
6.3 KiB
7 months ago
|
<!-- @format -->
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
import BaseBar from './BasePie.vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'PieLabelLineAlign',
|
||
|
|
extends: BaseBar,
|
||
|
|
props: {
|
||
|
|
series: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
borderColor: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
colorDatas: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [
|
||
|
|
'#15B0A7',
|
||
|
|
'#2193D3',
|
||
|
|
'#2D71D8',
|
||
|
|
'#10AAB4',
|
||
|
|
'#1AA5E1',
|
||
|
|
'#15B0A7',
|
||
|
|
'#1AA5E1',
|
||
|
|
'#30BB78',
|
||
|
|
'#04C19F',
|
||
|
|
'#37B2E7',
|
||
|
|
'#397ADC',
|
||
|
|
];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
created() {},
|
||
|
|
mounted() {
|
||
|
|
let optionData = this.optionHandle();
|
||
|
|
|
||
|
|
this.setOption(optionData);
|
||
|
|
this.renderChart();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
optionHandle() {
|
||
|
|
let clientWidth = parseInt(this.$refs.BasePieRef.clientWidth);
|
||
|
|
let colorDatas = this.colorDatas;
|
||
|
|
let colorLen = colorDatas.length;
|
||
|
|
let borderColor = this.borderColor;
|
||
|
|
let { name: titleName, data: seriesDatas, total } = this.series[0];
|
||
|
|
let option = {
|
||
|
|
animationDuration: 300,
|
||
|
|
animationEasing: 'linear',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontFamily: 'Microsoft YaHei',
|
||
|
|
},
|
||
|
|
graphic: {
|
||
|
|
elements: [
|
||
|
|
{
|
||
|
|
type: 'text',
|
||
|
|
left: 'center',
|
||
|
|
top: '44%',
|
||
|
|
z: 5,
|
||
|
|
style: {
|
||
|
|
text: titleName,
|
||
|
|
textAlign: 'center',
|
||
|
|
font: '400 0.563em "Microsoft YaHei"',
|
||
|
|
fill: '#EBF9FF',
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'text',
|
||
|
|
left: 'center',
|
||
|
|
top: '49%',
|
||
|
|
z: 5,
|
||
|
|
style: {
|
||
|
|
text: total,
|
||
|
|
textAlign: 'center',
|
||
|
|
font: '500 1.8125em "Microsoft YaHei"',
|
||
|
|
fill: '#E1F5FE',
|
||
|
|
width: 30,
|
||
|
|
height: 30,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: titleName,
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['35%', '50%'],
|
||
|
|
itemStyle: {
|
||
|
|
borderColor: borderColor,
|
||
|
|
borderWidth: 2,
|
||
|
|
color: function (params) {
|
||
|
|
var idx = params.dataIndex;
|
||
|
|
|
||
|
|
return colorDatas[idx % colorLen];
|
||
|
|
// debugger;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
textStyle: { fontSize: '12', fontFamily: 'Microsoft YaHei' },
|
||
|
|
data: seriesDatas.map((item, index) => {
|
||
|
|
item.label = {
|
||
|
|
color: colorDatas[index % colorLen],
|
||
|
|
};
|
||
|
|
return item;
|
||
|
|
}),
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
alignTo: 'labelLine',
|
||
|
|
minMargin: 8,
|
||
|
|
edgeDistance: 20,
|
||
|
|
lineHeight: 15,
|
||
|
|
// 这里定义了文本 百分比 是'value'样式的
|
||
|
|
formatter: '{value|{b}} {c} {d}%',
|
||
|
|
rich: {
|
||
|
|
// 这个'value'样式表示文字颜色为白色
|
||
|
|
value: {
|
||
|
|
fontSize: 11,
|
||
|
|
color: '#EFFFFF',
|
||
|
|
opacity: 0.65,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// color:function (params){
|
||
|
|
// var idx = params.dataIndex;
|
||
|
|
|
||
|
|
// return colorDatas[idx%colorLen];
|
||
|
|
// // debugger;
|
||
|
|
// },
|
||
|
|
// formatter: function(val){
|
||
|
|
// debugger;
|
||
|
|
// let data = val.data;
|
||
|
|
// let rStr = "";
|
||
|
|
// let index = -1;
|
||
|
|
// for(let key in data){
|
||
|
|
// index += 1;
|
||
|
|
// let m = 'mark'+index;
|
||
|
|
// rStr += data[key]+"-";//`{${m}|${data[key]}}`
|
||
|
|
// }
|
||
|
|
// return rStr;
|
||
|
|
// },
|
||
|
|
// rich: {
|
||
|
|
// mark0:{
|
||
|
|
// fontSize: 11,
|
||
|
|
// color:'#EFFFFF',
|
||
|
|
// opacity:0.65
|
||
|
|
// }
|
||
|
|
// ,
|
||
|
|
// mark1:{
|
||
|
|
// padding: [0,0,0,8],
|
||
|
|
// color:'#397ADC',
|
||
|
|
// opacity:0.65
|
||
|
|
// },
|
||
|
|
// mark2:{
|
||
|
|
// padding: [0,0,0,8],
|
||
|
|
// color:'#397ADC',
|
||
|
|
// opacity:0.65
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: { color: '#FFFFFF', opacity: 0.35 },
|
||
|
|
length: 10,
|
||
|
|
length2: 2,
|
||
|
|
maxSurfaceAngle: 60,
|
||
|
|
},
|
||
|
|
labelLayout: function (params) {
|
||
|
|
const isLeft = params.labelRect.x < clientWidth / 2;
|
||
|
|
const points = params.labelLinePoints;
|
||
|
|
params.labelRect.y = params.labelRect.y - 7;
|
||
|
|
points[2][0] = isLeft
|
||
|
|
? params.labelRect.x
|
||
|
|
: params.labelRect.x + params.labelRect.width;
|
||
|
|
return {
|
||
|
|
dy: -8,
|
||
|
|
labelLinePoints: points,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'bg',
|
||
|
|
type: 'pie',
|
||
|
|
radius: '30%',
|
||
|
|
showEmptyCircle: true,
|
||
|
|
emptyCircleStyle: {
|
||
|
|
color: '#00667C',
|
||
|
|
opacity: 0.3,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'bg2',
|
||
|
|
type: 'pie',
|
||
|
|
radius: '25%',
|
||
|
|
showEmptyCircle: true,
|
||
|
|
emptyCircleStyle: {
|
||
|
|
color: '#027D98',
|
||
|
|
borderWidth: 1,
|
||
|
|
shadowColor: 'rgba(2, 125, 152, 1)',
|
||
|
|
shadowBlur: 2,
|
||
|
|
opacity: 0.4,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|