vue+echart仪表盘显示数据demo


<template>
      <div id="MainContent">
      </div>
      
</template>
<script>
const  echarts= require('echarts');
 export default {
    data() {
  return {
	option : {
	 tooltip: {
	     formatter: '{a} <br/>{b} : {c}%'
	 },
	 series: [{
	     name: 'Pressure',
	     type: 'gauge',
	     detail: {
	         formatter: '{value}'
	     },
	     data: [{
	         value: 50,
	         name: 'SCORE'
	     }]
	 }]
	}
  };
},
  mounted() {
    // 初始化echarts 并且绑定标签
    var myChart = echarts.init(document.getElementById("MainContent"));
    //设置参数
    myChart.setOption(this.option, true);
   
  },


    methods: {
        text (s){
            var that=this;
            var nowtime=new Date().getTime(); 
            console.log("========="+nowtime);
            axios({
        method: 'get',
        url: 'https://6816bec0.cpolar.cn/test',
        params: {
             timestamp:nowtime
        }
        })
    }
  }
 }
</script>

<style scoped>
div{
    width: 500px;
    height: 500px;
}



</style>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。ECharts是一种用于创建交互性和可视化图表的图表库。在生产环境中,可以使用VueECharts来创建一个生产任务看板。 首先,我们可以使用Vue框架来构建用户界面。通过Vue的组件化架构,我们可以将任务看板拆分为多个可重用的组件,例如任务列表、进度条、功能按钮等。这样可以使代码更可维护和可扩展。同时,Vue提供了响应式的数据绑定机制,可以实时更新任务看板的数据,并与后端进行数据交互。 然后,我们可以使用ECharts图表库来创建可视化图表,以展示任务看板上的数据。例如,可以使用饼图来显示任务的进度分布,柱状图来展示各个任务的完成情况,折线图来展示任务的趋势等。ECharts提供了丰富的图表类型和交互功能,可以根据实际需求进行灵活配置。 在整个过程中,我们可以利用Vue的生命周期钩子函数来实现数据的获取、更新和渲染。当用户发起操作时,可以通过Vue的事件机制来触发相应的业务逻辑。例如,当用户点击任务列表中的某个任务时,可以发送请求获取该任务的详细信息,并在界面上展示出来。 最后,为了提高用户体验,我们可以将任务看板进行排版和样式的优化,使其在不同设备和浏览器上都能良好展示。同时,可以增加一些交互功能,例如拖拽任务、快速搜索任务等,以提高用户的生产效率。 总结而言,通过使用VueECharts,我们可以实现一个功能齐全、交互性强的生产任务看板。它可以直观展示任务的状态和进度,并提供方便的操作和管理功能,帮助用户更好地进行生产任务的监控和调度。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值