4.17Echarts前台项目- 项目的创建及准备-商家销售统计图表

4.17Echarts前台项目- 项目的创建及准备-商家销售统计图表

一.学习内容

1.1 项目的创建及准备

1.安装vue脚手架 npm install -g @vue/cli

2.创建vue项目文件 vue create vision(文件名)

3.项目的基本配置

  • 项目端口号的配置,以及浏览器是否自动打开,在vue.config.js文件中进行配置

    module.exports = {
      devServer: {
        port: 8999, //  端口号的配置
        open: true // 自动打开浏览器
      }
    }
    
  • 在public/index.html 引入echarts.js的文件<script src="static/lib/echarts.min.js"></script>

  • 在main.js文件中将全局的echarts对象挂载到Vue的原型对象上

    // 将全局的echarts对象挂载到Vue的原型对象上
    // 在组件中使用直接 this.$echarts
    Vue.prototype.$echarts = window.echarts
    
  • 下载并在main.js中引入,配置请求基准路径

    下载:npm install axios

 import axios from 'axios'
// 将axios挂载到Vue的原型对象上
// 在组件中使用直接 this.$http
Vue.prototype.$http = axios
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'

1.2商家销售统计

1.2.1组件的结构和布局

1.创建父组件SellerPage.vue和子组件Seller.vue

<template>
  <div class="com-page">
    <seller></seller>
  </div>
</template>
<script>
import Seller from '@/components/Seller'
export default {
  components: {
    seller: Seller
  }
}
</script>
//子组件Seller.vue
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>
export default {
}
</script>

2.在App.vue中进行路由占位符,用于当路由的地址符合路由要求的时候,会把路由的组件在界面中呈现,而这个界面是在 App.vue里面

<template>
  <div id="app">
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

3.在assets/css/global.less文件中设置存储图表的盒子,宽高,不设置将会导致图表不显示。

html, body, #app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.com-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.com-chart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

将其在main.js中进行引入

import './assets/css/global.less'
1.2.1 图表的显示及实现其基本功能

1.在子组件中创建图表

<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: [], // 服务器返回的数据
    };
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods: {
    // 1.初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref);
    },
    // 2.获取服务器的数据
    async getData() {
      // http://127.0.0.1:8888/api/seller
      const { data: ret } = await this.$http.get("seller");
      this.allData = ret;
         // 更新图表
      this.updateChart();
    },
    // 3.更新图表
    updateChart() {
      const sellerNames = this.showData.map((item) => {
        return item.name;
      });
      const sellerValues = this.showData.map((item) => {
        return item.value;
      });
      const dataOption = {
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: sellerNames,
        },
        series: [
          {
            type: "bar",
            data: sellerValues,
          },
        ],
      };
        //4.将配置项设置给chartInstance实例对象,渲染数据
      this.chartInstance.setOption(dataOption);
    },
  },
};
</script>
  <style lang="less" scoped>
</style>
  
2.实现动态数据刷新功能

目标:1.实现数递减排列。2.每页只展示五条数据,每3s后进行切换。3.鼠标移入图表停止切换。移除继续开始切换。

实现:

1.在获取数据后利用sort方法进行排列

2.初始化当前 currentpage: 1,总页数 totalpage: 0 以及当前要展示的数据showData: []

总页数:总数据/5,如果有余则加1.

showData:总数据进行分割this.allData.slice(start, end);

let start = (this.currentpage - 1) * 5;
let end = this.currentpage * 5;

currentpage:开启定时器,每3s,currentpage++,当前页加+1,但是当前页大于总页数要等于1

3.给图表对象绑定鼠标移入移出事件,移出,开启定时器,移入关闭定时器

<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: [], // 服务器返回的数据
      currentpage: 1,//当前页
      totalpage: 0,//总页数
      showData: [],//当前页要展示的数据
      timer:null//定时器的时间
    };
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref);
      this.chartInstance.on('mouseover',()=>{
          //关闭定时器
        clearInterval(this.timer)
      })
      this.chartInstance.on('mouseout',()=>{
          //开启定时器
        this.startInterval()
      })
    },
    // 获取服务器的数据
    async getData() {
      // http://127.0.0.1:8888/api/seller
      const { data: ret } = await this.$http.get("seller");
      this.allData = ret;
        //1.实现数递减排列
      this.allData.sort((a, b) => {
        return a.value - b.value;
      });
        //计算出总页数
      this.totalpage =
        this.allData.length % 5 === 0
          ? this.allData.length / 5
          : this.allData.length + 1;
        //更新图表
      this.updateChart();
      this.startInterval()
    },
    // 更新图表
    updateChart() {
      let start = (this.currentpage - 1) * 5;
      let end = this.currentpage * 5;
      this.showData = this.allData.slice(start, end);
      const sellerNames = this.showData.map((item) => {
        return item.name;
      });
      const sellerValues = this.showData.map((item) => {
        return item.value;
      });
      const dataOption = {
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: sellerNames,
        },
        series: [
          {
            type: "bar",
            data: sellerValues,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
        //开启定时器
    startInterval(){
      if(this.timer){
        clearInterval(this.timer)
      }
      this.timer=setInterval(()=>{
        this.currentpage++;
        if(this.currentpage>this.totalpage){
          this.currentpage=1
        }
          //更新图表
        this.updateChart()
      },3000)
    }
  },
};
</script>
  
  <style lang="less" scoped>
</style>

三.相关问题及解决

在这里插入图片描述

问题二:这个问题是由于我在初始化数据的数组时,将其设置为了null,导致在使用map遍历时,map只能遍历空数组和数组,,数据在还没有获取到时,数据为null,所以报以上错误。所以初始化为空数组即可解决。

在这里插入图片描述

问题三:数据获取到后,在经过一系列的操作,发现图表的数据不呈现在页面。

解决:是由于当我在设置图表的位置样式时,也就是图表呈现的容器,由于粗心,class样式名写错了,导致图表没有宽高容器,呈现不出来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值