vue父子传值 echarts图的应用

最新推荐文章于 2023-11-28 09:46:03 发布
最新推荐文章于 2023-11-28 09:46:03 发布
阅读量637 收藏
点赞数 1
分类专栏： Vue初学 文章标签： echarts vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tel_17674647975/article/details/131080503
版权
文章展示了如何在Vue.js应用中利用Echarts库创建条形图、圆形图和饼图。代码详细解释了从接口获取数据、初始化图表、设置图表选项以及处理数据更新的过程。涉及到的图表元素包括线条样式、阴影、网格、坐标轴、数据标签和动画效果。
摘要由CSDN通过智能技术生成

实现的效果图

 条线图

代码解析

 接口取值

 渲染

    initChart() {
      if (this.$refs.lineCharts) {
        //echarts销毁实例
        echarts.dispose(this.$refs.lineCharts)
      }
      this.chart = echarts.init(this.$refs.lineCharts)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.days,   //获得x轴得数据
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '发送总量',
          type: 'line',
          stack: 'vistors',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: '#188df0' }
            ])
          },
          data: this.smsNum,    //获得y轴得数据
          animationDuration: 2000
        }]
      }
      this.chart.setOption(option)
    },

圆型图

<template>
  <div :class="className" :style="{height:height,width:width}">
    <div ref="ringCharts" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {selectSmsApiStatusVOList} from "@/api/message";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    apiCode: '',
    required: true,
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      MapList: [],
      nameData: [],
      toBeSend: [],
      sending: [],
      sendSuccess: [],
      sendFailed: [],
      days: [],
      newApiCode: "",
      chart: null,
    }
  },
  created() {
    this.newApiCode = this.apiCode
    this.getLineList()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
//　因为在vue生命周期中子组件创建后只会赋一次值，之后父组件数值变化了，
//  子组件的数值也会变化，但显示的数据不会发生改变。
//  所以需要监听父组件传参变化重新赋值让子组件重新赋值。
//  此处的isShow并不是函数，而是对应的要赋值的变量名isShow
    apiCode(val) {
      this.newApiCode = val
      this.getLineList()
    }
  },

  methods: {
    getLineList() {
      selectSmsApiStatusVOList(this.newApiCode).then(response => {
        this.MapList = response.data
        let MapList = this.MapList;
        if (MapList && MapList.length !== 0) {
          let obj = eval(MapList);
          for (let i = 0; i < obj.length; i++) {
            this.toBeSend.push(obj[i].toBeSend);
            this.sending.push(obj[i].sending);
            this.sendSuccess.push(obj[i].sendSuccess);
            this.sendFailed.push(obj[i].sendFailed);
          }
        } else {
          this.toBeSend = []
          this.sending = []
          this.sendSuccess = []
          this.sendFailed = []
        }
        this.$nextTick(() => {
          this.initChart()
        })
      });
    },
    initChart() {
      if (this.$refs.ringCharts) {
        //echarts销毁实例
        echarts.dispose(this.$refs.ringCharts)
      }
      this.chart = echarts.init(this.$refs.ringCharts)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '短信状态占比图',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold',
                formatter: `{b} \n {d}%`     //此处的7为假数据,其实就是下面data数组中的value相加,都可以取到的,但是此处都是模拟数据
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: this.toBeSend, name: '待发送'},
              {value: this.sending, name: '发送中'},
              {value: this.sendSuccess, name: '发送成功'},
              {value: this.sendFailed, name: '发送失败'}
            ]
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ]
          }
        ]
      }
      this.chart.setOption(option)
    },
  }
}
</script>

条形图

