您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue怎么使用echarts可視化圖表”,在日常操作中,相信很多人在Vue怎么使用echarts可視化圖表問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”Vue怎么使用echarts可視化圖表”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
打開后左邊是代碼,右邊是圖表:
app.title = '環(huán)形圖';option = { tooltip: { trigger: 'item', formatter: "{a} <br/>: {c} (smxnk22%)" }, legend: { orient: 'vertical', x: 'left', data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎'] }, series: [ { name:'訪問來源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯(lián)盟廣告'}, {value:135, name:'視頻廣告'}, {value:1548, name:'搜索引擎'} ] } ]};
那么來只需要幾步就可以使用了:
1、本地安裝:
可以使用 npm 安裝 ECharts:
npm install echarts
2、在index.html中引入 echarts
import echarts from 'echarts'
3、寫一個(gè)div容器用來承載圖表:
<div class="hccalone"> <div id="teamLeader" style="float:left;width:100%;height: 300px"></div></div>
上面代碼中設(shè)置一個(gè)div(設(shè)置好高度、大小等屬性,設(shè)置一個(gè)id)
4、寫一個(gè)方法用來初始化圖表代碼(直接復(fù)制粘貼官網(wǎng)文檔的代碼m修改一下容器id和各部分的數(shù)值即可):
getTeamLeader(){ var myChart = echarts.init(document.getElementById('teamLeader')); myChart.setOption({ title : { text: '團(tuán)隊(duì)考核情況', x:'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>: {c} (mmq5spm%)" }, legend: { orient: 'vertical', x: 'left', data:['已完成','未完成'] }, series: [ { name:'訪問來源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:50, name:'已完成'}, {value:50, name:'未完成'} ] } ] }); }
Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì),Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
到此,關(guān)于“Vue怎么使用echarts可視化圖表”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。