您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)Vue中如何使用echarts可視化圖表,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
打開后左邊是代碼,右邊是圖表:
app.title = '環(huán)形圖';option = { tooltip: { trigger: 'item', formatter: "{a} <br/>: {c} (a7xkcjn%)" }, 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、寫一個div容器用來承載圖表:
<div class="hccalone"> <div id="teamLeader" style="float:left;width:100%;height: 300px"></div></div>
上面代碼中設(shè)置一個div(設(shè)置好高度、大小等屬性,設(shè)置一個id)
4、寫一個方法用來初始化圖表代碼(直接復(fù)制粘貼官網(wǎng)文檔的代碼m修改一下容器id和各部分的數(shù)值即可):
getTeamLeader(){ var myChart = echarts.init(document.getElementById('teamLeader')); myChart.setOption({ title : { text: '團(tuán)隊考核情況', x:'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>: {c} (wdwcp30%)" }, 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:'未完成'} ] } ] }); }
看完上述內(nèi)容,你們對Vue中如何使用echarts可視化圖表有進(jìn)一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。