【分享】vue+Echarts动态数据已经赋值，但是无法渲染页面的问题

前言:对于后端的小伙伴来说，现在用vue-element-admin 真的太香了，毕竟Java向的程序员，光后端技术栈就得学到头皮发麻啊，所以，感谢尤雨溪，感谢饿了么，感谢花裤衩。

最近在帮朋友写东西的时候，用到了饼图，可是数据明明已经加载到了，并且格式是对的，但是为啥就没法渲染呢？

出现类似的问题，我们的思路往往是如下排除:

1.代码本身是否有问题。

2.数据格式对吗。

3.代码加载顺序。

所以，这就要求我们对前端，或者直接说js弱类型(当然es6和ts是比较严格了)比较适应，同时对Vue基础比较扎实，然后就是对Vue生命周期钩子熟悉了。

遇到了这个问题，一则可以使用watch，监听数据变化。

 watch: {echarts_option: {handle(newVal,oldVal) {if(this.chart){if(newVal){this.chart.setOption(newVal);}else{this.chart.setOption(oldVal);}}}}}

这里的this.chart是放在data里边的，你的chart的实例

第二个是，直接将重新绘制的函数，写在后端请求的then里边

getData() {summaryAPI.getTerminalList().then(data => {console.log(data.data);let dataArray = [];dataArray = data.data;console.log(dataArray);for(let i = 0;i<dataArray.length;i++){this.legendData.push(dataArray[i].type);let singleData = {value: dataArray[i].count,name: dataArray[i].type}this.seriesData.push(singleData);}console.log('data->'+this.legendData+'-'+this.seriesData)this.$nextTick(() => {this.initChart()})}).catch();}

【分享】vue+Echarts动态数据已经赋值，但是无法渲染页面的问题相关推荐

vue echarts动态数据定时刷新
关键代码截图完整代码 <template><div class="block"><div :class="className" ...
Echarts 学习系列(3)-Echarts动态数据交互
写在前面上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件开发环境:win10 ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
基于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前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
echarts 动态数据动画效果
在做项目时,当我们用到echarts图表时,大部分产品经理都会要求我们给图表加上一些动画效果,让页面看起来更加炫酷.其实给图表加上动画效果不难,如果数据是实时数据这样做动画效果会更简单点,就怕数据不是 ...
vue + echarts实现数据可视化统计页面
1.该项目自行下载element-ui.moment.echarts等vue的相关依赖包: 2.该项目里面的echarts样式主题"walden.js"是个人自己配置的样式,可到官 ...

【分享】vue+Echarts动态数据已经赋值，但是无法渲染页面的问题

【分享】vue+Echarts动态数据已经赋值，但是无法渲染页面的问题相关推荐

最新文章

热门文章