讓我們先看下官網(wǎng)：官網(wǎng)地址
image.png
點(diǎn)擊實(shí)例个盆，上圖中可以看到各種可視化圖表闯两，選擇其中一個(gè)圖表:
image.png
打開(kāi)后左邊是代碼,右邊是圖表:
image.png
app.title = '環(huán)形圖';
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>容为: {c} (ovzkomc%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
series: [
{
name:'訪問(wèn)來(lái)源',
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:'直接訪問(wèn)'},
{value:310, name:'郵件營(yíng)銷'},
{value:234, name:'聯(lián)盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
那么來(lái)只需要幾部就可以使用了:
1.本地安裝:
可以使用 npm 安裝 ECharts：npm install echarts
2.在index.html中引入 echarts
import echarts from 'echarts'
3.寫一個(gè)div容器用來(lái)承載圖表:
<div class="hccalone">
<div id="teamLeader" style="float:left;width:100%;height: 300px"></div>
</div>
上面代碼中設(shè)置一個(gè)div(設(shè)置好高度氮兵、大小等屬性,設(shè)置一個(gè)id)
4.寫一個(gè)方法用來(lái)初始化圖表代碼(直接復(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} (ckfufw6%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['已完成','未完成']
},
series: [
{
name:'訪問(wèn)來(lái)源',
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:'未完成'}
]
}
]
});
}
5.最后在初始化頁(yè)面的時(shí)候,調(diào)用一下這個(gè)方法即可,就可以看到圖表了：
image.png
