echarts玫瑰图数据不变展示默认

不知道大家有没有遇到跟我一样的问题,当你玫瑰图的数据差距比较大的时候,这个图就变的特别丑

很显然这种展示效果并不是我们想要看到的,我们可以发现这个图的比例是根据 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}`
            }
          }

这步做完就大功告成了,我们用这想要的展示模式,展示这我们需要展示的数据

缺点:不能比较明显的看出各数据的比例