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

最新推荐文章于 2024-05-17 17:47:49 发布
最新推荐文章于 2024-05-17 17:47:49 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： echarts vue 文章标签： vue.js echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48203828/article/details/132989558
版权
vue 同时被 2 个专栏收录
57 篇文章 0 订阅
订阅专栏
echarts
6 篇文章 0 订阅
订阅专栏

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>
战斗中的老段
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制图表及异步加载数据】 在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型...
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
在现代Web开发中，数据可视化是一项关键技能...总的来说，Vue与ECharts的结合为数据可视化提供了一个强大且灵活的解决方案。通过学习和实践，你可以创建出符合项目需求的精美数据大屏，提升用户体验，让数据讲述故事。
【ECharts】调用接口获取后端数据的四种方法
Qxn530的博客
09-02 1万+
eacharts调用接口获取后端数据的四种方法
Echarts后台获取数据
finfin12的博客
10-30 6691
记录一下,毕竟不是专业搞前端的 后台代码 @Controller public class EchartsDemo { @ResponseBody @RequestMapping("/hello") public Map hello(){ Map map = new HashMap(); List list = new ArrayLis...
封装一个通用的 ECharts 图表组件（一）
最新发布
m0_54340021的博客
05-17 968
本文分享了如何封装一个通用的 Vue QuickChart 组件以简化 ECharts 图表的集成。封装旨在提高代码复用性和可维护性，同时通过 props 增强灵活性。
Vue中使用echarts从后端获取数据并赋值显示
学如逆水行舟，不进则退，如遇问题联系邮箱：904004593@qq.com
06-25 3万+
废话不多说直接上代码,由于前后端交互,所以使用axios发送请求 如饼图: 一,安装vue中安装echarts,axios和vue-axios npm install echarts -S npm install axios npm install --save vue-axios 二,全局引入echarts和axios main.js import echarts from 'echarts' import echarts from 'echarts' import axios from 'axi
vue集成echarts柱状图动态获取数据展示
爱学习的大雄的博客
12-08 3749
在图表展示时，我们经常需要使用到柱状图等，其中展示的数据我们一般是从后端获取，我这里遇到的问题就是无法动态展示从后端获取的数据（后端获取后无法展示），在解决完这个问题后，写下该笔记进行记录。在后台管理界面中有图表展示的需求，经过查阅资料，发现echarts较为合适，故使用vue+echarts进行开发图表效果。上，所以就需要先获取数据，数据获取完成后再去进行渲染，否则数据无法渲染到图表中。中进行了，所以我们在初始化前就需要将从后端获取的数据渲染到。**问题的原因是：**图表的初始化是在。
vue与Echarts完成--动态数据折线图
weixin_50143345的博客
08-18 543
【代码】vue与Echarts完成--动态数据折线图。
vue获取后台数据生成echarts柱状图
新人一枚，互相学习哦！
03-21 434
根据后端返回数据，动态生成柱状图
Vue3+echarts 动态数据传递
weixin_46382462的博客
03-17 1697
Vue3+echarts 动态数据传递/绑定
vue项目使用echart实现动态折线的实时数据效果
qq_41920758的博客
08-07 2105
目前有三种方式可以实现：1、定时器不停的刷新，2、是使用scoket实现，3、是使用requestAnimationFrame实现，原理都一样，都是不断循环调用echart对象的setOption方法，每次改变一下series里面的data数据（即每次在data数组最后push一个数据，如果数组总数达到设置的一屏最大数，则先shift开头的一个数据，再结尾push一个数据），达到动态更新曲线图，实现心电图动画效果。offset: 1, color: '#C7ABE4' // 100% 处的颜色。
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
Vue 之 echarts 图表数据可视化常用的一些图表动态图表3D图表的简单整理
08-05
相关说明地址： vue 中添加 echarts ，然后在 vue 中简单使用一些 echarts中常用的图表，包括一些动态的图表、3D的图表等 ，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
vue-基于Vue+Echarts实现的数据可视化平台.zip
05-04
3. 数据处理：设计数据模型，确保数据格式符合ECharts的预期，可以使用Vue的计算属性或methods进行转换。 4. 组件间通信：如果平台涉及多个图表，需考虑组件间如何传递和共享数据，可以使用Vuex状态管理库或自定义...
ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法
热门推荐
mengxiangfeiyang的专栏
04-01 5万+
[摘要]： 格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图表组件内的格式化方法差异还是有一些的，这里就不做它们之间的比较了。ECharts图表组件内的格式化常用的地方也不是很多，就来一起看看吧！ 一、tooltip 图表内数据点的悬浮框提示框信息展现的时候我们
Echars折线图（前端如何接收后端传递的值）实现动态数据
Have_MonkeyG的博客
07-13 2803
Echars前端接收后端传递的数据
echarts markline 不显示_当统计图遇上echarts（vue项目中）
weixin_39606019的博客
11-25 577
平常看别人家的项目中动态的统计图，各式各样，还会随着实际的数据波动，是不是觉得不可思议，不但数据波动，并且还啥样都有，那这样的统计图是怎么来的呢？下面呢？通过一个小案例带你来认识一下echarts的世界吧！！！第一步：echarts是第三方的，所以你首先要引入你的项目。我们这里说的是vue项目，所以我们需要用一行命令来安装echarts，如下：npm install echarts --save第...
echarts图表动态获取后台数据详解（二）
zfb52572的博客
12-21 4万+
前篇文章介绍了如何在现有的页面中，建立容器存放echarts图表，如何引入echarts.js文件，和配置图表库的路径。并将静态数据在页面上呈现出来。相当于是为动态获取后台数据做了铺垫。那么这篇文章，就实际的介绍一下，怎么从后台数据库获取数据，并展示在echarts图表上。 1.在前一篇文章介绍中的xxx.js文件里，加入ajax请求，dataType为json。 2.然后再ajax的su
echarts数据的动态更新 + vue + 读取json
04-03
我们只需要通过调用 setOption 方法传入一个动态数据接口，就可以实现图表数据的动态更新。 示例代码如下： ``` <div id="chart"> import echarts from 'echarts' import { VueECharts } from 'vue-echarts' ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值