Vue echarts实例项目商家销量统计图实现详解

目录
  • 组件结构设计
  • 发送请求获取对应的数据并进行相应操作
  • 当窗口尺寸发生变化时的操作

总体效果如图

组件结构设计

SellerPage.vue

<!--针对于/sellerpage 这条路径显示 测试显示组件-->
<template>
<div class="comP1">
  <Seller></Seller>
</div>
</template>
<script>
  import Seller from "@/components/Seller";
  export default {
    name: "SellerPage",
    components:{Seller}
  }
</script>
<style scoped>
</style>

Seller.vue

<!-- 显示商家销量统计的图表 -->
<template>
<div class="comP2" ref="seller_1"></div>
</template>
<script>
export default {
data () {
return {}
},
methods: {}
}
</script>
<style lang="less" scoped>
</style>

接下来就在 Seller.vue 搞事情了

在mounted生命周期中初始化 echartsInstance 对象

因为在组件挂载到页面上 echarts 才能找到具体的DOM渲染

methods 里定义 initChart 方法this.$refs.seller_1 找到具体盒子

this.theme 主题 来自于 Vuex 使用映射快捷引入

import {mapState} from "vuex";
computed:{
    ...mapState(['theme'])
},

然后就是设置配置项 在之前的基础都有讲到过

新增了柱状图渐变设置 可以详看注释

鼠标移入和移出时间 用来停止和开启定时器 后面会用到

      methods:{
     // 初始化echarts 实例对象
      initChart(){
        this.chartsInstance = this.$echarts.init(this.$refs.seller_1,this.theme)
        const initOption = {
            title:{
                text:'▎销售业绩统计',
                left:20,
                top:15
            },
            grid:{
                top: '24%',
                left: '3%',
                right:'6%',
                bottom:'3%',
                containLabel: true // 距离是包含坐标轴上的文字
            },
            xAxis:{
                type:'value',
            },
            yAxis:{
                type: 'category',
            },
            tooltip:{
                trigger:'axis',
                axisPointer:{
                    type:'line',
                    z:0,
                    lineStyle:{
                        color:'#2d3443'
                    }
                }
            },
            series:[
                {
                    type:'bar', // 柱状图
                    label:{
                        show:true,// 显示柱内数值
                        position:'right',// 数值显示位置
                        textStyle: {
                            color:'#fff'// 数值显示颜色
                        }
                    },
                    itemStyle:{
                        // 设置渐变 x1,y1,x2,y2(指明渐变的方向) [{指明不同百分比下颜色的值}]
                        color:new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset:0,
                                color:'#5052ee'
                            },
                            {
                                offset: 1,
                                color: '#ab6ee5'
                            }
                        ])
                    }
                },
            ]
        }
          this.chartsInstance.setOption(initOption)
        // 对图表进行 鼠标移入移出 事件的监听
        this.chartsInstance.on('mouseover',()=>{
            clearInterval(this.timerID)
        })
        this.chartsInstance.on('mouseout',()=>{
            this.startInterval()
        })
      },
}

发送请求获取对应的数据并进行相应操作

使用到的data:

    data(){
      return{
        chartsInstance:null, 图表的实例对象 初始化后赋值给它
        allData:null, 请求过来的数据
        currentPage:1, 当前页码 定时器进行改变 来截取哪些数据展示
        totalPage:0, 总页数
        timerID:null 定时器的ID 用于启停
      }
    },

直接使用 注册的 axios =>$http.get 来获取 并通过 async await 简化 解构出来

进行 sort 排序操作

计算出 每页显示5条信息的情况下 总页数是多少 能被5整除就直接用 整除不了就再加一页

     async getData(){
        const {data:res} = await this.$http.get('seller')
        this.allData = res
        // 对数据进行排序
        this.allData.sort((a,b) =>{
            return a.value - b.value // 从小到大排序
        })
        // 每五个数据 显示一页
        this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : Math.floor(this.allData.length / 5) + 1
        this.updateChart()
        this.startInterval()
      }

数据和页码转存到 data 里了 可以更新设置 把图表渲染出来

当期页码默认是1 就截取 0-5的索引

在使用 map 生成新的数组 用于 x轴 和 y轴

最后更新配置项 配置项会自动整合

     // 更新图表
      updateChart(){
        const start = (this.currentPage - 1) * 5
        const end = this. currentPage * 5
        const showData = this.allData.slice(start,end) // slice 截取 不包括 end
        const sellerNames = showData.map((item) =>{
          return item.name
        })
        const sellerValues = showData.map((item) =>{
          return item.value
        })
        const dataOption = {
            yAxis:{data:sellerNames},
            series:[{data:sellerValues}]
        }
        this.chartsInstance.setOption(dataOption)
      },

当第一页的数据展示出来时就可以开启定时器了

开始之前先清除之前的定时器(来回切换页面后 回到最初的数据)

页码累计相加 到最大值再返回到1

