美文网首页
loading全局样式的设置,echarts用法

loading全局样式的设置,echarts用法

作者: 随风飞2019 | 来源:发表于2020-02-08 22:06 被阅读0次

全局请求器和响应器上加loading样式
请求发起后,开启loading效果
请求结束后,关闭loading效果
需要注意的是,开启时生成一个loading实例,关闭时把这个实例结束掉即可

import { Loading } from 'element-ui'
let loadingInstace;
在请求器中间,return config之前,加入loadingInstace = Loading.service();
在响应器中间,返回数据和返回错误之前,加入loadingInstace.close();
echarts简单实用方法
1. npm i echarts -S;  //安装echarts包
2. 在需要实用的组件或页面中,script顶部引入import echarts from "echarts"
3. 模板里面,加入一个div,放图标区域<div id="charts" ref="echarts"></div>
4. 在mounted里面,请求数据,设置选项,完成渲染
let temp = await this.$http.get("/userlist");
    this.tableData = temp.res;
    let man = temp.res.filter(item=>{
      return item.sex=="m"
    });   //获取到echartsOption下面要用的数据
    let woman = temp.res.filter(item=>{
      return item.sex=="f"
    });
    let echartsOption = {
        title: {
          text: "注册人员性别比例"
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "性别",
            type: "pie",
            data: [
              { name: "男", value: man.length },  //这里是真正的数据
              { name: "女", value: woman.length }
            ]
          }
        ]
      };
    const myChart = echarts.init(this.$refs.echarts);  //vue里面进来避免直接操作dom
    myChart.setOption(echartsOption);

相关文章

网友评论

      本文标题:loading全局样式的设置,echarts用法

      本文链接:https://www.haomeiwen.com/subject/tkewxhtx.html