太原小程序开发_Vue中使用Echarts仪表盘展示实时数据的完成

Vue中使用Echarts仪表盘展示实时数据的实现     ?orange   这篇文章主要介绍了Vue中使用Echarts仪表盘展示实时数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
彩笔一枚,简单记录一下。
业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。

第一步:
基于准备好的dom,初始化echarts仪表盘实例。

第二步:
我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中

 div shadow="always" 
 objEcharts :devicePressure="pressure" /objEcharts 
 /div 
export default {
 pro凡科抠图: {
 devicePressure: { type: String, require: true },
 data() {
 return {
 upPressure: this.devicePressure,

第三步:
因为是实时数据,就需要在watch中监听数据变化,实时更新。
注:这里我只监听一个参数变化,没有使用deep: true。

watch: {
 //监听devicePressure的数据变化。
 devicePressure(newData, oldData) {
 //把更新后的数据newData,赋值给需要传入echarts中的参数。
 this.upPressure = newData;
 //一定要调用echarts实例,要不然echarts不实时展示。
 this.drawLine();

第四步:
数据处理完之后,就要把它展示到仪表盘中了,所以直接找到echarts中需要数据的地方就好了。
介于仪表盘样式,可结合官方文档自定义。

export default {
 pro凡科抠图: {
 devicePressure: { type: String, require: true },
 data() {
 return {
 upPressure: this.devicePressure,
 mounted() {
 this.drawLine();
 watch: {
 devicePressure(newData, oldData) {
 this.upPressure = newData;
 this.drawLine();
methods: {
 drawLine() {
 // 基于准备好的dom,初始化echarts实例
 let visualOneChart = this.$echarts.init(document.getElementById("visualOneChart"));
 // 绘制图表
 visualOneChart.setOption({
 tooltip: {
 formatter: "{a} br/ {b} : {c}Pa",
 series: [
 name: "压力值",
 type: "gauge",
 clockwise: true,
 detail: {
 formatter: this.upPressure,
 textStyle: {
 fontSize: 14,
 data: [{ value: this.upPressure, name: "压力值" }],
 radius: "90%",
 axisLabel: {// 刻度标签。
 show: true,
 distance: -5,
 color: "black", 
 fontSize: 10, 
 formatter: "{value}", 
 axisLine: {// 仪表盘轴线(轮廓线)相关配置。
 show: true, 
 lineStyle: {// 仪表盘轴线样式。
 opacity: 1, 
 width: 15, 
 shadowBlur: 10, 
 pointer: { // 仪表盘指针。
 show: true,
 length: "70%", 
 width: 4, 

到此这篇关于Vue中使用Echarts仪表盘展示实时数据的实现的文章就介绍到这了,更多相关Vue Echarts仪表盘 内容请搜索凡科以前的文章或继续浏览下面的

相关阅读