饼图组件 pie.vue
<template>
<div class="pie" :style="{height:height,width:width}">
</div>
</template>
<script>
import { mapState } from 'vuex'
// import echarts from 'echarts'
export default {
computed:mapState({
// 箭头函数可使代码更简练state
scale: state =>state.overView.scale
}),
props:{
title:{
type: String,
},
initData:{
type:Array,
default:()=>{
return []
}
},
legendData: {
type:Array,
default:()=>{
return []
}
},
legend:{
type:Array,
default:()=>{
return []
}
},
height:{
type: String,
default:'100%'
},
color:{
type:Array,
default:()=>{
return ['#4e84fe','#ecc04f','#fe4e77']
}
},
width:{
type: String,
default:'100%'
},
autoResize: {
type: Boolean,
default: true
},
},
data () {
return {
pieLengenFs: 12
}
},
computed:{
PieLegend(){
let b = []
this.initData.forEach(element => {
b.push(element.name)
});
return b
}
},
mounted () {
let that =this
that.chart = this.$echarts.init(this.$el);
that.initChart();
if (this.autoResize) {
window.addEventListener('resize', this.__resizeHanlder)
}
// 监听侧边栏的变化
const sidebarElm = document.getElementsByClassName('mainCont')[0] // 获取根节点的类名
sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
// 获取当前浏览器的宽度
},
methods: {
__resizeHanlder(){
this.chart.resize()
let win_width = document.body.clientWidth
// console.log('win_width', win_width)
if (win_width < 1800) {
this.pieLengenFs = 12
} else {
this.pieLengenFs = 14
}
},
draw(param){
let that =this
this.chart.setOption({
legend: {
data:this.PieLegend
},
series: [
{
name:this.title,
data:param
}
]
});
},
initChart(){
let _this = this
this.chart.setOption({
// title:{
// text:this.title,
// left:'center',
// top:10,
// textStyle:{
// fontSize:14,
// fontWeight:300,
// fontFamily:'Microsoft YaHei',
// align:'center',
// color:'RGBA(98, 98, 102, 1)'
// }
// },
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)" // {a} <br/>
},
color:this.color,
legend: {
itemWidth: 10,
itemHeight: 10,
orient: 'vertical',
right: 20,
top: 'center',
padding:[40, 0, 40, 0],
itemGap: 10,
data: this.PieLegend,
textStyle: {
rich:{
a:{
fontSize: this.pieLengenFs,
verticalAlign:'middle',
align:'center',
lineHeight:this.pieLengenFs,
padding:[0,6,0,0],
color: '#000'
},
b:{
fontSize: this.pieLengenFs,
align:'center',
padding:[0,6,0,0],
lineHeight:this.pieLengenFs,
color: '#000'
},
c: {
fontSize: this.pieLengenFs,
align:'center',
padding:[0,6,0,0],
lineHeight:this.pieLengenFs,
color: '#000'
},
d: {
fontSize: this.pieLengenFs,
color: '#000'
}
}
},
formatter: function(name){
// console.log(data)
let data = _this.legendData
let target = 0
let target1 = ''
let sum = 0
for(var i=0; i< data.length; i++){
if(data[i].name == name){
target = data[i].value
target1 = data[i].value1
}
sum += data[i].value
}
let arr = [
'{a|'+name+'}',
// '{b|'+target+'}',
// '{c|'+target1+'}',
'{d|'+(sum>0?((target/sum)*100).toFixed(2):0)+'%}'
]
return arr.join('')
}
},
series: [
{
name: '支付方式',
type: 'pie',
radius : ['40%', '70%'],
center: ['25%', '50%'],
selectedMode: 'single',
label: {
show:true,
normal: {
show: false,
position: 'center'
},
},
itemStyle: {
borderColor: '#fff',
borderWidth: 10,
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
color: function(params) {
//自定义颜色
var colorList = [
'#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
'#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
'#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
'#0080FF', '#0AD4D6', '#F54DB7', '#6C5CE7', '#AAB3C9',
]
return colorList[params.dataIndex]
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[]
}
]
})
}
},
data(){
return {
chart:null,
label: {
}
}
},
watch:{
initData:{ // 监听initDta,数据变化的时候，重新绘制饼图
deep:true,
handler (v, ov) {
this.draw(v);
}
},
scale(){
this.__resizeHanlder()
}
}
}
</script>
<style lang="scss" scoped>
</style>
父组件调用
<div style="width:50%;height:300px;">
<pie title="支付方式" :initData="initDataPayType" :legend="pieLegend" :legendData="legendData"></pie>
</div>
<script>
import pie from './components/pie'
export default {
components:{pie},
mounted() {
this.initDataPayType = [
{ value: 16, name: '超时未通行' },
{ value: 73, name: '无应答' },
{ value: 58, name: '临停车入场' },
{ value: 48, name: '月卡过期' },
{ value: 30, name: '领导方行' },
{ value: 16, name: '超时未通行1' },
{ value: 73, name: '无应答1' },
{ value: 58, name: '临停车入场1' },
{ value: 48, name: '月卡过期1' },
{ value: 30, name: '领导方行1' },
{ value: 16, name: '超时未通行2' },
{ value: 73, name: '无应答2' },
{ value: 58, name: '临停车入场2' },
{ value: 48, name: '月卡过期2' },
{ value: 30, name: '领导方行2' },
{ value: 16, name: '超时未通行3' },
{ value: 73, name: '无应答3' },
{ value: 58, name: '临停车入场3' },
{ value: 48, name: '月卡过期3' },
{ value: 30, name: '领导方行3' }
]
console.log('this.initDataPayType', this.initDataPayType)
this.legendData = this.initDataPayType.map(item => {
item.value1 = item.value
return item
})
console.log('this.legendData', this.legendData)
this.initDataPayType.forEach(e => {
this.pieLegend.push(e.name)
});
}
}
</script>
示例：
initData标签：return,name,pieLengenFs,value,图例,let,文本,data,echarts From： https://www.cnblogs.com/mmzuo-798/p/17086544.html