目錄

?

?

基本概念

代碼

---

?

基本概念

如下的例子，剛開始運(yùn)行：

點(diǎn)擊按鈕：

數(shù)據(jù)庫修改下數(shù)據(jù)：

再點(diǎn)擊按鈕刷新下：

下面給出請求的json數(shù)據(jù):

刷新有2個方式

第一種是強(qiáng)制刷新，這樣是有問題的，數(shù)據(jù)和圖表不能同步：

this.$forceUpdate()

本人推薦下面這種方式，通過綁定組建的key值

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

把key綁定成變動的值，就可以實(shí)時刷新了

?

?

代碼

程序結(jié)構(gòu)如下：

關(guān)鍵代碼

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(){// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例let myChart = this.$echarts.init(document.getElementById('main'));this.getData();},getData(){if (myChart != null && myChart != "" && myChart != undefined) {myChart.dispose();}// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例let myChart = this.$echarts.init(document.getElementById('main'));//初始化數(shù)據(jù)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)// 指定圖表的配置項和數(shù)據(jù)let option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: dataList}]};// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。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條數(shù)據(jù) 展示這么寫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>

?

總結(jié)

以上是生活随笔為你收集整理的前端笔记-vue cli中v-bind动态数据实时更新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。