vue使用echarts图表
生活随笔
收集整理的這篇文章主要介紹了
vue使用echarts图表
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
https://www.jianshu.com/p/2894b781063b
1、安裝
npm install echarts // npm install echarts --save2、引入 echarts
import * as echarts from 'echarts';3、寫一個div容器用來承載圖表:
<div id="teamLeader"></div>4、寫一個方法,(直接復(fù)制粘貼官網(wǎng)文檔的代碼m修改一下容器id和各部分的數(shù)值即可)初始化頁面的時候,調(diào)用一下這個方法即可。
mounted() {this.getTeamLeader() }, methods: {getTeamLeader(){// 方法里面直接復(fù)制圖表的js代碼,修改對應(yīng)的id值就可以var myChart = echarts.init(document.getElementById('teamLeader'));myChart.setOption({ 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的vue使用echarts图表的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue项目实现登录(sessionSto
- 下一篇: vue项目中使用mock(一)