chartLegend.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <div class="legend">
  3. <div v-for="(item,index) in legendObj" :key="index" v-show="(item.name!='平均温度')||avgTemp">
  4. <span :style="{background:index==legendObj.length-1?'':item.color,border:item.color=='#ffffff'?'':`2px solid ${item.color}`}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. props:{
  11. lineShow:{
  12. type:Boolean,
  13. default:false
  14. },
  15. numType:{
  16. type:Boolean,
  17. default:true
  18. },
  19. dotLine:{
  20. type:Boolean,
  21. default:false
  22. },
  23. avgTemp:{
  24. type:Boolean,
  25. default:true
  26. },
  27. legendType:{
  28. type:String,
  29. default:'Tdb'
  30. }
  31. },
  32. data(){
  33. return {
  34. legendObj:[
  35. {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
  36. {name:"达标占比",numName:"达标",color:"#ffffff"},
  37. {name:"偏热占比",numName:"偏热",color:"#F9908B"},
  38. {name:"平均温度",numName:"平均温度",color:"#ffffff"},
  39. ],
  40. legendMap:{
  41. Tdb:[
  42. {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
  43. {name:"达标占比",numName:"达标",color:"#ffffff"},
  44. {name:"偏热占比",numName:"偏热",color:"#F9908B"},
  45. {name:"平均温度",numName:"平均温度",color:"#ffffff"},
  46. ],
  47. 'CO2':[
  48. {name:"正常",color:"#ffffff"},
  49. {name:"超标",color:"#DCAA04"},
  50. {name:"平均值",color:"#3EA832"},
  51. ],
  52. 'HCHO':[
  53. {name:"正常",color:"#ffffff"},
  54. {name:"超标",color:"#C6322B"},
  55. {name:"平均值",color:"#3EA832"},
  56. ],
  57. 'RH':[
  58. {name:"正常",color:"#ffffff"},
  59. {name:"偏干",color:"#F58300"},
  60. {name:"偏湿",color:"#0091FF"},
  61. {name:"平均值",color:"#3EA832"},
  62. ],
  63. 'PM2d5':[
  64. {name:"正常",color:"#ffffff"},
  65. {name:"超标",color:"#DCAA04"},
  66. {name:"平均值",color:"#3EA832"},
  67. ],
  68. }
  69. }
  70. },
  71. mounted(){
  72. this.legendObj=this.legendMap[this.legendType];
  73. },
  74. watch:{
  75. legendType(n,o){
  76. this.legendType=n;
  77. this.legendObj=this.legendMap[this.legendType];
  78. }
  79. }
  80. }
  81. </script>
  82. <style lang="less" scoped>
  83. .legend{
  84. display: inline-block;
  85. color: #848484;
  86. &>div{
  87. display: inline-block;
  88. margin-right: 16px;
  89. &>span{
  90. display: inline-block;
  91. vertical-align: middle;
  92. margin-right: 4px;
  93. width:12px;
  94. height:12px;
  95. border:1px solid rgba(214,218,223,1);
  96. }
  97. }
  98. &>div:last-child{
  99. position: relative;
  100. z-index: 2;
  101. &>span{
  102. width:8px;
  103. height:8px;
  104. border-radius: 50%;
  105. position: relative;
  106. background: #ffffff;
  107. border:2px solid #0091ff;
  108. }
  109. &>span.dotLine::after{
  110. content: '';
  111. box-sizing: content-box;
  112. top: 1px;
  113. left:-4px;
  114. z-index: -1;
  115. background: #0091ff;
  116. position: absolute;
  117. display: inline-block;
  118. width: 12px;
  119. height: 2px;
  120. }
  121. }
  122. }
  123. </style>