改变 当前页的同时 调用更新图表数据的方法

鼠标移入移出 启停定时器的方法 在注册实例的时候已经添加

      // 开启定时器
      startInterval(){
          if (this.timerID){
              clearInterval(this.timerID)
          }
          this.timerID = setInterval(()=>{
              this.currentPage++
              if (this.currentPage > this.totalPage){
                  this.currentPage = 1
              }
              this.updateChart()
          },3600)
      },

小细节

xAxis:{
    type:'value',
    // 细节处理 固定x轴的最大值
    max:this.allData[this.allData.length -1].value
},

当窗口尺寸发生变化时的操作

自己定义一个 合适 简易的 rem :当前窗口栅格化100份 * 3.6

根据这个数据 设定 标题大小 提示文字大小 柱状图的宽度和 圆角尺寸

初始化页面时 调用一次 之后 跟随窗口事件调用

mounted() {
  window.addEventListener('resize',this.screenAdapter)
  this.screenAdapter()
},
      // 当浏览器宽度发生变化时
      screenAdapter(){
        const titleFontSize = this.$refs.seller_1.offsetWidth / 100 * 3.6
        // 分辨率改变时更新的配置
        const adapterOption = {
            title:{
                textStyle:{
                    fontSize: titleFontSize
                }
            },
            tooltip:{
                axisPointer:{
                    lineStyle:{
                        width:titleFontSize,
                    }
                }
            },
            series:[
                {
                    type:'bar', // 柱状图
                    barWidth:titleFontSize,// 柱状宽度
                    itemStyle:{
                        barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],// 柱状的圆角
                    }
                },
            ]
        }
        this.chartsInstance.setOption(adapterOption)
        this.chartsInstance.resize()
      }

到此这篇关于Vue echarts实例项目商家销量统计图实现详解的文章就介绍到这了,更多相关Vue 销量统计图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue echarts模拟后端数据流程详解

    目录 KOA2的使用 安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件 写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可 以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口 模拟服务

  • vue中的echarts实现宽度自适应的解决方案

    今天项目中需要使用到 echarts 为了自适应.找到了.以下解决方案. 效果图 代码 <template> <!-- 这是图表开始 --> <div class="chart"> <div ref="main1" style="width: 600px;height:400px;" ></div> <div ref="main2" style="wi

  • vue项目中vue-echarts讲解及常用图表实现方案(推荐)

    目录 1.图表主题颜色的修改 2.XY轴体颜色和文本颜色修改 3.横向柱状图的显示 4.过滤xy轴文本内容 5.Y轴文本显示在轴线内 6.在柱状条头部添加标签内容 7.自定义图例修改 8.环比图中间显示内容 图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者

  • Vue echarts画甘特图流程详细讲解

    vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.具体页面使用: <template> <div class="about"> <h1>This is echart

  • vue中设置echarts宽度自适应的代码步骤

    目录 问题描述 无自适应效果图 有自适应效果图 代码步骤 问题描述 我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果 无自适应效果图 我们发现echarts图的宽度并没有随着页面宽度的变化而变化 有自适应效果图 很显然,这个才是我们想要的效果 代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行

  • Vue中使用Echarts可视化图表宽度自适应的完美解决方案

    目录 一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E

  • Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    最终效果如图 组件结构设计 外部 Trendpage.vue <!--针对于/trendpage 这条路径显示 测试显示组件--> <template> <div class="comP1"> <Trend></Trend> </div> </template> <script> import Trend from "@/components/Trend"; export

  • Vue echarts实例项目商家销量统计图实现详解

    目录 组件结构设计 发送请求获取对应的数据并进行相应操作 当窗口尺寸发生变化时的操作 总体效果如图 组件结构设计 SellerPage.vue <!--针对于/sellerpage 这条路径显示 测试显示组件--> <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle

  • vue 2.0项目中如何引入element-ui详解

    前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

  • vue+echarts实现中国地图流动效果(步骤详解)

    @vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤: 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo

  • vue打开其他项目页面并传入数据详解

    1.不跨域,携带sessionstorage打开 主页面,存储sessionstorage后,打开页面 let data = { text:'我是数据' }; let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|

  • vue整合项目中百度API示例详解

    目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri

  • Vue项目接入Paypal实现示例详解

    一.支付流程 在paypal的官网上给出了这个按钮内部封装的流程,整个流程只需要用户点击按钮,触发创建订单事件,然后我们再监听用户支付成功的回调,拿到订单id传给后端,让后端再进行一次校验. 二.实现方案 接入方式 优点 缺点 相关资料 在html中插入paypal的script脚本 实现方式比较简单 1.安全性问题:公司的client_id会暴露在代码中 2.引用的按钮样式比较难自定义 官方文档:https://developer.paypal.com/docs/checkout/integr

  • vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

  • Vue.js 中的 v-cloak 指令及使用详解

    先来看下vue.js 中的v-cloak 指令 可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

随机推荐