vue 把echarts封装成一个方法 并且从后端读取数据 +转换数据格式 =动态echarts 联动echarts表

2023-09-18 20:25:55

1.把echarts 在 methods 封装成一个方法mounted 在中调用

折线图 和柱状图

mounted调用下边两个方法

  mounted(){//最早获取DOM元素的生命周期函数 挂载完毕
    console.log('mounted-id' , document.getElementById('charts'))
      this.line()
      this.pie()
    },

methods里边的方法

line() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('charts'));
      // 绘制图表
      myChart.setOption({
        tooltip: {//提示框组件
          trigger: 'axis',
        },
        legend: {},
        toolbox: {
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            // restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {//x轴数据
         data: [120, 200, 150, 80, 70, 110, 130],
        },
        yAxis: {//y轴会自动创建数据
        },
        series: [//图表内容
          {
            name: '销售额',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],,
            smooth: true,//是否平滑曲线显示
          },
          {
            name: '销售量',
            type: 'bar',
             data: [120, 200, 150, 80, 70, 110, 130],
          }

        ]
      });
    },

饼图

 pie(){
       let myChart = echarts.init(document.getElementById('pie'));
        myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      });
    },

注意的地方:created调用location事件时获取dom对象，是不行的，因为在created钩子函数中是获取不到dom的，我们可以使用mounted钩子替换成created钩子

从后端取数据

发现后端给我们返回的不是echarts的格式 ，这个时候我们做一个操作
在这里插入图片描述
下一步操作 遍历内容 数据格式转换
在这里插入图片描述

最后一步 在echarts柱状图或者折线图里边去显示这些数据

    methods:{
        // -----获取图标动态数据
        async format(){
          let res = await this.$api.format()
          console.log('获取图标动态数据---',res.data);
          console.log(res.data.result.data.sale_money);//[{}{}]
          // 折线图 柱状图数据格式:[xx,xx,xx]
          // 获取x轴的数据名称
          let arr = res.data.result.data.sale_money;//拿到数据
          let arrx = []
          let total = []
          let money = []
          arr.forEach((ele)=>{//ele是取每一项
             arrx.push(ele.name)
             total.push(ele.num)
             money.push(ele.total_amount)
          })
             console.log(arrx);
             console.log(total);
             console.log(money);
             this.line(arrx,money,total)
        },
         //绘制图表--折线------------------
      line(arrx,money,total) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('charts'));
        // 绘制图表
        myChart.setOption({
          tooltip: {//提示框组件
            trigger: 'axis',
          },
          legend: {},
          toolbox: {
            feature: {
              // dataZoom: {
              //   yAxisIndex: 'none'
              // },
              // restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {//x轴数据
            data:arrx,
          },
          yAxis: {//y轴会自动创建数据
          },
          series: [//图表内容
            {
              name: '销售额',
              type: 'line',
              data:money,
              smooth: true,//是否平滑曲线显示
            },
            {
              name: '销售量',
              type: 'bar',
              data: total,
            }

          ]
        });
      },
      },

饼状图取数据 发现

在这里插入图片描述
数据循环遍历+数据格式转换

    let pieData = []
          arr.forEach((ele)=>{//ele是取每一项
            //饼图--对象数据
            let obj={}
            obj.name = ele.name;
            obj.value = ele.total_amount;
            pieData.push(obj)//[{name:,value:},{},{}]
          })
             console.log('饼图',pieData);

