datafan.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <div class="saga-fill">
  3. <div class="mess-view">
  4. <el-tooltip class="item" effect="dark" :content="renderData.tips" placement="bottom-start">
  5. <i class="el-icon-info"><span>{{renderData.title}}</span></i>
  6. </el-tooltip>
  7. </div>
  8. <div class="doughnut-view">
  9. <fan-chart v-if="renderData.needCountO" type="type" width="200" height="200" :name="renderData.title" :renderData="echartsData" :id="id">
  10. </fan-chart>
  11. </div>
  12. <slot></slot>
  13. </div>
  14. </template>
  15. <script>
  16. import fanChart from "@/components/echarts/fanChart"
  17. export default {
  18. data() {
  19. return {
  20. echartsData: [],
  21. color: ["#AB7948", "#CAA679", "#DEC9A8", "#B3CFC4", "#7DAAA7", "#7484A6", "#9DABCB"]
  22. }
  23. },
  24. created() {
  25. this.echartsData = this.renderData.needCountO;
  26. // this.echartsData.forEach((item, index) => {
  27. // item.itemStyle = {
  28. // color: this.color[index]
  29. // }
  30. // })
  31. },
  32. components: {
  33. fanChart
  34. },
  35. methods: {
  36. },
  37. props: {
  38. id: {
  39. type: String,
  40. default: function createRandomId() {
  41. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  42. }
  43. },
  44. renderData: {
  45. type: Object,
  46. default: function () {
  47. return {}
  48. }
  49. }
  50. },
  51. }
  52. </script>
  53. <style lang="less" scoped>
  54. .mess-view {
  55. box-sizing: border-box;
  56. border-bottom: 1px solid #ddd;
  57. padding: 10px 20px 10px 15px;
  58. .saga-title {
  59. font-size: 14px;
  60. color: #333;
  61. font-weight: 600;
  62. line-height: 14px;
  63. }
  64. i {
  65. span {
  66. padding-left: 6px;
  67. }
  68. }
  69. }
  70. .saga-fill {
  71. width: 345px;
  72. // height: 220px;
  73. .doughnut-view {
  74. height: 165px;
  75. width: 100%;
  76. padding: 0 5px;
  77. box-sizing: border-box;
  78. }
  79. }
  80. </style>