<template>
  <div :class="className" :style="{height:height,width:width}">
    <div ref="barCharts" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {selectSmsApiStatusVOList, selectSmsApiTypeVOList} from "@/api/message";

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    apiCode: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      MapList: [],
      smsNum: [],
      toBeSend: [],
      sending: [],
      sendSuccess: [],
      sendFailed: [],
      nameData: [],
      text: [],
      totalData: [],
      newApiCode: "",
    }
  },
  created() {
    this.newApiCode = this.apiCode
    this.getBarList()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
//　因为在vue生命周期中子组件创建后只会赋一次值，之后父组件数值变化了，
//  子组件的数值也会变化，但显示的数据不会发生改变。
//  所以需要监听父组件传参变化重新赋值让子组件重新赋值。
//  此处的isShow并不是函数，而是对应的要赋值的变量名isShow
    apiCode(val) {
      this.newApiCode = val
      this.getBarList()
    }
  },
  methods: {
    getBarList() {
      selectSmsApiTypeVOList(this.newApiCode).then(response => {
        this.MapList = response.data
        let MapList = this.MapList;
        if (MapList && MapList.length !== 0) {
          let obj = eval(MapList);
          for (let i = 0; i < obj.length; i++) {
            this.nameData.push(obj[i].smsType.text);
            this.totalData.push(obj[i].smsNum)
          }

        } else {
          this.nameData = []
          this.totalData = []
        }
        this.$nextTick(() => {
          this.initChart()
        })
      });
    },
    initChart() {
      if (this.$refs.barCharts) {
        //echarts销毁实例
        echarts.dispose(this.$refs.barCharts)
      }
      this.chart = echarts.init(this.$refs.barCharts)

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.nameData
        },
        series: [
          {
            name: '短信总量（单位：条）',
            type: 'bar',
            stack: 'total',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // { offset: 0, color: '#83bff6' },
                // { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            color: '',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: this.totalData
          }
        ]
      })
    }
  }
}
</script>

饼图 

<template>
  <div :class="className" :style="{height:height,width:width}">
    <div ref="pieCharts" style="width: 100%;height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {selectSmsApiAppVOList} from "@/api/message";

