echarts 旭日图_sunburst图表

全栈程序员站长

发布于 2022-11-09 15:57:40

1.1K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

echarts官网中的示例如下，我们只能看到一个visualMap的属性中加了inRange，便可以出来一个渐变色的图例

但往往业务需求要的图例是这种格式的

先贴一个实现的效果图，铛铛啷挡~~

实现这个效果我们只需要操作viralMap的color属性和 categories属性即可，如下：

visualMap: {
      left:50,      
      top:170,
      dimension: 2,
      // orient: 'horizontal',
      padding:5,
      textGap: 4,
      color: colors.reverse(),//colors是拿到的图例颜色数组，由于和name属性是反着的，所以一定要将 
                              数组reverse一下
      categories: ['Thinkpad','Ideapad','Success','Fail','Life cycle was on going','Life             
                   cycle was closed','No usage data','No IB data','Illegal LTB time','IB < 
                   usage','No_price_data','No warranty','IB data too less','NULL'
      ]//categories是每个颜色对应的名称
  },

这样，我们就可以实现自定义旭日图的图例了，这两组数据可以自己提取出来，当然也可以让后台的哥们返给你哈！

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/189397.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月26日，如有侵权请联系 cloudcommunity@tencent.com 删除

https