chartLegend.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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: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. },
  28. data(){
  29. return {
  30. legendObj:[
  31. {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
  32. {name:"达标占比",numName:"达标",color:"#ffffff"},
  33. {name:"偏热占比",numName:"偏热",color:"#F9908B"},
  34. {name:"平均温度",numName:"平均温度",color:"#ffffff"},
  35. ]
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="less" scoped>
  41. .legend{
  42. display: inline-block;
  43. color: #848484;
  44. &>div{
  45. display: inline-block;
  46. margin-right: 16px;
  47. &>span{
  48. display: inline-block;
  49. vertical-align: middle;
  50. margin-right: 4px;
  51. width:12px;
  52. height:12px;
  53. border:1px solid rgba(214,218,223,1);
  54. }
  55. }
  56. &>div:nth-child(4){
  57. position: relative;
  58. z-index: 2;
  59. &>span{
  60. width:8px;
  61. height:8px;
  62. border-radius: 50%;
  63. position: relative;
  64. border:2px solid #0091ff;
  65. }
  66. &>span.dotLine::after{
  67. content: '';
  68. box-sizing: content-box;
  69. top: 1px;
  70. left:-4px;
  71. z-index: -1;
  72. background: #0091ff;
  73. position: absolute;
  74. display: inline-block;
  75. width: 12px;
  76. height: 2px;
  77. }
  78. }
  79. }
  80. </style>