若依框架前端笔记echarts折线图和饼状图

添加菜单

可以直接在数据库中添加，菜单数据是从后端数据库返回的，在数据库中添加首页数据条目menu_type区别M为主菜单，C为item。

但进入菜单后没了布局

还是在router里配置一下路由

 

 用element ui布局成3*3的样式

 

height：100%是铺满父容器的高度。

height：100vh是指铺满屏幕的高度。

%没生效，父容器已经设置了宽高100%，那就用vh

直接在页面上写一个折线图

改变一下xy轴的颜色

 xAxis: {
        axisLabel: {
          textStyle: {
            color: "blue" // 设置 x 轴标签字体颜色为蓝色
          }
        },
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "white"
          }
        },
        type: "value"
      },

再写一个饼状图的模块加进去

 

import PieChart from "./test/PieChart.vue";
export default {
  components: {
    PieChart
  },
  data() {
    return {
      pieData: [
        { value: 6, name: "sleep",itemStyle:{normal:{color:"rgb(0,175,80)"}}},
        { value: 0.6, name: "food",itemStyle:{normal:{color:"rgb(175,80,80)"}}},
        { value: 0.4, name: "shower",itemStyle:{normal:{color:"rgb(50,15,80)"}} },
        { value: 10, name: "read",itemStyle:{normal:{color:"rgb(80,70,200)"} }},
        { value: 7, name: "word",itemStyle:{normal:{color:"rgb(225,175,80)"} }}
      ]
    };
  },
......