vue-饼形图-详细
显示效果
代码
<template>
<div style="height: 350px;">
<div :class="className" :style="{height:height,width:width}"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null,
pieChartData:[
{ value: 320, name: '找工作' },
{ value: 240, name: '广告推广' },
{ value: 149, name: '二手物品' },
{ value: 100, name: '二手车' },
{ value: 59, name: '拼车出行' },
{ value: 59, name: '宠物出售' },
{ value: 59, name: '房屋出售' },
{ value: 59, name: '上门出售' }
]
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
// 计算百分比
let mdataList = this.pieChartData
let total = 0
const target = new Map();
mdataList.forEach((item) => {
// 计算value的和，用来算百分比
total += item.value
// 组成 map {A:1212} ,用来下面获取 value
target.set(item.name, item.value)
})
this.chart = echarts.init(this.$el, 'macarons');
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'right',
orient: 'vertical', // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'
top: '50',
data: ['找工作', '广告推广', '二手物品', '二手车', '拼车出行','宠物出售','房屋出售','上门出售'],
formatter: function(name) {
let lists = [];
let inum = target.get(name) / total * 100;
//保留inum小数点后２位
let vnum = parseFloat(inum).toFixed(2);
lists.push(name + '－' + vnum + '%');
return lists;
},
},
title: {
text: '分类统计',
left: 'left',
},
series: [
{
name: '分类统计',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['35%', '50%'],
data: this.pieChartData,
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
})
}
}
}
</script>