Vue.JS(2)Monitor Water Console - ChartJS and Axios
Vue.JS(2)MonitorWaterConsole-ChartJSandAxios
IjustlearnedVue.JS10minutesago,haha,trytousethistobuildmyWaterMonitorConsolewithmyBackendService.
ChecktheVersionforcharts
>npminfovue-chartjsversion
3.1.1
>npminfochart.jsversion
2.7.1
Addthosetothepackage.json
"dependencies":{
"vue":"^2.5.2",
"vue-router":"^3.0.1",
"vue-chartjs":"^3.1.1",
"chart.js":"^2.7.1"
},
>npminstall
FindanotherverygoodexampleProject,wecantakesomereferencesfromthere.
https://github.com/tithi021/CRUD-VueJs
EnabletheIDEinSublimeText3withthishttps://github.com/vuejs/vue-syntax-highlight
Sofinally,Isetup2things.DemotheChartsJswithaxiosRestfulClient.
PutaverysimpleCRUDwithoutaxioswhichmakesmelikevue.js.IheardfromsomefriendsinChina.Actually,theyusevue.jsmoreandhasmoredocumentsandsamplesonthat.
Projectisinhere.monitor-water
alldependencyhere
"dependencies":{
"vue":"^2.5.2",
"vue-router":"^3.0.1",
"vue-chartjs":"^3.1.1",
"chart.js":"^2.7.1",
"bootstrap-vue":"^2.0.0-rc.1",
"jquery":"^3.3.1",
"axios":"0.17.1"
},
main.jsistheentree
//TheVuebuildversiontoloadwiththe`import`command
//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
Vue.config.productionTip=false
/*eslint-disableno-new*/
newVue({
el:'#app',
router,
components:{App},
template:'<App/>'
})
HereisthemainApp.vue
<template>
<divid="app">
<router-view></router-view>
</div>
</template>
<script>
exportdefault{
name:'App'
}
</script>
<style>
#app{
font-family:'Avenir',Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-align:center;
color:#2c3e50;
margin-top:60px;
}
</style>
Youcanadddifferentrouterhereinrouter/index.js
importVuefrom'vue'
importRouterfrom'vue-router'
importBootstrapVuefrom'bootstrap-vue'
import'bootstrap-vue/dist/bootstrap-vue.css'
import'bootstrap/dist/css/bootstrap.css'
importHelloWorldfrom'@/components/HelloWorld'
importProductAddfrom'@/components/ProductAdd'
importProductListfrom'@/components/ProductList'
importNavBarfrom'@/components/NavBar'
importWaterReleasefrom'@/components/WaterRelease'
Vue.use(Router)
Vue.use(BootstrapVue)
Vue.component('NavBar',NavBar)
constEventBus=newVue()
Object.defineProperties(Vue.prototype,{
$bus:{
get:function(){
returnEventBus
}
}
})
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'HelloWorld',
component:HelloWorld
},
{
path:'/product_list',
name:'ProductList',
component:ProductList
},
{
path:'/product_add',
name:'ProductAdd',
component:ProductAdd
},
{
path:'/water_release',
name:'WaterRelease',
component:WaterRelease
}
]
})
FollowmyfriendinChina’sguideline,Iputalljavascriptinservicesandutilsdirectories,butalltemplaterelatedincomponents.
WaterRelease.vue
<template>
<divclass="container">
<b-containerfluid>
<!--navbar-1.vue-->
<NavBar/>
<LineChart:chart-data="datacollection"/>
<button@click="fillData()">FetchData</button>
</b-container>
</div>
</template>
<script>
importLineChartfrom'../utils/LineChart'
import{RESTfulClient}from'../utils/RESTFulClient'
exportdefault{
components:{
LineChart
},
data(){
return{
datacollection:{labels:[],datasets:[]},
posts:[],
errors:[]
}
},
mounted(){
//this.fillData()
},
methods:{
fillData(){
letresult={
labels:['January','February','March','April','May','June','July'],
datasets:[
{
label:'DataOne',
backgroundColor:'#FC2525',
data:[40,39,10,40,39,80,40]
},{
label:'DataTwo',
backgroundColor:'#05CBE1',
data:[60,55,32,10,2,12,53]
}
]
}
RESTfulClient.get(`posts`)
.then(response=>{
this.posts=response.data
console.log(this.posts)
})
.catch(e=>{
this.errors.push(e)
})
this.datacollection=result
}
}
}
</script>
<!--Add"scoped"attributetolimitCSStothiscomponentonly-->
<stylescoped>
.container{
width:80%;
}
h1,h2{
font-weight:normal;
}
ul{
list-style-type:none;
padding:0;
}
li{
display:inline-block;
margin:010px;
}
a{
color:#42b983;
}
</style>
SampletohandleallRESTfulcallinutils/RESTfulClient.js
importaxiosfrom'axios'
exportconstRESTfulClient=axios.create({
baseURL:`http://jsonplaceholder.typicode.com/`,
headers:{
Authorization:'Bearer{token}'
}
})
AlltheChartJSthinghandledinutils/LineChart.js
import{Bar,mixins}from'vue-chartjs'
const{reactiveProp}=mixins
exportdefault{
extends:Bar,
mixins:[reactiveProp],
mounted(){
this.renderChart(this.chartData,{responsive:true,maintainAspectRatio:false})
}
}
YoucanFindmoreChartJSoptionhere
http://www.chartjs.org/docs/latest/
YoucanfindmoreVue.jsdocumenthere
https://cn.vuejs.org/
References:
https://github.com/apertureless/vue-chartjs
https://github.com/keepfool/vue-tutorials
https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a
https://github.com/tithi021/CRUD-VueJs
backendcall
https://alligator.io/vuejs/rest-api-axios/
https://github.com/axios/axios
vue
http://www.cnblogs.com/stealth7/p/7112216.html
https://cn.vuejs.org/