这篇文章主要介绍了Vue中使用Echarts仪表盘展示实时数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue中echarts仪表盘实时数据
彩笔一枚，简单记录一下。
业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。
第一步：
基于准备好的dom，初始化echarts仪表盘实例。
第二步：
我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中
父组件中 <div class="chart"> </div> 子组件中 export default { props: { 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 { props: { 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:<strong>本文来源gaodaima#com搞(代@码$网6</strong> "{value}", }, axisLine: {// 仪表盘轴线(轮廓线)相关配置。 show: true, lineStyle: {// 仪表盘轴线样式。 opacity: 1, width: 15, shadowBlur: 10, }, }, pointer: { // 仪表盘指针。 show: true, length: "70%", width: 4, }, }, ], }); }, }, }
以上就是Vue中使用Echarts仪表盘展示实时数据的实现的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue中使用Echarts仪表盘展示实时数据的实现
转载请注明原文链接：Vue中使用Echarts仪表盘展示实时数据的实现
