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

最新推荐文章于 2023-05-05 21:18:34 发布

#丸子头

最新推荐文章于 2023-05-05 21:18:34 发布

阅读量135

点赞数

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_69333225/article/details/130314205

版权

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>