环形图封装
<template>
<div class="ringRadio" ref="chart" id="chart">
</div>
</template>
<script>
// 环比图
// console.log((screen.width), (screen.width / 2) * 0.8, (screen.width / 2) * 0.2)
export default {
data() {
return {
options: {},
shighlight: false,
myEcharts: null,
legendselectedName: ''
};
},
//接受配置项
props: ["option", "data", 'series', 'checkNum', 'legend', 'labelLine', 'labelShow', 'isShowTotalValue', 'moduleName', 'isKeepO'],
methods: {
init() {
//初始化echarts
this.myEcharts = this.$echarts.init(this.$refs.chart);
//调用定制参数
this.setData(this.data);
// 把参数设置到图表里
this.myEcharts.setOption(this.options);
this._legendselectchanged();
},
format(num) {
let re = /(?=(?!(\b))(\d{3})+(\.\d)*$)/g;
if (Math.abs(num) >= 1000) {
return num.toString().replace(re, ',')
} else {
return num
}
},
formatData(data) {
if (data && data.length > 0) {
data.forEach(item => {
if (item.text) {
item.label = {
normal: {
formatter: ["{value|" + item.text + "}"].join(
"\n"
),
rich: {
value: {
padding: [10, 10, 10, 10]
}
}
}
};
}
});
}
},
// 设置参数
setData(data) {
// console.log('setData--')
let resData = [];
// console.log(data);
data.forEach(item => {
if (!!this.checkNum) {
let _value = Number(item.value);
if (_value < 0) {
item.isfu = true;
item.value = (-1) * _value;
} else {
item.isfu = false;
}
}
if (item) {
if (this.isKeepO) { //是否显示0
resData.push(item)
} else {
if ((Number(item.value) > 0) && (item.text != '0.0%' || item.text != '0%')) resData.push(item);
}
if (item.value < 0) {
this.$set(item, 'value', Math.abs(item.value));
this.$set(item, 'preVal', '-');
}
}
})
// console.log('resData', resData);
this.formatData(resData);
this.options = {
color: ["#3090ff", "#c47a01"], //设置占比的颜色
fontColor: '"#fd8c02',
triggerEvent: true,
tooltip: {
trigger: "item",
formatter: (params) => {
if (this.moduleName == 'yinbao') {
return "<span>" + params.name + ': ' + "</span>" + " <span>" + (params.data.preVal || '') + "</span>" + this.format(Number(params.value).toFixed(1)) + "万" + "<br/><span>" + params.seriesName + ': ' + params.data.text + '%' + "</span>"
} else {
return "<span>" + params.name + ': ' + "</span>" + this.format(Number(params.value).toFixed(1)) + "万" + " <span>" + (params.data.preVal || '') + "</span><br/><span>" + params.seriesName + ': ' + Number(params.percent).toFixed(1) + '%' + "</span>"
}
},
backgroundColor: 'rgba(255,255,255,1)',
position: ['20', '30'],
borderWidth: 1,
borderColor: 'rgba(255, 98, 0,.7)',
textStyle: {
color: 'rgba(0,0,0,.7)',
width: '20',
},
extraCssText: 'box-shadow: 4px 4px 5px rgba(255, 98, 0, 0.1);padding: 16px;'
},
title: {
// text: '达成总值',
text: '',
// subtext: '180,000万',
subtext: '',
left: 'center',
top: '30%',
textStyle: {
color: 'rgba(0,0,0,.3)',
fontSize: 12,
fontWeight: 'normal',
width: '10'
},
subtextStyle: {
fontSize: 18,
fontWeight: 'normal',
}
},
legend: {
orient: 'vertical', // 'vertical
// x: 8,
y: 'bottom',
itemWidth: 8,
top: '64%',
itemGap: 22,
selectedMode: false, //禁止图例点击事件(互联网需要点击事件)
textStyle: {
rich: {
title: {
color: 'rgba(0,0,0,.3)',
fontSize: 12,
},
value: {
color: 'rgba(0,0,0,.3)',
fontSize: 12,
padding: [0, 0, 0, 0],
}
}
}
},
series: [
{
name: "占比",
type: "pie",
center: ['50%', '35%'],
radius: ["48%", "56%"],
hoverOffset: 4,
avoidLabelOverlap: true,
selectedMode: false,
label: { //标示文字
// show: false, //百分比
show: this.labelShow == 'undefined' ? true : this.labelShow,
position: 'center',
fontSize: '15'
},
labelLine: {
normal: {
// show: false
show: this.labelLine == 'undefined' ? true : this.labelLine
}
},
data: resData,
}
]
};
// 对象的合并
Object.assign(this.options.series[0], this.series || {})
this.deepClone(this.options, this.option);
// console.log('resData--')
this.setlistOption(resData);
},
setlistOption(resData) {
// console.log('setlistOption--', this.options.legend.formatter)
Object.assign(this.options.legend, this.legend);
if (!this.isShowTotalValue) {
resData.unshift({
name: '总值',
text: '100'
})
}
this.options.legend.data = resData.map((item, i) => {
if (i == 0 && !this.isShowTotalValue) return {
name: item.name, icon: 'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgoKIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iMTAyIiB3aWR0aD0iMTAyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IHN0cm9rZT0iIzAwMCIgaWQ9InN2Z18xIiBoZWlnaHQ9IjExMCIgd2lkdGg9IjUwIiB5PSIwIiB4PSIwIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiM3ZjNmMDAiLz4KICA8cmVjdCBzdHJva2U9IiMwMDAiIGlkPSJzdmdfMiIgaGVpZ2h0PSIxMTAiIHdpZHRoPSI1MCIgeT0iMCIgeD0iNTAiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iI2FhZDRmZiIvPgogPC9nPgo8L3N2Zz4='
}
if (!this.isKeepO && item.text == 0) return
return {
name: item.name, icon: 'path://M0,0L100,0L100,100L0,100'
};
});
this.options.legend.formatter = (name) => {
// console.log('legend--', name)
let value = 0;
resData.forEach(item => {
if (item.name == name) {
value = item.text;
return;
}
});
if (!this.isKeepO && value == 0) return
return '{title|' + name + '}{value|' + (Number(value).toFixed(1)) + '%}';
};
// console.log('setlistOption2--', this.options.legend.formatter)
},
// 更新数据
updateData(data) {
this.setData(data); // 设置数据
this.$echarts.dispose(this.$refs.chart); // 销毁echarts实例
this.myEcharts = this.$echarts.init(this.$refs.chart);
this.myEcharts.setOption(this.options); // 初始化echarts
// this._legendselectchanged(); //点击图例改变另一环的标题（互联网需要点击事件）
// this.setlistOption();
// console.log(this.options)
},
deepClone(obj1, obj2) {
for (let [key, value] of Object.entries(obj2)) {
if (typeof (value) == 'object' || value instanceof Array) {
this.deepClone(obj1[key], value);
} else {
obj1[key] = value;
}
}
},
_legendselectchanged() {
console.log(111)
this.myEcharts.dispatchAction({
type: 'legendToggleSelect',
name: this.legendselectedName
});
this.myEcharts.on('legendselectchanged', (params) => {
let ind = 0;
this.options.series[0].data.map((em, index) => {
if (em.name == params.name) {
ind = index;
}
})
this.myEcharts.dispatchAction({
type: 'showTip',
dataIndex: ind
});
var isShow = false;
this.options.animation = false;
this.options.legend.selected = {};
for (let k in params.selected) {
// console.log( params.selected[k] );
// if(k.toString() == params.name){
// debugger
// isShow = params.selected[k];
// }
this.options.legend.selected[k] = true;
}
// this.options.legend.selected[params.name] = true;
this.legendselectedName = params.name;
this.myEcharts.setOption(this.options);
// console.log(this.options.series);
this.$emit('click', params)
});
}
},
mounted() {
setTimeout(() => {
this.init();
}, 200);
},
// created() {
// // console.log('险种 分类' + this.highlight)
// },
watch: {
data(val) {
this.updateData(val);
},
option: {
handler(val) {
// console.log('watch--', this.legend)
Object.assign(this.options, val);
this.updateData(this.options.series[0].data);
},
deep: true
}
},
beforeUpdate() {
// console.log('update')
}
};
</script>
<style lang="less" scoped>
/* 宽高设置成100%，保证和父盒子的高度一致*/
.ringRadio {
width: 100%;
height: 100%; // padding-left: 10%;
box-sizing: border-box;
overflow: hidden;
}
</style>
浙公网安备 33010602011771号