情不知从何起,一往而情深
排名
6
文章
199
粉丝
4
评论
3
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

echarts图例legend颜色各不相同,图例legend空心圆

9191人阅读 2023/3/14 10:34 总访问:1110433 评论:0 收藏:0 手机
分类: 前端

代码如下:

  1. legend: {
  2. // x:'right', //可设定图例在左、右、居中
  3. // padding:[0,50,0,0],
  4. // 只设置距离右边
  5. right: 70,
  6. // circle,rect ,roundRect,triangle,diamond,pin,arrow,none,
  7. //icon:"circle",
  8. data: [{
  9. name: "累计评估量",
  10. // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
  11. itemStyle: {
  12. color: "#fff",
  13. borderColor: '#F2C52A',
  14. borderWidth: 1,
  15. },
  16. // 单独设置字体颜色
  17. textStyle: {
  18. color: "#F2C52A",
  19. },
  20. },
  21. {
  22. name: "累计实验量",
  23. itemStyle: {
  24. color: "#fff",
  25. borderColor: '23FFFC',
  26. borderWidth: 1,
  27. },
  28. // 单独设置字体颜色
  29. textStyle: {
  30. color: "#23FFFC"
  31. }
  32. },
  33. {
  34. name: "累计项目数",
  35. // 图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
  36. itemStyle: {
  37. color: "#fff",
  38. borderColor: '1C8DFF',
  39. borderWidth: 1,
  40. },
  41. textStyle: {
  42. color: "#1C8DFF"
  43. }
  44. }
  45. ],
  46. //data: ['累计评估量', '累计实验量', '累计项目数'],
  47. // textStyle: {
  48. // color: "#fff"
  49. // }
  50. },

其实就是要统一设置就直接放到legend下面,要单独设置就放到data集合里边去为每根线单独设置

legend官方文档:
https://echarts.apache.org/zh/option.html#legend


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价