vue echarts动态数据定时刷新

关键代码截图

完整代码

<template><div class="block"><div :class="className" :id="id" :style="{height:height,width:width}" /></div>
</template><script>
import echarts from "echarts";
import resize from "./mixins/resize";export default {mixins: [resize],props: {className: {type: String,default: "chart"},id: {type: String,default: "chart"},text: {type: String,default: "text"},value: {type: Number},max: {type: Number,default: 100},mid: {type: Number,default: 8},min: {type: Number,default: 0},midbule: {type: Number,default: 15},width: {type: String,default: "330px"},legendshow: {type: Boolean,default: false},height: {type: String,default: "330px"}},watch: {value: {handler(newVal, oldVal) {console.log("tag", newVal);console.log("oldVal: ", oldVal);this.option = {tooltip: {formatter: "{a} <br/>{b} : {c}kpa"},series: [{name: " ",type: "gauge",min: this.min, // 最小的数据值,默认 0 。映射到 minAngle。max: this.max, // 最大的数据值,默认 100 。映射到 maxAngle。// startAngle: 180,axisLine: {// 坐标轴线lineStyle: {// 属性lineStyle控制线条样式// color: [[0.2, "#c23531"], [0.8, "#63869e"], [1, "#91c7ae"]]//        :min="60"// :value="95"// :mid="86"// :midbule="95"// :max="106"color: [[this.mid / this.max, "#c23531"],[1 - (this.max - this.midbule) / this.max, "#63869e"],[1, "#91c7ae"]]// color: [//   [(this.mid - this.min) / (this.max  - this.min), "#c23531"],//   [1 - ( this.max - this.min)- (this.midbule -this.min) /( this.max - this.min), "#63869e"],//   [1, "#91c7ae"]//}},title: {show: true,offsetCenter: [0, "80%"], // x, y，单位pxtextStyle: {color: "#hhh",fontSize: 24}},detail: { formatter: "{value}" },data: [{ value: this.value, name: this.text }]}]};this.chart.setOption(this.option);},deep: true //对象内部属性的监听，关键。}},data() {return {chart: null,option: {tooltip: {formatter: "{a} <br/>{b} : {c}kpa"},series: [{name: " ",type: "gauge",min: this.min, // 最小的数据值,默认 0 。映射到 minAngle。max: this.max, // 最大的数据值,默认 100 。映射到 maxAngle。// startAngle: 180,axisLine: {// 坐标轴线lineStyle: {// 属性lineStyle控制线条样式// color: [[0.2, "#c23531"], [0.8, "#63869e"], [1, "#91c7ae"]]//        :min="60"// :value="95"// :mid="86"// :midbule="95"// :max="106"color: [[this.mid / this.max, "#c23531"],[1 - (this.max - this.midbule) / this.max, "#63869e"],[1, "#91c7ae"]]// color: [//   [(this.mid - this.min) / (this.max  - this.min), "#c23531"],//   [1 - ( this.max - this.min)- (this.midbule -this.min) /( this.max - this.min), "#63869e"],//   [1, "#91c7ae"]//}},title: {show: true,offsetCenter: [0, "80%"], // x, y，单位pxtextStyle: {color: "#hhh",fontSize: 24}},detail: { formatter: "{value}" },data: [{ value: this.value, name: this.text }]}]}};},mounted() {this.initChart();},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {initChart() {this.chart = echarts.init(document.getElementById(this.id));this.chart.setOption(this.option);}}
};
</script>

vue echarts动态数据定时刷新相关推荐

【分享】vue+Echarts动态数据已经赋值，但是无法渲染页面的问题
前言:对于后端的小伙伴来说,现在用vue-element-admin 真的太香了,毕竟Java向的程序员,光后端技术栈就得学到头皮发麻啊,所以,感谢尤雨溪,感谢饿了么,感谢花裤衩. 最近在帮朋友写东西 ...
VUE定时器（页面定时刷新）
VUE定时器(页面定时刷新) 如果觉得页面上数据刷新缓慢,我们就可以使用vue中的定时器设置时间,五分钟.十分钟刷新一次都行. 一. //创建实例,可以取值,但是拿不到值 created(){} 二. ...
Echarts 学习系列(3)-Echarts动态数据交互
写在前面上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件开发环境:win10 ...
基于Spring MVC的ECharts动态数据实时展示
为什么80%的码农都做不了架构师?>>> 基于SpringMVC进行ECharts动态实时数据展示,ECharts的官网示例是前端的js动态随机数据,没有与后端程序进行交互,由 ...
【3数据可视化】基于vue的动态数据低代码可视化实现
目录 1.数据科学的产业升级 2.数据可视化的痛点 2.1 数据分析师 2.2 想提升的非技术人员 3.数据可视如何简单化 3.1 数据部分 3.1.1 代码需求 3.1.2 无代码需求 3.2 图表 ...
vue+echarts实现数据展示大屏
简单介绍一个数据展示大屏.适用于中小型项目展示,只做学习交流. 技术栈前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发I ...
vue 添加完数据后刷新页面_页面刷新vuex数据消失
1.前言 vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页 ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
Django Vue渲染动态数据（七）
(一)批量添加数据 import random from django.http import HttpResponse def add_goods(request):## 添加店铺store = S ...

vue echarts动态数据定时刷新

vue echarts动态数据定时刷新相关推荐

最新文章

热门文章