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

战斗中的老段2023-09-23 19:51

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>
相关推荐
蒜蓉大猩猩9 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
王解39 分钟前
一篇文章读懂 Prettier CLI 命令：从基础到进阶 （3）
前端·perttier
乐闻x1 小时前
最佳实践：如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
檀越剑指大厂1 小时前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶1 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam1 小时前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑1 小时前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen1 小时前
Web 学习笔记 - 网络安全
前端·笔记·学习
天海奈奈1 小时前
前端应用界面的展示与优化（记录）
前端
多多*1 小时前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02玄机平台应急响应—webshell查杀03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总0404 - matlab m_map地学绘图工具基础函数 - 设置网格05Docker 夺命连环 15 问06PyTorch机器学习实现液态神经网络07鸿蒙LiteOS+Hi3861智能家居网关设计：MQTT协议实现与代码示例08支付宝短视频平台创作分成激励项目09RAG 实践- Ollama+RagFlow 部署本地知识库10编译原生安卓aosp源码，实现硬改以及定位