Vue+Echarts: 实现饼状图的详细教程

npm install echarts --save

1. import echarts from 'echarts'
2. 
3. export default {
4. data() {
5. return {
6. chart: null,
7. chartData: {
8. // 这里是你要绘制的饼图数据
9.       }
10.     }
11.   },
12. mounted() {
13. // 创建一个 ECharts 实例
14. this.chart = echarts.init(this.$refs.chart)
15. // 在 ECharts 实例中配置图表
16. this.chart.setOption(this.getOption())
17.   },
18. methods: {
19. getOption() {
20. return {
21. // 这里是你的 ECharts 配置项
22.       }
23.     }
24.   }
25. }

1. methods: {
2. getOption() {
3. return {
4. title: {
5. text: '饼图标题',
6. subtext: '饼图副标题',
7. left: 'center'
8.         },
9. tooltip: {
10. trigger: 'item',
11. formatter: '{a} <br/>{b}: {c} ({d}%)'
12.         },
13. legend: {
14. orient: 'vertical',
15. left: 10,
16. data: ['数据1', '数据2', '数据3', '数据4', '数据5']
17.         },
18. series: [
19.           {
20. name: '饼图名称',
21. type: 'pie',
22. radius: ['50%', '70%'],
23. avoidLabelOverlap: false,
24. label: {
25. show: false,
26. position: 'center'
27.             },
28. emphasis: {
29. label: {
30. show: true,
31. fontSize: '30',
32. fontWeight: 'bold'
33.               }
34.             },
35. labelLine: {
36. show: false
37.             },
38. data: [
39.               {value: 335, name: '数据1'},
40.               {value: 310, name: '数据2'},
41.               {value: 234, name: '数据3'},
42.               {value: 135, name: '数据4'},
43.               {value: 1548, name: '数据5'}
44.             ]
45.           }
46.         ]
47.       }
48.     }
49.   }

1. <template>
2. <div ref="chart" style="width: 100%; height: 400px;"></div>
3. </template>

1. <template>
2. <div>
3. <div class="content-inner chart-style" ref="chart"></div>
4. </div>
5. </template>
6. 
7. <script>
8. import echarts from "echarts";
9. 
10. export default {
11. name: "echartsTool",
12. props: {
13. charData: {
14. type: Object
15.     },
16. charTitle: {
17. type: String
18.     }
19.   },
20. data() {
21. return {
22. chart: null,
23. pieData: []
24.     };
25.   },
26. watch: {
27. charData: {
28. handler() {
29. this.renderChart();
30.       },
31. deep: true
32.     }
33.   },
34. mounted() {
35. // 在组件mounted时绑定resize事件，当窗口大小发生变化时自动调整图表大小
36. window.addEventListener("resize", this.handleResize);
37. // 创建Echarts实例并绘制饼状图
38. this.creatCharts();
39.   },
40. beforeDestroy() {
41. // 在组件销毁前解绑resize事件
42. window.removeEventListener("resize", this.handleResize);
43.   },
44. methods: {
45. async creatCharts() {
46. this.renderChart();
47.     },
48. // 处理resize事件，调整图表大小
49. handleResize() {
50. if (this.chart) {
51. // 调用Echarts实例的resize方法，重新绘制图表
52. this.chart.resize();
53.       }
54.     },
55. renderChart() {
56. const chart = echarts.init(this.$refs.chart);
57. let option;
58. if (this.charData.length > 0) {
59.         option = {
60. title: {
61. text: this.charTitle,
62. textStyle: {
63. fontWeight: "normal",
64. fontSize: 16
65.             },
66. left: "center"
67.           },
68. color: ["#6395F9", "#62DAAB", "#657798", "#F6C022", "#E96C5B", "#74CBED", "#9968BD", "#FF9D4E", "#299998"],
69. tooltip: {
70. trigger: "item",
71. formatter: "{b}：{d}%"
72.           },
73. series: [
74.             {
75. type: "pie",
76. radius: ["60%", "90%"],
77. top: 6,
78. bottom: 25,
79. left: "center",
80. textStyle: {
81. color: "#999",
82. fontSize: "12px"
83.               },
84. itemWidth: 6,
85. itemHeight: 6,
86. label: {
87. show: true,
88. formatter: "{b}: {d}%"
89.               },
90. data: this.charData
91.             }
92.           ]
93.         };
94.       } else {
95.         option = {
96. title: {
97. text: this.charTitle,
98. textStyle: {
99. fontWeight: "normal",
100. fontSize: 16
101.             },
102. left: "center"
103.           },
104. tooltip: {
105. trigger: "none"
106.           },
107. color: ["#d3d3d3"],
108. series: [
109.             {
110. type: "pie",
111. radius: ["60%", "90%"],
112. left: "center",
113. label: {
114. show: true,
115. formatter: "{b}"
116.               },
117. data: [{ value: 1, name: "暂无数据" }]
118.             }
119.           ]
120.         };
121.       }
122. 
123.       chart.setOption(option);
124. this.chart = chart;
125.     }
126.   }
127. };
128. </script>