xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

push

Browse Source
This commit is contained in:
xuziqiang
2024-05-15 17:29:42 +08:00
commit d0155dbe3c
7296 changed files with 1832517 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
lib/component/echarts/components/chart/pie/PieLabelLineAlign.vue Normal file
View File

@@ -0,0 +1,219 @@
<!-- @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>