center-bottom.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <div class="center_bottom">
  3. <Echart
  4. :options="options"
  5. id="bottomLeftChart"
  6. class="echarts_bottom"
  7. ></Echart>
  8. </div>
  9. </template>
  10. <script>
  11. import { currentGET } from "api";
  12. import { graphic } from "echarts";
  13. export default {
  14. data() {
  15. return {
  16. options: {},
  17. };
  18. },
  19. props: {},
  20. mounted() {
  21. this.getData();
  22. },
  23. methods: {
  24. getData() {
  25. this.pageflag = true;
  26. currentGET("big6", { companyName: this.companyName }).then((res) => {
  27. console.log("安装计划", JSON.stringify(res));
  28. if (res.success) {
  29. this.init(res.data);
  30. } else {
  31. this.pageflag = false;
  32. this.$Message({
  33. text: res.msg,
  34. type: "warning",
  35. });
  36. }
  37. });
  38. },
  39. init(newData) {
  40. this.options = {
  41. tooltip: {
  42. trigger: "axis",
  43. backgroundColor: "rgba(0,0,0,.6)",
  44. borderColor: "rgba(147, 235, 248, .8)",
  45. textStyle: {
  46. color: "#FFF",
  47. },
  48. formatter: function (params) {
  49. // 添加单位
  50. var result = params[0].name + "<br>";
  51. params.forEach(function (item) {
  52. if (item.value) {
  53. result +=
  54. item.marker +
  55. " " +
  56. item.seriesName +
  57. " : " +
  58. item.value +
  59. "元</br>";
  60. } else {
  61. result += item.marker + " " + item.seriesName + " : - </br>";
  62. }
  63. });
  64. return result;
  65. },
  66. },
  67. legend: {
  68. data: ["品类销售分布"],
  69. textStyle: {
  70. color: "#B4B4B4",
  71. },
  72. top: "0",
  73. },
  74. grid: {
  75. left: "50px",
  76. right: "40px",
  77. bottom: "30px",
  78. top: "20px",
  79. },
  80. xAxis: {
  81. data: newData.category,
  82. axisLine: {
  83. lineStyle: {
  84. color: "#B4B4B4",
  85. },
  86. },
  87. axisTick: {
  88. show: false,
  89. },
  90. },
  91. yAxis: [
  92. {
  93. splitLine: { show: false },
  94. axisLine: {
  95. lineStyle: {
  96. color: "#B4B4B4",
  97. },
  98. },
  99. axisLabel: {
  100. formatter: "{value}",
  101. },
  102. },
  103. {
  104. splitLine: { show: false },
  105. axisLine: {
  106. lineStyle: {
  107. color: "#B4B4B4",
  108. },
  109. },
  110. axisLabel: {
  111. formatter: "{value}% ",
  112. },
  113. },
  114. ],
  115. series: [
  116. {
  117. name: "销售额",
  118. type: "bar",
  119. barWidth: 15,
  120. itemStyle: {
  121. borderRadius: 0,
  122. color: new graphic.LinearGradient(0, 0, 0, 1, [
  123. { offset: 0, color: "#956FD4" },
  124. { offset: 1, color: "#3EACE5" },
  125. ]),
  126. },
  127. data: newData.barData,
  128. },
  129. ],
  130. };
  131. },
  132. },
  133. };
  134. </script>
  135. <style lang="scss" scoped>
  136. .center_bottom {
  137. width: 100%;
  138. height: 95%;
  139. .echarts_bottom {
  140. width: 100%;
  141. height: 100%;
  142. }
  143. }
  144. </style>