vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变(代码粘贴)

本文详细介绍了一个使用Vue.js和ECharts实现的设备产量对比图组件。该组件通过父组件传递的数据动态生成柱状图,展示全年不同检品机的本年与上年设备产量对比,适用于监控和分析生产数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文地址:https://blog.youkuaiyun.com/qq_33300789/article/details/79729675#commentBox

原文为图片,等等,这里方便各位搬砖,特地,转为代码;详细讲解请访问上面的原文地址查看

父页面:(根据自己项目的具体位置引入子组件:)

<template>
    <div>
      <linegraph :id="'bargraph'" :data="option2" style="height:350px;"></linegraph>
      <linegraph :id="'bargraph1'" :data="option2" style="height:350px;"></linegraph>
    </div>
</template>

<script>
  import linegraph from '../maptable/baseEchartsAllComponent.vue'
    export default {
        name: "weixinanaly",
      data(){
          return{
            option2:{
              title: {
                text: '全年设备产量对比图',
                left: 'center'
              },
              xAxis: {
                type: 'category',
                data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
              },
              yAxis: {
                type: 'value'
              },
              legend: {
                left: 'center',
                data: ['本年', '上年'],
                bottom:0
              },
              grid: {
                left: '1%',
                right: '2%',
                bottom: '8%',
                containLabel: true
              },
              series: [
                {
                  name: '本年',
                  data: [1000, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  barWidth:30,
                },
                {
                  name: '上年',
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar',
                  barWidth:30,
                }]
            }
          }
      },
      components:{
          linegraph
      }
    }
</script>

<style scoped>

</style>

子组件:

<template>
    <div v-bind:id=id v-bind:data=data></div>
</template>

<script>
    export default {
        name: "baseEchartsAllComponent",
      data(){
          return{
            ChartLineGraph:null,
          }
      },
    //  深度监听 父组件刚开始没有值,只有图标的配置项
    //  父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变
// deep:true.深度监听,确保data中子项修改也能监听到。写法参考:https://cn.vuejs.org/v2/api/#watch
      watch:{
          data:{
            handler(newvalue,oldvalue) {
              this.drawLineGraph(this.id,newvalue);
            },
          deep:true
              }
          
      },
      props:["id","data"],
      mounted() {
          this.drawLineGraph(this.id,this.data);

      },
      methods:{
        drawLineGraph(id,data){
          let _this = this;
          let myChart = document.getElementById(id)
          this.ChartLineGraph = this.$echarts.init(myChart)
          this.ChartLineGraph.setOption(data);
          window.addEventListener("resize",function () {
            _this.ChartLineGraph.resize();
          })
        }
      },
      beforeDestroy() {
          if(this.ChartLineGraph){
            this.ChartLineGraph.clear();
          }
      }
    }
</script>

<style scoped>

</style>

 

 

子任务一:用柱状图展示设备历史各个状态持续时长 编写Vue工程代码,根据接口,用柱状图展示接口所有数据中各设备各个状态持续时长(秒),同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果浏览器console打印结果分别截图粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。 子任务二:用柱状图展示每日所有车间各设备平均运行时长 编写Vue工程代码,根据接口,用柱状图展示每日所有车间各设备平均运行时长(秒,四舍五入保留两位小数),每日里的所有设备按照接口返回的数据顺序展示即可,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果浏览器console打印结果分别截图粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。 子任务三:用折线图展示某设备每日运行时长 编写Vue工程代码,根据接口,用折线图展示设备OP160每日的运行时长(秒),同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果浏览器console打印结果分别截图粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。 子任务四:用条形图展示每日各设备产量 编写Vue工程代码,根据接口,用条形图展示每日各设备产量,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果浏览器console打印结果分别截图粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。 子任务五:用折柱混合图展示设备日均产量所在车间日均产量 编写Vue工程代码,根据接口,用折柱混合图展示设备日均产量(四舍五入保留两位小数)所在车间日均产量(四舍五入保留两位小数),其中柱状图展示各设备的日均产量,折线图展示该设备所在车间的日均产量,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果浏览器console打印结果分别截图粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。
最新发布
03-13
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值