饼图最后一步 在echarts柱状图或者折线图里边去显示这些数据

   //绘制饼图
    pie(pieData) {
      var myChart = echarts.init(document.getElementById('pie'));
      var option;
      option = {
        tooltip: {
          trigger: 'item',
          formatter:'{a}<br/>{b}:{d}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '产品销售额',
            type: 'pie',
            radius: '50%',
            data:pieData,
            // data: [//[{},{}]
            //   { value: 1048, name: '审议' },
            //   { value: 735, name: '淘宝' },
            //   { value: 580, name: '京东' }
            // ],
            emphasis: {//高亮配置
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },

在这里插入图片描述
全部代码

<template>
  <div class="home">
    <!--1.  顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class='num'>{{ totalData.saleTotal | num}}</div>
        <div class="bottom">今日销售额:{{totalData.sale | num}}</div>
      </div>
      <div class="item">总访问量
        <div class='num'>{{ totalData.viewsTotal | num}}</div>
         <div class="bottom">今日访问量:{{totalData.views | num}}</div>
      </div>
      <div class="item">总收藏量
        <div class='num'>{{ totalData.collectTotal | num  }}</div>
         <div class="bottom">今日销售额:{{ totalData.collectTotal | num}}</div>
      </div>
      <div class="item">总支付量
        <div class='num'>{{totalData.payTotal | num }}</div>
         <div class="bottom">今日支付量:{{ totalData.pay | num}}</div>
      </div>
    </div>

      <!--2. 访问数据统计 ----------------->
      <div class="content">
      <div class="time-info" id='box13'>
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px"></div>
      </div>
      <div class="area" id="box1">
         <div class="title">产品销售比例</div>
        <div id="pie" style="width: 100%; height: 300px"></div>
      </div>
    </div>


    <!-- 3.  -->
     <!-- 最新内容 -->
     <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
             <div class="title">今日订单数</div>
              <div>{{ orderData.curOrderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
             <div>{{ orderData.curCollect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
             <div>{{ orderData.curMoney }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="text item">
          <el-row>
            <el-col :span="8">
             <div class="title">本月订单数</div>
              <div>{{ orderData.orderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
             <div>{{ orderData.collect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">本月金额</div>
             <div>{{ orderData.money }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'; 
export default {
     data(){
        return{
            totalData:{},//数据统计
            orderData:{},//订单数据
        }
    },
    created(){
        this.totalInfo();//打开页面就要加载
        this.orderinfo();//
        this.format();
    },
    mounted(){//最早获取DOM元素的生命周期函数 挂载完毕
    console.log('mounted-id' , document.getElementById('charts'))
      // this.line()
      // this.pie()
    },
    methods:{
      // ------获取首页统计数据
        async totalInfo(){
            let res = await this.$api.totalInfo();
            console.log('首页统计信息---',res.data);
            this.totalData = res.data.data.list;
            // console.log( res.data.data.list);
        },
         // ----获取今日订单数据
        async orderinfo(){
          let res = await this.$api.orderinfo()
          console.log('首页统计信息---',res.data);
          this.orderData = res.data.list
        },
        // -----获取图标动态数据
        async format(){
          let res = await this.$api.format()
          console.log('获取图标动态数据---',res.data);
          console.log(res.data.result.data.sale_money);//[{}{}]
          // 折线图 柱状图数据格式:[xx,xx,xx]
          // 获取x轴的数据名称
          let arr = res.data.result.data.sale_money;//拿到数据
          let arrx = []
          let total = []
          let money = []
          let pieData = []
          arr.forEach((ele)=>{//ele是取每一项
            arrx.push(ele.name)
            total.push(ele.num)
            money.push(ele.total_amount)
            //饼图--对象数据
            let obj={}
          
            obj.name = ele.name;
            obj.value = ele.total_amount;
            pieData.push(obj)//[{name:,value:},{},{}]
          })
             console.log(arrx);
             console.log(total);
             console.log(money);
             this.line(arrx,money,total)
             this.pie(pieData)
             console.log('饼图',pieData);
        },
         //绘制图表--折线------------------
      line(arrx,money,total) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('charts'));
        // 绘制图表
        myChart.setOption({
          tooltip: {//提示框组件
            trigger: 'axis',
          },
          legend: {},
          toolbox: {
            feature: {
              // dataZoom: {
              //   yAxisIndex: 'none'
              // },
              // restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {//x轴数据
            data:arrx,
          },
          yAxis: {//y轴会自动创建数据
          },
          series: [//图表内容
            {
              name: '销售额',
              type: 'line',
              data:money,
              smooth: true,//是否平滑曲线显示
            },
            {
              name: '销售量',
              type: 'bar',
              data: total,
            }

          ]
        });
      },
       //绘制饼图
    pie(pieData) {
      var myChart = echarts.init(document.getElementById('pie'));
      var option;
      option = {
        tooltip: {
          trigger: 'item',
          formatter:'{a}<br/>{b}:{d}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '产品销售额',
            type: 'pie',
            radius: '50%',
            data:pieData,
            // data: [//[{},{}]
            //   { value: 1048, name: '审议' },
            //   { value: 735, name: '淘宝' },
            //   { value: 580, name: '京东' }
            // ],
            emphasis: {//高亮配置
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    },
    // 使用过滤器----处理数据格式
    filters:{
      num(value){
        if(!value) return;
        return value.toLocaleString();
      }
    }

}
</script>

<style lang="less" scoped>
.home {
  margin: 10px;
}
.header {
  display: flex;
  padding-right: 30px;
  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    // text-align: center;
    position: relative;
    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }
    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }
  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }
  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }
  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }
  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}
/deep/.el-card__body{
  // border: 1px solid red;
  text-align: center;
  line-height: 30px;
}
// 图表

.content {
  margin: 20px;
  display: flex;
  height: 320px;
  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }
  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

//内容

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;
  .box-card {
    flex: 1;
    margin-right: 30px;
    span {
      font-weight: 600;
    }
  }
}

</style>
更多推荐

vue-cli-service build 不同环境的配置

目录🤜背景🤜vue-cli-service介绍🤜环境变量和模式🤜配置不同模式🤜index.html使用环境变量🤜验证🤜参考资料🤜背景在项目部署时，我们需要在测试环境和生产环境使用不同的变量。vue-cli提供了vue-cli-servicebuild打包命令，然而vue-cli-servicebuild

如何安装 Wnmp 并结合内网穿透实现外网访问内网Wnmp 服务

文章目录前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1注册账号3.2下载cpolar客户端3.3登录cpolarwebui管理界面3.4创建公网地址4.固定公网地址访问前言WNMP是Windows系统下的绿色Nginx+Mysql+PHP环境集成套件包，安装完成后即可得到一个Nginx+My

APP广告变现策略：如何实现盈利与用户体验的平衡？

如何把握流量变现和用户体验的平衡呢？这是许多APP开发者在商业化进程中都会关心并迫切需要解决的问题。以下是总结的一些方法和策略。一、深入了解用户需求在开发产品或进行商业决策时，我们要始终以用户需求为出发点。通过市场调研、用户调研和数据分析等方式，我们可以深入了解用户的需求和习惯，并以此为基础进行产品设计和优化。二、优化

文案内容千篇一律，软文推广如何加深用户印象

随着互联网技术的发展，企业营销的方式逐渐转向软文推广，但是现在软文推广的内容同质化越来越严重，企业应该如何让自己的软文推广保持差异性，在用户心中留下独特的印象呢？下面就让媒介盒子告诉你。一、&nbsp;找出产品独特卖点市场上同一类型的产品，缺点各有各的不同，但优点大同小异，因此我们需要找出产品独特卖点，将其表现出来，在

能进大厂？阿里云ACE认证到底有多香！

中国云计算火爆的当下，阿里云一枝独秀，市场占有率比排名后5名的总和还要多。在全球的云计算市场上，阿里云也是排名第三，超过谷歌云。这足以说明了市场对于阿里云产品解决方案的需求之大。而阿里云云计算架构师ACE认证是针对云架构师，解决方案架构师，云运维专家等技术人员的阿里云高级别技术认证。该认证体系已被阿里巴巴集团、交付伙伴

安卓恶意应用识别（三）（批量反编译与属性值提取）

前言上篇说到对安卓APK反编译，本篇实现批量反编译和批量特征提取及计算，主要就是通过python代码与cmd进行批量化交互，我在写文章之前，尝试批量下载了安卓apk（大约10来个），发现现在这个应用软件不是一般的大啊，无奈电脑内存不太够，现仅将已下载10个apk作为示例展示。1.批量反编译思路是这样：第一步：调用cmd

一文熟悉Latex论文排版

相信计算机专业或者写过专业论文的同学都知道，使用Office或者WPS来控制论文的格式有多么复杂和繁琐，甚至有时候花在改论文格式上的时间甚至超过了写论文的时间，因此我们急需要使用一种更加专业实用的排版工具来满足我们的论文排版需求，因此，Latex应运而生！1.LaTex概述LaTex是一个专业的排版工具，LaTex在世

窜货采买第三方怎么选择

窜货溯源服务听起来并不难，无非就是买货，但是否能买到货，同时在买到之后能否顺利完成溯源工作，也是非常有学问的，很多品牌会选择第三方服务商进行采买合作，这样可以规避品牌自己操作时的不合规性，因为自查如果不严谨的话，是容易造成“假数据”的，所以类似窜货采买这种涉及较多面的治理动作，与第三方合作会更加正确。要看第三方是否有相

RabbitMQ —— 延迟队列

前言前面荔枝梳理了有关死信队列的知识，延伸过来我们可以借助死信队列来理解延时队列。在实际需求中我们总是不可避免地需要一些定时任务，为了避免大量的计时操作消耗性能，我们常常采用的是延时队列来存储相应的消息，这时候死信队列的特点就出现了，死信队列使用的一个前提就是消息的TTL过期。在这篇文章中，荔枝会梳理延迟队列的相关知识

记RestTemplateBuilder奇诡的坑

前言在紧张的开发工作中，总能遇到一些奇怪的问题。今天的主角是RestTemplateBuilder。问题描述由于某些原因，我需要一个不检查HTTPS证书的RestTemplate。但是不管我怎么搞，就是依然会被检查到证书而抛出请求异常！在构建RestTemplate时，我使用了RestTemplateBuilder.(

央媒发稿不能改？媒体发布新闻稿有哪些注意点

传媒如春雨，润物细无声，大家好，我是51媒体网胡老师。“央媒发稿不能改”是媒体行业和新闻传播领域的普遍理解。央媒，即中央主要媒体，是权威性的新闻源，当这些媒体发布新闻稿或报道时，其他省、市或地方的媒体在转载时一般不对原文内容进行修改，以保证信息的一致性和权威性。其次，在我们给央媒提供新闻稿件时，需要注意以下细节，因为央

热文推荐
  1. Comparator 接口使用方法，结合java8新特性及源码分析

    目录1Comparator介绍1.1函数式声明1.2简单的小案例2.Comparator中的方法2.1compare抽象方法例子2.2comparing方法源码参考解释详细解释<?superT,?extendsU>讲解comparing代码样例例子comparing中的方法源码分析<T,UextendsComparab

  2. 安防视频/视频汇聚平台EasyCVR使用onvif探测添加设备通道详细步骤来啦！

    视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同，支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强，视频能力丰富，具体可实现视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、H.2

  3. Nginx

    概念nginx什么是nginxnginx是一个高性能的HTTP和正、反向代理的服务器nginx可以干什么可以作为web服务器，可以实现反向代理，可以实现基于反向代理的负载均衡，可以作为静态资源服务器(类似于七牛云)什么时候使用nginx后台搭建集群的时候，访问量较大，使用使用nginx作为静态资源的web服务器-部署前

  4. vue3 自定义Hooks

    文章目录前言一、Hooks是什么？二、图片转换Base641.Hooks2.使用三、监听元素宽高（自定义指令+Hooks）1.Hooks2.使用总结前言本文主要记录了vue3学习中自定义Hooks和vue2中Mixins的使用与案例。一、Hooks是什么？Hooks用来处理复用代码逻辑的一些封装，Hooks与Mixin

  5. Python+selenium自动化生成测试报告

    批量执行完用例后，生成的测试报告是文本形式的，不够直观，为了更好的展示测试报告，最好是生成HTML格式的。unittest里面是不能生成html格式报告的，需要导入一个第三方的模块：HTMLTestRunner一、导入HTMLTestRunner1.这个模块下载不能通过pip安装了，只能下载后手动导入，下载地址：htt

  6. 使用Java中SSM技术写项目具体操作流程

    确定需求和技术选型首先需要明确项目的功能需求，以及选择合适的技术框架和库。在SSM框架中，Spring框架负责管理Java对象，提供依赖注入和面向切面编程的功能；SpringMVC框架负责处理请求和响应，实现MVC架构；MyBatis框架负责ORM（对象关系映射），简化数据库操作。创建SpringMVC工程使用Mave

  7. 算法与设计分析--分治算法的设计与分析

    某不知名学校的第二次算法实验报告，一共四道题全部来自力扣第一题​​​​​​169.多数元素题目描述：给定一个大小为n的数组，找到其中的多数元素。多数元素是指在数组中出现次数大于⌊n/2⌋的元素。你可以假设数组是非空的，并且给定的数组总是存在多数元素。示例1:输入:[3,2,3]输出:3示例2:输入:[2,2,1,1,1

  8. 基于springboot会员制医疗预约服务管理信息系统springboot017

    大家好✌！我是CZ淡陌。一名专注以理论为基础实战为主的技术博主，将再这里为大家分享优质的实战项目，本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目，希望你能有所收获，少走一些弯路，向着优秀程序员前行！🍅更多优质项目👇🏻👇🏻可点击下方获取🍅文章底部或评论区获取🍅Java项目精品实

  9. CodeTON Round 6 (Div. 1 + Div. 2, Rated, Prizes!)

    A.MEXanizedArrayAC代码:#include<iostream>#include<algorithm>#include<cstring>usingnamespacestd;constintN=210;inta[N];intn,k,x;voidsolve(){cin>>n>>k>>x;if(x<k-1){c