效果圖：
兩個(gè)角色在四個(gè)不同屬性下的對(duì)比：
image.png
1、文本圖：
image.png
2、折線圖：
image.png
3、柱狀圖：
image.png
4、png圖片導(dǎo)出：
image.png
代碼：
HTML中：
image.png
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="echarts" style="width: 800px;height:400px;margin-top:30px"></div>
定義一個(gè)draw方法：
draw() {
var myChart = this.$echarts.init(document.getElementById('echarts'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: '數(shù)據(jù)分析',
textStyle: { //主標(biāo)題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontSize: 14,
fontStyle: 'normal',
fontWeight: 'bold',
},
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['當(dāng)前客戶', '客戶平均']
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['銷售額（元）', '回款額（元）', '工作時(shí)間（小時(shí)）', '費(fèi)率動(dòng)態(tài)（元/小時(shí)）']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '當(dāng)前客戶',
type: 'bar',
data: [78, 80, 87, 93],
color: '#CC0066'
},
{
name: '客戶平均',
type: 'bar',
data: [90, 77, 62, 76],
color: '#009999'
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
}
在mounted中調(diào)用即可。
image.png
