我是用vue开发学的组件:
效果图：
html:
js:
import echartsfrom 'echarts'
export default {
name:"pie-echart",
data:function () {
return ({
colorList: ["#ffc637",'#ff8562',"#77d877","#22becb","#2285cb",
"#c18ae1",'#8ae1ce',"#ff708b","#709fff","#97f4e1",
"#b6e793",'#ff6e6e',"#a37ad2","#e1da9c","#e19cc6",
"#00dcee",'#dfd262',"#73ce86","#ff6262","#94a9cf"],
myChart: {}
})
},
props: ["params"],
mounted:function () {
this.setOption();
},
methods: {
setLabel:function (color) {
return {
show:false,
position:"top",
normal: {
formatter:function (v) {
let name = v.name.length<5 ? v.name :`${v.name.slice(0,5)}\n${v.name.slice(5)}`;
return [
'{titleStyle|'+name+'}{pointStyle|'+v.value+'%}{abg|}'
].join('\n')
},
rich: {
title: {
color:'#ff0ff',
align:'center'
},
pointStyle: {
color: color,
height:18,
align:'left',
padding: [0,0,0,10],
},
titleStyle: {
color:'#333',
height:18,
align:'left'
}
}
}
};
},
setOption:function () {
let _this =this;
let tipData = [];
let listData = [];
let colorData = [];
for (let i =0;i <_this.params.length;i++) {
tipData.push(_this.params[i].name);
listData.push({
name:_this.params[i].name,
value:_this.params[i].proportion,
label:_this.setLabel(_this.colorList[i % (_this.colorList.length)])
});
colorData.push(_this.colorList[i % (_this.colorList.length)])
}
let option = {
title: {
text:'成绩管理',
subtext:'数据',
left:'center',
show:false,
},
tooltip: {
trigger:'item',
show:true,
formatter:"{b} :{d}%"
},
legend: {
bottom:10,
left:'center',
data:tipData,
show:false
},
color:colorData,
series: [
{
type:'pie',
radius: ['40%','65%'],
data:listData,
itemStyle: {
emphasis: {
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let dom =this.$refs.mychart;
this.myChart = echarts.init(dom);
this.myChart.setOption(option);
}
}
}
网友评论