echarts旭日图添加图例

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是每个颜色对应的名称},

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

echarts旭日图添加图例相关推荐

极致呈现系列之：Echarts旭日图的绚丽奇观
目录什么是旭日图旭日图的特性及应用场景旭日图的特性应用场景旭日图常用的配置项创建基本的旭日图自定义旭日图样式样式旭日图的高级应用什么是旭日图旭日图是一种可视化图表,用于展示层级结构 ...
echarts旭日图数据重构处理
网上对于旭日图的数据结构处理资料很少,所以自己记录一下. 首先看旭日图需要的数据结构: // 旭日图{name: '淘宝',children: [{name: '女装',children:[{name ...
Echarts环形图--自定义图例文本和中心文字
一.设置环形图中心文字可用 titel.text 和 title.subtext 来定义中心处的文本 title:{text:subtext: } 用 graphic 原生图形元素组件每个图形元素 ...
Echarts环形图自定义图例
项目场景: 在展示图表的时候有的时候需要图例也展示出一些内容来,例如这样子: 描述普通的图例一般只是这样但我们希望展示更多的信息,于是需要使用一个东西:字符串模板:formatter 解决方案: ...
echarts环形图的图例引导线水平加圆点
什么是引导线? 引导线就是label(文本标签)链接的线引导线分两段从拐弯的地方开始分,接近圆的是length(引导线1),接近label的是length2(引导线2) 需求一:要求水平引导线让 ...
用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
MATLAB 三维图分类图例
在matlab做三维图时,经常会使用颜色作为幅值的标识,但在显示不同类的数据时,用不同颜色标明类别后,应该如何做出图例呢?看了matlab的官方文档很久也没有找到自己想要的答案,反复试验+看别人的博客 ...
Python使用matplotlib函数subplot可视化多个不同颜色的折线图、为指定的子图添加图例信息（legend）
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.为指定的子图添加图例信息(legend) 目录
R语言使用latticeExtra包可视化双Y轴线图实战（Dual Y axis）：单y轴线图、双y轴图线图、双y轴图线图（添加图例）
R语言使用latticeExtra包可视化双Y轴线图实战(Dual Y axis):单y轴线图.双y轴图线图.双y轴图线图(添加图例) 目录

echarts旭日图添加图例

echarts旭日图添加图例相关推荐

最新文章

热门文章