不知道大家有没有遇到跟我一样的问题,当你玫瑰图的数据差距比较大的时候,这个图就变的特别丑
很显然这种展示效果并不是我们想要看到的,我们可以发现这个图的比例是根据 series=>data=>value决定的,因此我们可以通过这个值改变图表的展示形式
如何改变成默认的展示形式?
const num = 40
// arr 代表初始的数组,里面包含你所需要的name和value
arr.forEach((item, index) => {
// this.pieData是你图表所依赖的数据项
this.pieData.push({
// 将name正常赋值,value就改成我们想要的比例
// 需要的展示数据项(count),单独存起来
name: item.class_name,
value: num - index * 2,
count: item.stat_num
})
})
展示改变之后我们需要展示的值怎么显示呢?
展示数据通常是通过tooltip内容,此时的默认展示是无法达到预期效果的,因此我们就需要用到自定义内容了
我们可以看到echarts官网里有formatter
formatter: '{b0}: {c0}<br />{b1}: {c1}'
经个人测试这种方法很难达到预期效果,因此推荐另外一种
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
简单点说就是
formatter: function (params) { return string }
注意:一定要返回字符串否则tooltip无法显示
params的内容附上
tooltip代码附上
tooltip: {
trigger: 'item',
formatter: function (params) {
return `${params.data.name} <br />数量:${params.data.count}`
}
}
这步做完就大功告成了,我们用这想要的展示模式,展示这我们需要展示的数据
缺点:不能比较明显的看出各数据的比例