颜色，背景，间距，可修改
/*
* @Author: wxl
* @Date: 2022-11-04 08:22:23
* @Last Modified by: wxl
* @Last Modified time: 2022-12-12 17:32:58
*/
<template>
<!-- 饼图 四分之三圆-->
<div :id="histogramId" v-bind:style="{height:height,width:width}"></div>
</template>
<script type="text/ecmascript-6">
// import propAPI from './echartProp'
export default {
// props:propAPI,
props:{
//id
histogramId:{
type:String,
default:''
},
//组件的高度
height: {
type: String,
default: '230px'
},
//组件的宽度
width: {
type: String,
default: '100%'
},
pieData:{
type:Array,
default:()=>[
{name: '待派单',value: 20},
{name: '待接单',value: 10},
{name: '处理中',value: 30},
{name: '已完成',value: 40},
{name: '已取消',value: 10},
{name: '已评价',value: 20}
]
},
//颜色数组
colorList:{
type:Array,
default:()=>['#8185F1','#FA3B67','#31C2AF','#CECE41','#0DFF85','#16F3FB']
},
//主园的大小
mainCircle:{
type:Object,
default:()=>{
return{
radius:[70, 65],
center:['25%','47%'],
}
}
},
//lend的设置
legend:{
type:Object,
default:()=>{
return{
itemWidth:10,
itemHeight:10,
top: '15%',
left: '52%',
icon:'rect',
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 20,
// width:'100%',
height:'20%'
}
}
},
legendShow:{
type:Boolean,
default:true
},
tooltipShow:{
type:Boolean,
default:true
},
jianju:{
type:Number,
default:12
},
bgColor:{
type:String,
default:'#28537B'
}
},
data(){
return{
warnNUm:'',
totalSum:0,
}
},
methods:{
initPie(){
var that = this
var data = this.pieData
var arrName = getArrayValue(data, "name");
var arrValue = getArrayValue(data, "value");
var sumValue = eval(arrValue.join('+'));
var objData = array2obj(data, "name");
var optionData = getData(data)
function getArrayValue(array, key) {
var key = key || "value";
var res = [];
if (array) {
array.forEach(function(t) {
res.push(t[key]);
});
}
return res;
}
function array2obj(array,key) {
var resObj = {};
for(var i=0;i<array.length;i++){
resObj[array[i][key]] = array[i];
}
return resObj;
}
function getData(data) {
var res = {
series: [],
yAxis: []
};
for (let i = 0; i < data.length; i++) {
// console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
res.series.push({
name: '',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [that.mainCircle.radius[0] - i * that.jianju + '%', that.mainCircle.radius[1] - i * that.jianju + '%'],
// center: ["30%", "55%"],
center:that.mainCircle.center,
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: data[i].value,
name: data[i].name
}, {
value: sumValue - data[i].value,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}]
});
res.series.push({
name: '',
type: 'pie',
silent: true,
z: 1,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [that.mainCircle.radius[0] - i * that.jianju + '%', that.mainCircle.radius[1] - i * that.jianju + '%'],
center:that.mainCircle.center,
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: 7.5,
itemStyle: {
color: that.bgColor,
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}, {
value: 2.5,
name: '',
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}]
});
// res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
}
return res;
}
this.warnNUm = this.$echarts.init(document.getElementById(this.histogramId));
this.warnNUm.setOption({
legend: {
show: this.legendShow,
icon:this.legend.icon,
top: this.legend.top,
left: this.legend.left,
data: arrName,
itemWidth:this.legend.itemWidth,
itemHeight:this.legend.itemHeight,
// padding: [0, 5],
itemGap: this.legend.itemGap,
formatter: function(name) {
return "{title| " + name + "} {value|" + (objData[name].value) +"}"
},
textStyle: {
rich: {
title: {
fontSize: 12,
width:70,
color: "#B5D5FB"
},
value: {
fontSize: 14,
color: "#fff"
}
}
},
},
tooltip: {
show: this.tooltipShow,
},
color: this.colorList,
grid: this.grid,
yAxis: [{
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
inside: true,
textStyle: {
color: "#fff",
fontSize: 16,
},
show: true
},
data: optionData.yAxis
}],
xAxis: [{
show: false
}],
series: optionData.series
});
//点击
// that.warnNUm.on('click', function (params) {
// // console.log(params.dataIndex,'=====')
// //向父级传递index
// that.$emit('pieAll',params.dataIndex)
// });
},
},
watch:{
pieData: {
handler(newVal, oldVal) {
// console.log(1111)
// this.warnNUm.resize()
this.initPie()
},
deep: true
},
width:function(){
// alert(this.width)
this.warnNUm.resize()
},
// spaceNum1(val){
// alert(val)
// this.warnNUm.resize()
// },
},
mounted(){
// this.initSingleColorZhu()
// 新建一个promise对象
let newPromise = new Promise((resolve) => {
resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
// 此dom为echarts图标展示dom
this.initPie()
})
},
}
</script>
