ELeft2.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <div class="container">
  3. <div id="ELeft2" style="height:100%;"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "ELeft2",
  9. data() {
  10. return {};
  11. },
  12. mounted() {
  13. this.drawChart();
  14. },
  15. methods: {
  16. drawChart() {
  17. // 基于准备好的dom,初始化echarts实例
  18. let myChart = this.$echarts.init(document.getElementById("ELeft2"));
  19. // 指定图表的配置项和数据
  20. let option = {
  21. title: {
  22. text: "羊存栏种类",
  23. left: "20%",
  24. top: "5%",
  25. textStyle: {
  26. fontSize: 30
  27. }
  28. },
  29. tooltip: {
  30. trigger: "item",
  31. formatter: "{b}: {c} ({d}%)",
  32. textStyle: {
  33. fontSize: 20
  34. }
  35. },
  36. legend: {
  37. orient: "horizontal",
  38. bottom: 10,
  39. data: ["种母羊", "种公羊", "商品羊", "羔羊"],
  40. textStyle: {
  41. fontSize: 20
  42. }
  43. },
  44. series: [
  45. {
  46. type: "pie",
  47. // 内外圈厚度
  48. radius: ["20%", "60%"],
  49. label: {
  50. formatter: "{d}%"
  51. },
  52. data: [
  53. { value: 300, name: "种母羊" },
  54. { value: 300, name: "种公羊" },
  55. { value: 200, name: "商品羊" },
  56. { value: 200, name: "羔羊" }
  57. ],
  58. color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
  59. label: {
  60. fontSize: 20
  61. }
  62. }
  63. ]
  64. };
  65. // 使用刚指定的配置项和数据显示图表。
  66. myChart.setOption(option);
  67. },
  68. },
  69. };
  70. </script>
  71. <style lang="scss" scoped>
  72. </style>