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

意初2024-02-06 9:38

javascript 复制代码

//由于前后端交互,所以使用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