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

添加菜单

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

但进入菜单后没了布局

还是在router里配置一下路由

 

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

 

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

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

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

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

<template>
  <div>
    <div ref="chart" style="height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.chart)

    // 指定图表的配置项和数据
    const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
       data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      }]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
}
</script>

改变一下xy轴的颜色

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

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

<template>
  <div ref="pieChart" style="height: 280px;"></div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "PieChart",
  props: {
    data: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: "Pie Chart"
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.pieChart);
      chart.setOption({
        title: {
          text: this.title,
          left: "center"
        },
        tooltip: {
          //鼠标滑过或点击时出现的提示框
          //show:true 是否显示
          trigger: "item", //触发类型
          //{a}表示列名 {b}表示数据名  {c}表示数据值
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          right: "right" //图例的布局
        },
        series: [
          {
            name: "24小时内",
            type: "pie", //设置为饼状图
            radius: ["40%", "70%"], //设置半径，数组【内半径，外半径】
            label: {
              //show:true//开启文本标签
              //position:"inside"        //outside外侧显示  inside本身 center 中心
            },
            //roseType:"area",//设置南丁格尔图
            itemStyle: {
              //阴影设置
              color: "white",
              shadowBlur: 200,
              shadowColor: "rgba(0,0,0,.5)"
            },
            data: this.data
          }
        ]
      });
    }
  }
};
</script>

 

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)"} }}
      ]
    };
  },
......