数据可视化大屏 项目开发中，要显示各种各种的饼状图效果，今天整理饼状图的legend显示百分比。
效果描述：给饼状图各个部分添加边线，让饼状图看起来有间隔
legend 显示标题以及占比，通过formatter方法来自定义内容。
演示实例
关键代码
legend: {
height: '80%',
show: true,
orient: 'vertical',
right: '10%',
icon: 'circle',
bottom: 'center',
align: 'left',
textStyle: {
color: '#fff',
fontSize: FontChart(16)
},
formatter: function (name) {
var total = 0;
var value;
that.list.forEach((item) => {
total += Number(item.value);
if (item.name == name) {
value = item.value;
}
})
var p = Math.round(((value / total) * 100)); //求出百分比
return ```{name} ``{p}%`; //返回出图例所显示的内容是名称+百分比
},
itemWidth: 15,
itemHeight: 10,
itemGap: 30
}
演示实例
使用组件
<template>
<div class="echartsBodys">
<echarts1 title="人员资质" :total="total" :list="list" ref="echarts"></echarts1>
</div>
</template>
<script>
import WOW from "wow.js";
import echarts1 from "./components/echarts.vue";
export default {
name: "title",
data() {
return {
list: [
{
name: '工食品签证官',
value: 80,
color1: 'rgba(252, 96, 93, 1)',
color2: 'rgba(253, 173, 68, 1)',
checked: true
},
{
name: '植物源性食品现场查验资质',
value: 70,
color1: 'rgba(253, 168, 62, 1)',
color2: 'rgba(254, 217, 82, 1)',
checked: true
},
{
name: '不合格原因3',
value: 70,
color1: 'rgba(47, 156, 252, 1)',
color2: 'rgba(254, 221, 66, 1)',
checked: true
}]
}
},
computed: {
total: function () {
var total = 0
this.list.forEach((type) => {
total += type.value
});
return total
}
},
components: {echarts1},
props: {
title: {
type: String,
default() {
return '';
}
},
icon: {
type: String,
default() {
return '';
}
},
},
watch: {},
mounted() {
var that = this;
var wow = new WOW({
boxClass: "wow",
animateClass: "animated",
offset: 0,
mobile: true,
live: true,
callback: function (box) {
},
scrollContainer: null,
resetAnimation: true,
});
wow.init();
},
methods: {
getChecked(index) {
this.list[index].checked = !this.list[index].checked
this.$refs.echarts.drawEcharts()
}
},
}
</script>
<style lang="scss" scoped>
.list {
margin-left: 0px;
position: relative;
width: 50%;
height: calc(100% - 10px);
//background: url("./assets/jiaobiaobg.png") no-repeat;
//background-size: 100% 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
.listItem {
font-size: 14px;
display: flex;
height: 30%;
width: calc(100% - 20px);
margin: 0 auto;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.listIteml {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
}
span {
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #E0F9FF;
line-height: 20px;
}
.dot {
width: 8px;
height: 8px;
margin-right: 10px;
flex-shrink: 0;
}
.dot.disabled {
background: rgba(#999, 0.8) !important;
}
span.disabled {
color: rgba(#999, 0.8) !important;
}
.num {
font-size: 22px;
font-family: DIN;
font-weight: normal;
color: #FFFFFF;
line-height: 20px;
background: linear-gradient(0deg, rgba(#999, 0.8) 0.1220703125%, rgba(#999, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.echartsBodys {
width: 100%;
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}
</style>
组件代码
<template>
<div class="echarts1" ref="echarts1">
</div>
</template>
<script>
import {FontChart} from '@/utils/utils'
import * as echarts from "echarts"
export default {
name: 'echarts1',
components: {},
props: {
list: {
type: Array,
default() {
return [];
}
},
active: {
type: [Array, Number],
default() {
return 0;
}
},
},
data() {
return {}
},
watch: {
active() {
this.drawLine()
},
},
mounted() {
this.drawLine()
},
methods: {
drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = echarts.init(this.$refs.echarts1)
var option = {
tooltip: {
trigger: 'item',
formatter: function (e) {
console.log(e)
return e.data.name + ' ' + e.data.value + ' ' + e.percent + '%'
}
},
legend: {
height: '80%',
show: true,
orient: 'vertical',
right: '10%',
icon: 'circle',
bottom: 'center',
align: 'left',
textStyle: {
color: '#fff',
fontSize: FontChart(16)
},
formatter: function (name) {
var total = 0;
var value;
// debugger;
that.list.forEach((item) => {
total += Number(item.value);
if (item.name == name) {
value = item.value;
}
})
var p = Math.round(((value / total) * 100)); //求出百分比
return ```{name} ``{p}%`; //返回出图例所显示的内容是名称+百分比
},
itemWidth: 15,
itemHeight: 10,
itemGap: 30
},
series: [
{
type: 'pie',
center: ['40%', '50%'],
radius: ['0%', '80%'],
color: ['#179CFB',
'#33F8E9',
'#AD26F3',
'#27E79F',
'#F9B32E',
'#2D49E8',
'#5AE0FF',
'#9227EF'],
labelLine: {
normal: {
length: 20
}
},
label: {
show: false,
position: 'inside',
formatter: '{d}%',
color: '#fff',
fontSize: 16
},
itemStyle: {
normal: {
borderColor: '#3eebc4',
borderWidth: 1
}
},
data: that.list
}
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: calc(100% - 0px);
}
</style>
