基礎(chǔ)
main.js
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
組件
<div id="orderStatistics"></div>
// xData為橫軸數(shù)據(jù)，yData為縱軸數(shù)據(jù)淹真， title 為標題
graphical(xData, yData, title) {
let myChart = this.$echarts.init(document.getElementById('orderStatistics'));
myChart.setOption({
title: {
text: title,
textStyle: {
color: '#989898',
fontStyle: 'normal',
fontWeight: 'bold',
fontSize: 12
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
},
legend: {
data: ['訂單總數(shù)']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '訂單總數(shù)',
type: 'line',
smooth: true,
stack: '總量',
itemStyle: {
normal: { // 顏色漸變函數(shù) 前四個參數(shù)分別表示四個位置依次為左讶迁、下、右核蘸、上
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#81befd' // 0% 處的顏色
}, {
offset: 0.4, color: '#e4f2ff' // 100% 處的顏色
}, {
offset: 1, color: '#fff' // 100% 處的顏色
}]
), // 背景漸變色
lineStyle: { // 系列級個性化折線樣式
width: 3,
type: 'solid',
color: '#409EFF' // 折線的顏色
}
},
emphasis: {
color: '#409EFF',
lineStyle: { // 系列級個性化折線樣式
width: 2,
type: 'dotted',
color: '#409EFF'
}
}
}, // 線條樣式
symbolSize: 2, // 折線點的大小
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data: yData
}
]
});
},
自定義懸浮顯示tooltip
1巍糯、將縱軸數(shù)據(jù)的數(shù)組存放對象，而不是單個值
2客扎、自定義formatter
this.orderEchartArrOrder = res.data.statisticsFigure || []
let xData = []
let yData = []
let title = ''
this.orderEchartArrOrder.forEach((item, index, arr) => {
xData.push(item.statisticsDate);
// yData.push(item.statisticsOrderAmount)
yData.push({
value: item.statisticsOrderAmount,
desc: item.statisticsDate
})
})
title = '近一周訂單統(tǒng)計'
that.graphical(xData, yData, title)
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: function(params) {
var itemTitle = params[0];
var res = itemTitle.data.desc + '<br/>'
+ '訂單總數(shù)：' + itemTitle.data.value
return res;
}
},
