在vue中echarts仪表盘实时数据
彩笔一枚,简单记录一下。
业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中。
第一步:
基于准备好的dom,初始化echarts仪表盘实例。
第二步:
我是通过父子组件传值把数据接收过来,在data中定义upPressure参数,并将接收来的devicePressure参数赋值给它,便于后面将值传入到echarts中
父组件中 <div class="chart" shadow="always"> <objEcharts :devicePressure="pressure"></objEcharts> </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: "{value}", }, axisLine: {// 仪表盘轴线(轮廓线)相关配置。 show: true, lineStyle: {// 仪表盘轴线样式。 opacity: 1, width: 15, shadowBlur: 10, }, }, pointer: { // 仪表盘指针。 show: true, length: "70%", width: 4, }, }, ], }); }, }, }
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR(引进版)【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大,至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大,至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】