npm install echarts --save
这里就演示全局引入了,挂载到vue全局,后面使用时,直接使用 $echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
这里演示环形图表吧,刚好项目中用了,兄弟们有时间可以去echarts 官网去看看API
TIPS: 官网地址贴着了 ECharts 官网
要不然渲染不出来的;需要设置样式,那就套盒子,写样式;
当传入的数据改变时,需要重新渲染,这里我用watch 来监听 props 的值,改变时,就重新执行渲染函数;
先贴个效果吧:
下面就代码吧:
父组件中(引用组件)
这里的数据,后台在父组件中去请求后台去;这里不多赘述了哈;
echarts 组件
{{ this.data.residue }}
核TFLOPSG/
{{ this.data.total }}
核TFLOPSGCPU资源剩余量GPU资源剩余量内容资源剩余量硬盘资源剩余量
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~END~~~~~~~~~~~~~~~~~~~~~~~~~~~~