echarts自定义图例颜色,echart 颜色

  echarts自定义图例颜色,echart 颜色

  这篇文章主要为大家详细介绍了某视频剪辑软件使用统计图自定义标签以及颜色,应用于echart 5.0以上版本,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  本文实例为大家分享了某视频剪辑软件使用统计图自定义标签以及颜色的具体代码,供大家参考,具体内容如下

  常规样式

  用户界面画的样式效果

  细节在于这个小圆点的颜色要和饼图块的颜色一致,这在5.0(电子海图版本)之前的版本是可以使用这一段代码实现的。

  标签:{

  格式化程序:params={//

  返回(

  {icon}{name参数名称 } {值

  params.value }

  );

  },

  丰富:{

  图标:{

  字体大小:16

  },

  名称:{

  fontSize: 16,

  填充:[0,10,0,4],

  },

  值:{

  fontSize: 16,

  }

  },

  }

  但是由我的项目里面有需要用到5.0才支持的一些特效,不得已升级到5.0,那这个颜色就不起效了。就需要找个方案实现他,最后是这样实现的。在数据赋值的时候给每个标签标签的颜色进行重新赋值,去饼图色块的值进行赋值。

  这里面两份数据,是因为在里面叠加了饼图内部的百分比,就是篮框圈住的东西

  配置项:

  系列:[

  {

  类型:"饼图",

  半径:[0, 75%],

  中心:[50% , 50%],

  top:0,

  //roseType: radius ,

  avoidalabeloverlap:真的,

  //minshowlabellangel:0.6,

  开始角度:0,

  标签:{

  秀:真的,

  位置:"外部",

  alignTo:"边缘",

  //另一种方案的点

  正常:{

  格式化程序:params={

  //formatColor(params.color)

  //color=params.color

  返回(

  { icon } { name params。名称 } \ n { value

  参数值次 }

  );

  },

  填充:[0,-40,25,-40],

  丰富:{

  图标:{

  fontSize: 15,

  },

  名称:{

  fontSize: 13,

  颜色: #666666

  },

  值:{

  fontSize: 12,

  颜色: rgba(0,0,0,0.35)

  }

  }

  }

  },

  标签:{

  长度:10,

  长度2:70,

  光滑:假的,

  线型:{

  颜色: rgba(0,0,0,0.15)

  }

  },

  数据:[]

  },

  {

  名称: ,

  类型:"饼图",

  半径:[0, 75%],

  中心:[50% , 50%],

  数据:[],

  top:0,

  //roseType: radius ,

  avoidalabeloverlap:真的,

  开始角度:0,

  项目样式:{

  正常:{

  标签:{

  秀:真的,

  位置:"内部",

  颜色: #fff ,

  fontSize: 14,

  对齐:"居中",

  格式化程序:函数(p) { //指示线对应文字,百分比

  返回百分比"%";

  }

  },

  }

  }

  }

  ]

  重新赋值:

  //拿到色卡重新赋值

  let colorArr=pieOption.color

  设系列数据=JSON。解析(JSON。stringify(这个。orderservicetimelendata。输出。价值。行)) []

  设系列数据1=JSON。解析(JSON。stringify(这个。orderservicetimelendata。输出。价值。行)) []

  if(seriesData.length){

  seriesData.forEach((item,index)={

  item.name=item.typeStr

  项目。值=项目。数量

  项目。label={ color:colorrar[index]}

  })

  seriesData1.forEach((item,index)={

  item.name=item.typeStr

  项目。值=项目。数量

  })

  }

  return { legend:{ data:series data },series: [{data: seriesData},{ data:series data 1 }]};

  这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: