基本概念

如下的例子，刚开始运行：

点击按钮：

数据库修改下数据：

再点击按钮刷新下：

下面给出请求的json数据:

刷新有2个方式

第一种是强制刷新，这样是有问题的，数据和图表不能同步：

this.$forceUpdate()

本人推荐下面这种方式，通过绑定组建的key值

<barChartItem ref="barItem" v-bind:count="numCount" v-bind:valueList="valueList" v-bind:key="valueList.toString()"></barChartItem>

把key绑定成变动的值，就可以实时刷新了

代码

程序结构如下：

关键代码

BarCharts.vue

<template><div><div id="main" style="width: 500px; height:500px"></div></div>
</template><script>
export default {props: ['count', 'valueList'],watch:{count:val => {alert(this.count)}},mounted(){this.initGra();},methods: {//开始画图了initGra(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('main'));this.getData();},getData(){if (myChart != null && myChart != "" && myChart != undefined) {myChart.dispose();}// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('main'));//初始化数据let dataList = [];for(let i = 0; i < this.count; i++){dataList.push(this.valueList[i]);}console.log(this.count)console.log(this.valueList)//alert(this.count)//alert(this.valueList)// 指定图表的配置项和数据let option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: dataList}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}}
}
</script><style scoped>.item{color: green;}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'
import echarts from 'echarts'
import TestEChart from './TestEChart'Vue.config.productionTip = false
Vue.prototype.$axios=Axios
Vue.prototype.$echarts = echarts/* eslint-disable no-new */
new Vue({el: '#app',components: { TestEChart },template: '<TestEChart/>',
})

TestEChart.vue

<template><div><barChartItem ref="barItem" v-bind:count="numCount" v-bind:valueList="valueList" v-bind:key="valueList.toString()"></barChartItem><div><button @click="handleSubmit">获取</button></div></div>
</template><script>import BarChartItem from './components/BarCharts'export default {data() {return {numCount: 0,valueList: []}},components: {'barChartItem' : BarChartItem},methods: {handleSubmit(){this.$axios({type: 'get',url: '/gra/list'}).then(res => {//console.log(res.data.data)let jsonTest = res.data.data.content//目前只有1条数据 展示这么写this.numCount = jsonTest[0].countthis.valueList = jsonTest[0].value;//console.log(this.numCount)//console.log(this.valueList)this.$refs.barItem.getData()//this.$set()//this.$forceUpdate()}).catch(err=>{alert(err)})},}
}
</script><style></style>

前端笔记-vue cli中v-bind动态数据实时更新相关推荐

前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
前端笔记-vue cli中使用router-link进行路由跳转
目录以前的方法新方法以前的方法以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项如下的请求: methods:{getData(){axios.all([ ...
前端笔记-vue cli中使用echarts画江苏省地图
目录基本概念代码与实例基本概念这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts https://blog.csdn.net/qq78442761/a ...
Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
前端笔记-vue cli使用echarts
目录过程代码与实例过程首先下载echarts cnpm install echarts -S //或者是 cnpm install echarts --save 下载好后: 在main.js中 ...
前端笔记-vue cli为web添加底纹
目录基本概念代码与实例基本概念这里主要是使用了css预处理首先下载包 npm install stylus stylus-loader 随后创建文件,然后写代码这里还要导入代码: 这里还要 ...
前端笔记-vue cli引入sementic-ui（sementic-ui-vue）
运行截图如下: 原文链接如下: https://semantic-ui-vue.github.io/#/ 下面给出截图,部分网络不能访问
Leaflet笔记-把leaflet-tilelayer-wmts移植到vue cli中（含思路）
目录前言过程前言关于leaflet的webpackage使用npm安装官方是有明显的解析但是关于插件特别是TileLayer.WMTS是不提供的,但提供了源码,可以稍微修改下,就能在vue ...

前端笔记-vue cli中v-bind动态数据实时更新

基本概念

代码

前端笔记-vue cli中v-bind动态数据实时更新相关推荐

最新文章

热门文章