Vue+Echarts动态数据赋值_echart赋值_程序员海军的博客-程序员秘密

技术标签: 日常坑  Vue开发实战总结  vue.js  

最近,在写公司大屏可视化项目,可视化与大屏 结合最好的就是echarts 了。

在Echarts的时候,数据不会始终是静态的,要结合实际项目出发,将动态数据 渲染到 图标上去。

在 使用 Vue + Echarts 动态赋值时,遇到点小坑,数据渲染不上去,找了半天找到一个解决办法。


如有更好的办法,可以下面留言或者发我邮箱 [email protected]

解决思路

  • 先绑定Echarts 视图id
  • 然后进行 接口数据请求
  • 将 Echarts 配置项 option放到接口请求成功里,然后就可以 动态赋值了

完整代码

// 1. 绑定视图id
let bing = this.$echarts.init
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/HaiJun_Aion/article/details/106491305

智能推荐

获取配置文件内容@Value和@[email protected]与@configration-程序员秘密

1.配置文件内容test: token: eykhisyfsdfhjkdsfiowefjj uid: 110 user_name: admin password: 1234562.使用@Value注解@Value("${变量}")@Value("${test.user_name}") private String userName;@Value("#{表达式}"),可以使用spel表达式@Value("#{12*2}")private Integer sum

抖音效果字体_怪獸哪裡跑的博客-程序员秘密

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抖音风格字体</title> <style> body { background-color: gray;...

iOS 使用学习笔记1_上孟的博客-程序员秘密

1、在Mac OS中NSWindow的父类是NSResponder,而在i OS 中UIWindow的父类是UIVIew。程序一般只有一个窗口但是会又很多视图。2、UIView的作用:描画和动画,视图负责对其所属的矩形区域描画、布局和子视图管理、事件处理、可以接收触摸事件、事件信息的载体、等等。 3、UIViewController负责创建其管理的视图及在低内存的时候将他们从内存中移除

项目实训7--博客发布页_星灵梦境的博客-程序员秘密

1、创建博客发布页<!DOCTYPE html><html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head th:replace="admin/_fragments :: head(~{::title})"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

selenium踩坑1_你在东北玩泥巴的博客-程序员秘密

1.Libs下放了一个HTMLTestRunner.py文件:C:\Users\demi.zhou\AppData\Local\Programs\Python\Python37\libs贴这段代码:import unittestfrom HTMLTestRunner import HTMLTestRunnerimport timediscover = unittest.defaultT...

springboot使用JPA配置_大佬喝可乐丶的博客-程序员秘密

使用Idea新建springboot项目,通常会使用最新的springboot版本,此时引入的mysql的版本和springboot的版本如果不匹配的话,会导致项目无法启动pom文件<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x...

随便推点

mysql数据库简介_大塔姆的博客-程序员秘密

前言:数据库的种类很多,Oracle、Sql Server、mySQL、Access等他们个自有自己的特点和应用范围,之前用的比较多的是SqlServer,接触过通过navicat接触过mysql的可视化界面,但是没有安装过mysql,也没有在dos下操作过相应的命令。这次通过实践亲自体验了一下。简介:由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低...

Spring Cloud Gateway整合nacos实战(三)_spring-cloud-starter-gateway_Java技术债务的博客-程序员秘密

Spring Cloud GateWay是Spring Cloud的⼀个全新项⽬,⽬标是取代Netflix Zuul,它基于Spring5.0+SpringBoot2.0+WebFlux(基于⾼性能的Reactor模式响应式通信框架Netty,异步⾮阻塞模型)等技术开发,性能⾼于Zuul,官⽅测试,GateWay是Zuul的1.6倍,旨在为微服务架构提供⼀种简单有效的统⼀的API路由管理⽅式。

Linux文件编程1_wyp784035821的博客-程序员秘密

系统调用是指操作系统提供给用户的一组“特殊”接口,用户程序可以通过这组“特殊”接口来获得操作系统内核提供的的服务。       程序的运行空间分为内核空间和用户空间(也就是常称的内核态和用户态),它们分别运行在不同的级别上,在逻辑上是相互隔离的。因此,用户进程在通常情况下不允许访问内核数据,也无法使用内核函数,它们只能在用户空间操作用户数据,调用用户空间的函数。系统调用并不是直接与程序员进行交

获得手机硬件信息_weixin_34127717的博客-程序员秘密

关键类:android.os.Build.*如果需要针对不同手机品牌做适配,可以通过手机厂商(Manufacturer)信息做代码控制,更精确一些可以使用型号(Model),Model可以更精确指向一款手机。下面记录我手里的几台手机的信息:可见Product和Device获取的信息也不太稳定,如红米3得到的都是ido。魅蓝Note5ID: NRD90MDISPL...

cordova 插件_weixin_30691871的博客-程序员秘密

1.移动端WebApp开发,如何实现状态栏沉浸式效果? cordova-plugin-fullscreen2.cordova热更新插件-不发布应用市场动态更新APP源码https://github.com/nordnet/cordova-hot-code-pushCordova Hot Code Push Plugin此插件提供了可以使cordova app自动更新web...

推荐文章

热门文章

相关标签