Echarts Pie RoseType #南丁格尔玫瑰图 #玫瑰图极小值问题
作者：互联网
有这样一组数据：
pie: {
dataSource: [
{ name: '一组', value: 742867 },
{ name: '二组', value: 655551 },
{ name: '三组', value: 85551 },
{ name: '四组', value: 200 },
{ name: '五组', value: 652 },
{ name: '六组', value: 96 },
].sort((a, b) => b.value - a.value),
},
如果直接将这组数据用于展示：
roseType: true
可以看到，极小值数据，几乎看不到。
为了解决这种情况， 我们可以利用数学中的 幂函数 来解决：
y=x^0.5
y=x^0.8
该函数曲线的特点，即较小值对应的Y值，和大值对应的Y值，差距不大。 x值越大，y值变化越平缓。
所以，我们可以将数据做一下处理：
let a = [
{ name: '一组', value: 742867 },
{ name: '二组', value: 655551 },
{ name: '三组', value: 85551 },
{ name: '四组', value: 200 },
{ name: '五组', value: 652 },
{ name: '六组', value: 96 },
].sort((a, b) => b.value - a.value)
let b = a.map((it) => {
return {
name: it.name,
value: Math.pow(it.value, 0.099), // 值越大，数据差越小 最大值为0.5
}
})
我们可以得到这样的数据：
[ { name: '一组', value: 3.8125908000644397 },
{ name: '二组', value: 3.765685464082815 },
{ name: '三组', value: 3.0781535758618612 },
{ name: '五组', value: 1.8993741014853285 },
{ name: '四组', value: 1.6896702968622095 },
{ name: '六组', value: 1.5712484130901458 } ]
这样，我们就能放大极小值的占比，缩小极大值的占比。 需要注意的是tooltip 和 label 的formatter 需要重新设定。 因为渲染值和实际值不同。
以下是完整的组件代码：
<template>
<div />
</template>
<script>
// import resize from "@/views/dashboard/mixins/resize";
export default {
// mixins: [resize],
props: {
dataSource: {
// 不直接传入轴数据 和 系列数据的原因是因为tooltip 需要展示额外的数据字段，ringRatio
type: Array,
default: () => [],
},
},
data() {
return {
chart: null,
}
},
computed: {
pieData: function () {
return this.dataSource
},
},
watch: {
// 监听数据变化，触发图表绘制刷新
pieData: {
handler(val) {
this.drawChart()
},
},
},
mounted() {
this.chart = this.$echarts.init(this.$el, 'macarons')
this.drawChart()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
drawChart() {
let _this = this
this.chart.setOption({
color: ['#f2f2f2', '#2772FB'],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(255, 255, 255, 0.7)',
formatter: (p) => {
let target = this.dataSource.find((it) => it.name === p.name)
let temp = 0
this.dataSource.forEach((it) => {
temp += it.value
})
let sum = temp
let realVal = target.value
let realPercent = (realVal / sum).toFixed(5)
return target.name + ' ' + realVal + '￥\n (' + realPercent + '%)'
},
},
title: {
show: false,
text: 'Income\nDistribution',
// textAlign: 'center',
// textVerticalAlign: 'middle',
top: '43%',
left: 'center',
textStyle: {
color: '#3C3B39',
fontWeight: 'normal',
fontFamily: '苹方-简',
fontSize: 22,
},
},
legend: {
data: _this.pieData.map((it) => it.name),
type: 'plain', // 普通图例
orient: 'horizontal', // 水平
right: 0, // 左距离
top: 0, // 下距离
// itemGap: 20, // 间隔
itemWidth: 22, // 图形宽度。
itemHeight: 4, // 图形高度。
itemStyle: {
// color:''
},
},
series: [
{
// name: 'Access From',
type: 'pie',
avoidLabelOverlap: true,
radius: ['0%', '70%'],
center: ['50%', '50%'],
roseType: true,
// minAngle: 5,
label: {
show: true,
// bleedMargin: 0, // 放置文字被折叠
// alignTo: 'labelLine',
formatter: (p) => {
let target = this.dataSource.find((it) => it.name === p.name)
let temp = 0
this.dataSource.forEach((it) => {
temp += it.value
})
let sum = temp
let realVal = target.value
let realPercent = (realVal / sum).toFixed(5)
return realVal + '￥\n (' + realPercent + '%)'
},
// formatter: ['{bs|{b}} {ds|{d}%}', '{cs|{c}(￥)}'].join('\n'),
// rich: {
// bs: {
// color: '#000',
// fontSize: 14,
// },
// ds: {
// color: '#000',
// fontSize: 14,
// },
// cs: {
// color: '#000',
// fontSize: 12,
// align: 'center',
// },
// },
},
itemStyle: {
borderRadius: 10,
borderColor: '#f5f5f5',
borderWidth: 2,
label: {
// position: 'inside',
fontSize: '16',
align: 'center',
// fontWeight: 'bolder',
fontFamily: '苹方-简',
overflow: 'breakAll',
},
labelLine: {
show: true,
},
},
data: _this.pieData.map((it) => {
// 这里为了放大数据的差距，在roseType:true时，让小值能够较好的展示出来，如果roseType为false。 直接赋值_this.pieData，需要注意的时候，label和 tooltip的展示值需要调整
return {
name: it.name,
value: Math.pow(it.value, 0.099), // 值越大，数据差越小 最大值为0.5
}
}),
},
],
})
_this.resize() //首次绘制 resize
},
resize() {
this.chart.resize({
width: 'auto', //自动获取dom宽度
height: (() => {
return 'auto'
})(),
})
},
},
}
</script>
数据值为：
[ { name: '一组', value: 3.8125908000644397 }, { name: '二组', value: 3.765685464082815 }, { name: '三组', value: 3.0781535758618612 }, { name: '五组', value: 1.8993741014853285 }, { name: '四组', value: 1.6896702968622095 }, { name: '六组', value: 1.5712484130901458 } ]
标签：return,name,Pie,value,玫瑰,let,dataSource,Echarts,resize 来源： https://www.cnblogs.com/jaycethanks/p/16138588.html