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

意初

已于 2024-02-05 15:07:17 修改

阅读量3.6k

点赞数 6

CC 4.0 BY-SA版权

文章标签： echarts vue.js 前端 javascript es6

于 2024-02-05 15:06:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43928112/article/details/136042118

文章介绍了如何利用axios进行前后端交互，获取数据并用echarts绘制设备种类饼图。同时，详细讲解了在uniapp中根据不同用户身份设置动态tabbar和页面导航的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//由于前后端交互,所以使用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和页面-优快云博客文章浏览阅读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.youkuaiyun.com/weixin_43928112/article/details/136041617