evSatisfactionRate.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <div id="box1" style="width:100%;height:100%;"></div>
  3. </template>
  4. <script>
  5. import echarts from "echarts";
  6. export default {
  7. data() {
  8. return {};
  9. },
  10. props: ["tindoorFillRate"],
  11. mounted() {
  12. this.pie(this.tindoorFillRate || 0, "#box1", ["#0091FF", "#E1F2FF"]);
  13. },
  14. methods: {
  15. pie(pieData, box, colors) {
  16. const that = this;
  17. const myChart = echarts.init(document.querySelector(box));
  18. const data = pieData;
  19. const option = {
  20. grid: {
  21. top: 5,
  22. bottom: 5
  23. },
  24. color: colors,
  25. series: [
  26. {
  27. name: "valueOfMarket",
  28. type: "pie",
  29. center: ["50%", "50%"],
  30. radius: ["60%", "70%"],
  31. avoidLabelOverlap: false,
  32. hoverAnimation: false,
  33. label: {
  34. normal: {
  35. show: true,
  36. position: "center",
  37. color: "#000000",
  38. fontSize: 20,
  39. lineHeight: 0,
  40. formatter: "{b}\n{c}%"
  41. }
  42. },
  43. data: [
  44. {
  45. value: data,
  46. label: {
  47. normal: {
  48. show: true
  49. }
  50. }
  51. },
  52. {
  53. value: 100 - data,
  54. name: "",
  55. label: {
  56. normal: {
  57. show: false
  58. }
  59. }
  60. }
  61. ]
  62. }
  63. ]
  64. };
  65. myChart.setOption(option);
  66. }
  67. }
  68. };
  69. </script>