//由于前后端交互,所以使用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],
});
}
//饼图重新赋值data
getpieChart.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