微信小程序 Echarts 饼图图表组件使用详解及代码注释

// 导入echarts库\nimport * as echarts from '../../components/ec-canvas/echarts'\n\n// 初始化图表的函数\nfunction initChart(canvas, width, height, dpr) {\n // 创建一个echarts实例\n const chart = echarts.init(canvas, null, {\n width: width,\n height: height,\n devicePixelRatio: dpr\n });\n // 将图表实例绑定到canvas上\n canvas.setChart(chart);\n\n // 发起一个GET请求，获取后台接口的数据\n wx.request({\n url: '后台接口的URL',\n method: 'GET',\n success: function(res) {\n var data = res.data; // 后台返回的动态数据\n\n // 设置图表的配置项和数据\n var option = {\n backgroundColor: "#ffffff",\n series: [{\n label: {\n normal: {\n fontSize: 14\n }\n },\n type: 'pie',\n center: ['50%', '50%'],\n radius: ['20%', '40%'],\n data: data // 使用后台返回的数据\n }]\n };\n // 将配置项应用到图表实例上\n chart.setOption(option);\n }\n });\n\n return chart;\n}\n\nPage({\n data: {\n // 页面数据\n ec: {\n // echarts的初始化配置\n onInit: initChart\n }\n }\n})