vue3+echarts：Vue中使用echarts从后端获取数据并赋值显示

本文主要是介绍vue3+echarts：Vue中使用echarts从后端获取数据并赋值显示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

//由于前后端交互,所以使用axios发送请求
const Count = ref(null); //设备种类数值
const Name = ref(null); //设备种类名称
//设备种类 饼图
const pieChart = () => {const getpieChart = echarts.init(document.getElementById("deviceKind"));// 创建图标getpieChart.setOption({tooltip: {trigger: "item",},legend: {top: "25%",right: "right",textStyle: {color: "rgba(217,215,218,1.000)",},},series: [{name: "Access From",type: "pie",radius: ["40%", "70%"],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: "#fff",borderWidth: 2,},label: {show: false,position: "center",},emphasis: {label: {show: true,fontSize: "40",fontWeight: "bold",},},labelLine: {show: false,},data: null,},],});//echarts异步加载，获取后端数据CenterOverviewType().then((res) => {if (res.status === 200) {//将二维数组拆分Count.value = res.data.data.deviceTypeCount;Name.value = res.data.data.deviceTypeName;for (const key in Count.value) {deviceChartsData.push({name: Name.value[key],value: Count.value[key],});}//饼图重新赋值datagetpieChart.setOption({series: [{data: deviceChartsData, //赋值},],});}});
};

上一篇文章，

uniapp踩坑之项目：简易版不同角色显示不一样的tabbar和页面-CSDN博客文章浏览阅读29次。uniapp踩坑之项目：简易版不同角色显示不一样的tabbar和页面。在uni_modules文件夹创建底部导航cc-myTabbar文件夹，在cc-myTabbar文件夹创建components文件夹，在components文件夹创建cc-myTabbar.vue组件。显示第几个tabbar，0是首页 1是财务 2是司机。pages下创建三个不同用户身份的“我的”页面。在utils文件夹创建tabBar.js。pages.json里指定路径。在单页面引入底部导航组件。https://blog.csdn.net/weixin_43928112/article/details/136041617