export default {
  mixins: [resize],
  props: {
    apiCode:{
      type: String,
      required: true,
    },

    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      MapList: [],
      rows: [],
      newApiCode: "",
      PieValue: '',
      PieName: '',
      nameData: [],
      totalData: []
    }
  },
  created() {
    this.newApiCode = this.apiCode
    this.getPieListData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
//　因为在vue生命周期中子组件创建后只会赋一次值，之后父组件数值变化了，
//  子组件的数值也会变化，但显示的数据不会发生改变。
//  所以需要监听父组件传参变化重新赋值让子组件重新赋值。
//  此处的isShow并不是函数，而是对应的要赋值的变量名isShow
    apiCode(val) {
      this.newApiCode = val
      this.getPieListData()
    }
  },
  methods: {
    getPieListData() {
      this.loading = true;
      selectSmsApiAppVOList(this.newApiCode).then(response => {
        this.MapList = response.data;

        if (this.MapList && this.MapList.length !== 0) {
          let obj = eval(this.MapList);
          for (let i = 0; i < obj.length; i++) {
            this.nameData.push(obj[i].sign.text);
            this.totalData.push({value: obj[i].smsNum, name: obj[i].sign.text})
          }
        }else {
          this.nameData = []
          this.totalData = []
        }
        this.$nextTick(() => {
          this.initChart()
        })
      });
    },

      initChart() {
        if (this.$refs.pieCharts) {
          //echarts销毁实例
          echarts.dispose(this.$refs.pieCharts)
        }
        this.chart = echarts.init(this.$refs.pieCharts)

      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          left: 'center',
          bottom: '10',
           //data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
          data: this.nameData
        },
        series: [
          {
            name: '发送总量',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            // data: [
            //   { value: 320, name: 'Industries' },
            //   { value: 240, name: 'Technology' },
            //   { value: 149, name: 'Forex' },
            //   { value: 100, name: 'Gold' },
            //   { value: 59, name: 'Forecasts' }
            // ],
            data: this.totalData,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>

Mr.ZYG
关注
专栏目录
Vue中父组件向子组件传递数据并在子组件中使用echarts进行可视化
HackWhisper的博客
10-08 359
首先，在父组件中引入echarts库，并创建一个子组件来显示echarts图表。在Vue中，父组件可以通过props属性向子组件传递数据。本文将介绍如何在Vue中使用echarts库进行数据可视化，并通过props属性将数据从父组件传递给子组件。然后，我们定义了一个options对象，其中xAxis表示x轴的数据，yAxis表示y轴的数据，series表示数据系列。通过上述代码，我们实现了在Vue中通过props属性将数据从父组件传递给子组件，并使用echarts库进行数据可视化的功能。
vue父子组件传值的一些坑（深浅拷贝）
MYNAMEL的博客
08-19 1751
本文章转载：https://www.yht7.com/news/116487 1.问题描述 父组件传值给子组件，子组件改变传过来的值后，父组件的值也会跟着改变。 这个问题比较冷门，平时如果对组件通信使用得比较简单，一般不会遇到。 2.原因剖析 核心：双向绑定 父子组件传值的时候涉及双向绑定，当传值为 object 类型时，传值之后数据源会被改变。 深拷贝与浅拷贝 下文详细讲。 3.解决方案 我目前采用的解决办法是： 传值的时候不要直接传数据源，而是通过拷贝或者定义新变量等方式传值。 简单处理就 JSON.p
父组件的值传给子组件echarts
eternal_tc的博客
03-31 2666
案例为父组件的时间选择框传值给子组件。
vue echarts图标按钮给父组件传递值 this.$emit is not a function
tenc1239的博客
08-14 553
2 父组件定义方法IsMultiChartEvent 监听emit 的updateIsMultiChart 事件 3 事件和监听方法绑定 -> 数据传递
vu3监听父组件传值 避免初始化Echarts后的二次渲染
m0_74309113的博客
06-21 109
vu3监听父组件传值给封装的子组件Echarts, 避免初始化Echarts后的二次渲染。
vue中关于echarts父子组件传值一个组件绘制多个图表问题
qq_41108396的博客
06-17 3026
需求：用最少的vue页面画多个echarts图表 原理：我这里是使用父子组件传值 父组件多次调用子组件就可以画多个图表。适用于一个页面画多个图表，柱状图，饼图，折线图 效果如图所示： 首先，画图表之前安装echarts已经不用说了吧，需要建两个vue文件，一个父组件About，一个子组件barChart 再然后开始愉快的敲代码 ：） 在敲代码之前先构思了一下，我那些东西是公用的，公用的都放在子组件里，不一样的都将它变成变量，由父组件传值给它。 我这里把标题，标签，x轴data和series作为变量，由父
vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入）
又青_CSDN的博客
04-29 1018
vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入） 最终的效果图，还需要做一些视觉效果，只需要在子组件里面编写就可以 子组件内容 v-bind:id就是绑定id，从父组件获得不同的id，不然id相同echarts画图时无法识别图表就显示不出来。ref绑定data用于同一个页面可以重复调用子组件，以便获得不同的data。 <!-- 子组件.vue --> <template> <div class="echarts"> &l
Vue中使用Echarts仪表盘展示实时数据的实现
01-18
我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中 父组件中 <objEcharts devicePressure=pressure></objEcharts> 子...
vue父子组件传值
weixin_47783830的博客
12-23 361
先前做了echarts可是化，但是的由于图表比较多，所以呢打算封装公共的组件。下面看一下我们的设计图稿： 折线图与柱状图的格式差不多的，封装统一的格式是很好的选择。这时候就用到了vue的父子传值。 首先，我们需要对vue之间的组件通信有一定了解，具体可以去看官方文档vue-api 组件通信是很必要掌握的技能，常见的父子组件，父=>子，子=>父；兄弟传值，甚至是祖孙。我们这里重点说父子组件的传值。 index文件是父组件，其它三个都是子组件；子组件想要在父组件显示，首先要引入组件： 之后，用
vue-echarts动态调整
xiaoxiaoxiaopb的博客
07-06 779
vue3整合echarts 动态调整 前言 本文主要适用于vue2、vue3 对Echarts进行整合，动态跟随的方法， 以及防抖功能的实现 环境：vue3，Echarts：4.9.0 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用步骤 1.依赖安装 代码如下（示例）： npm install echarts@4.9.0 -S 2. App.vue的html 为Echarts提供一个可依赖的Element，里面的参数于data进行绑定，可为数据实时展示提供基础 <div
echarts组件（vue3封装）
01-12
vue3封住echarts组件，包含自适应屏幕，代码可复用
Vue中父组件向子组件echarts传值问题
imkaifan的博客
03-17 1555
问题描述： vue中子组件是echarts图表，父组件向子组件利用props传值，值传递过去了，但是，echarts不渲染。 问题现象再深一层次： 数据没有驱动试图 解决办法： 用v-if进行一个渲染判断 上代码： 父组件 <template> <div class="putongradar_container"> <div class="container_left"> <div class="title">{{ zonghNengl
vue中父组件向子组件echarts传值问题
u012232730的博客
02-03 1221
问题：当父组件传值给子组件echarts时，发现子组件获取的props为空，刚开始以为是钩子函数放错了地方，后来发现从mounted和created都不行。当在父组件data定义传递的数据的时候子组件显示正常 原因：后来经过排查，此处省略N字，发现echarts是在渲染的时候就传递数据 解决方案：在父组件定义一个flag，当数据获得的之后再进行子组件的渲染 //父组件 <div class="chart-wrapper"> <pie-chart v-if="flag"
vue中echarts父子组件异步传值
weixin_52919504的博客
09-27 1563
vue中echarts父子组件异步传值
vue3+ts封装的echarts组件(内含vue3父传子)
最新发布
weixin_45458830的博客
11-28 527
【代码】vue3+ts封装的echarts组件(内含vue3父传子)
解决vue3向echarts组件传值的问题
Vince_13的博客
11-14 1917
这几天在工作中遇到一个需求，我想要实现从vue3中选择不同的选项卡，进而改变图表的展示，一开始不知道怎么将vue3所获取的值传入到echarts组件中，来对其进行双向绑定。在上述选项卡中，含有一个change函数，函数的作用为，将选项卡中的className属性传递给cur变量，为了改变选项卡选中之后的样式改变。在子组件echarts中需要传入数据，类型，横坐标（纵坐标的数据由series的data提供），以及细分类的属性。以上为vue3与子组件echarts进行通信的流程，希望对您有帮助。
Vue向Echarts传值
一般社员的博客
03-31 2815
Vue向Echarts传值 在学习了如何在vue中创建一个简单的echarts图表之后，其中的数据用于测试的时候是写死的，但是实际应用中数据应该是从数据库中获取，用真实数据，而不是直接写死的假数据，这个时候就要获取后台向前台传的值，应用于图表。 一开始想的挺简单的，获取值把值放进对应的位置。没想到遇到了一个坑，获取到的值传不进去，弄了好久终于解决了。 数据来源：用户表，性别有男女，统计男生和女生各人数 先说说遇到的坑 为了方便测试先只取男生的人数 我定义了一个接收后台数据的对象 向后台发送对应的请求，然后
echarts配合vue2点击图表传递数据到另一个页面
xihuanzgr的博客
12-12 865
公司因为是跳转之后还要进行调用接口，所以用了params进行传参，如果需要缓存则可以使用query进行路由传参。去点击图表中的图之后获取图标数据传递到另一个页面的功能。
vue3中使用echarts的子组件接收父级传来参数，并重新渲染 +++watch监听的用法
qq_39536826的博客
12-23 6224
vue3中echarts的子组件接收父级传来值并渲染
vue 父子传值和子父传值
05-31
Vue 中组件之间的通信可以通过父子组件传值和子父组件传值两种方式实现。 父子组件传值： 1. 父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据。 2. 子组件通过 $emit 触发事件，将数据传递给父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值