第二十六课 后台管理编写折线图

一、安装ECharts

终端：cnpm  i echarts -S

二、在src/view/home/index.vue编写

1）第一个需要注意：需要给div加入宽度和高度 2）导入的时候需要用import * as echarts from "echarts";

<template>
  <div>
    <div ref="chartDemodiv" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartDemo: null,
      bookTypeData:{
        bookType:[],
        quantitySum:[]
      }
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      this.chartDemo = echarts.init(this.$refs["chartDemodiv"]);
      this.chartDemo.setOption({
        title: {
          text: "库存数量",
          left: "center",
          textStyle: {
            color: "#333",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: 30,
          data: [
            {
              name: "库存数量",
              icon: "circle",
              textStyle: {
                color: "#545c64",
                fontFamily: "微软雅黑",
                fontSize: 16,
              },
            },
          ],
        },
        xAxis: {
          type: "category",
          data: ["编程类", "设计类", "前端类", "移动开发"],
        },
        yAxis: {
          type: "value",
          min: 500,
          interval: 50,
        },
        series: [
          {
            name: "库存数量",
            data: [620, 932, 901, 934],
            type: "line",
          },
        ],
      });
    },
  },
};
</script>

三、编写后台折线图的接口

server-api/mocks/getTpeSum.js

/**
 * 折线图的接口
 *
 * @url getTpeSum
 *
 */

module.exports = function (req) {
    return {
        code: 200,
        flag: true,
        message: "数据查询成功",
        data:
        {
            "bookType": ["设计类", "前端类", "编程类", "移动开发"],
            "quantitySum": [550, 800, 600, 860]
        }
    }
};

四、编写封装接口api

src/api/bookinfo.js

 getTypeSum(){
        return myaxios({
            url:"/getTpeSum",
            method:"get"
        })
 },
 getBookTypeSum(){
      bookinfoApi.getTypeSum().then(respnonse=>{
        const resp = respnonse.data;
        if(resp.flag){
          this.bookTypeData.bookType = resp.data.bookType;
          this.bookTypeData.quantitySum = resp.data.quantitySum;
          this.drawLine();
        }else{
          this.$message({
            message:resp.message,
            type:"warning"
          })
        }
      })
    },
    
    
    

五、把取出来的数据回显到echars中

mounted() {
    this.getBookTypeSum();
},
  
 xAxis: {
          type: "category",
          data: this.bookTypeData.bookType,
        },
        yAxis: {
          type: "value",
          min: 500,
          interval: 50,
        },
        series: [
          {
            name: "库存数量",
            data: this.bookTypeData.quantitySum,
            type: "line",
          },
        ],
    

六、把配置项可以移动到computed中

computed:{
    options(){
      const option = {
        title: {
          text: "库存数量",
          left: "center",
          textStyle: {
            color: "#333",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: 30,
          data: [
            {
              name: "库存数量",
              icon: "circle",
              textStyle: {
                color: "#545c64",
                fontFamily: "微软雅黑",
                fontSize: 16,
              },
            },
          ],
        },
        xAxis: {
          type: "category",
          data: this.bookTypeData.bookType,
        },
        yAxis: {
          type: "value",
          min: 500,
          interval: 50,
        },
        series: [
          {
            name: "库存数量",
            data: this.bookTypeData.quantitySum,
            type: "line",
          },
        ],
      }
      return option;
    }
  },
  
  
   drawLine() {
      this.chartDemo = echarts.init(this.$refs["chartDemodiv"]);
      this.chartDemo.setOption(this.options,true);
    },
  

this.chartDemo.setOption(this.options,true); 为true的意思是在切换页面时可以重新渲染

七、用watch监听配置选择的变化

watch:{
   options(newVal,oldVal){
     if(newVal!==oldVal){
       this.chartDemo.setOption(newVal)
     }
   }
 }

八、当浏览器窗口变化时进行自适应

drawLine() {
      this.chartDemo = echarts.init(this.$refs["chartDemodiv"]);
      this.chartDemo.setOption(this.options,true);
      window.addEventListener("resize",this.chartDemo.resize)
},

九、图标类型

1）type:'bar' 柱状/ 条形图

2）type:'line' 折线图

3）type:'pie' 饼图

4）type:'scatter' 散点图

5）type:'effectScatter' 带有涟漪特效动画散点（气泡）

6）type:'radar' 雷达图

7）type:'tree' 树型图

8）type:'treemap' 旭日图

9）type:'candlestick' k线图

10）type:'heatmap' 热力图

11）type:'map' 地图

12）type:'parallel' 平行坐标系的系列

13）type:'lines' 线图

14）type:'graph' 关系图

15）type:'sankey' 桑基图

16）type:'funne' 漏斗图

17）type:'gauge' 仪表图

18）type:'pictorialBar' 象牙图

19）type:'themeRiver' 主题河流

20）type:'custom' 自定义系列