1. div
<el-row :gutter="12">
<el-col :span="12">
<el-card shadow="always" class="el-row-class-top3">
<span style="margin-left: 0px;">
<div id="main" style=" 750px;height:300px;"></div>
</span>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="always" class="el-row-class-top3">
<span style="margin-left: 0px;">
<div id="main2" style=" 750px;height:300px;"></div>
</span>
</el-card>
</el-col>
</el-row>
2.data
getIndexdata() {
// 3.基于准备好的dom，初始化echarts实例
var myChart = this.$ecahrter.init(document.getElementById('main'))
var myChart2 =this.$ecahrter.init(document.getElementById('main2'))
var myChart3 =this.$ecahrter.init(document.getElementById('main3'))
var myChart4 =this.$ecahrter.init(document.getElementById('main4'))
// 绘制图表
myChart.setOption({
title: {
text: '近7天订单总金额排行榜'
},
tooltip: {},
xAxis: {
name: '近7天日期',
data: this.totalOrderAmout7days_date.reverse()
},
axisLabel: {
intreval:0,
formatter: function(params) {
var newParamsName = ''
var paramsNameNumber = params.length
var provideNumber = 4
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
for (let row = 0; row<rowNumber; row++) {
newParamsName +=
params.substring(
row * provideNumber,
(row + 1) * provideNumber
) + '
'
}
return newParamsName
},
},
yAxis: {
type: 'value',
name: '订单金额(元)',
axisLabel:{
formatter:function(value)
{
return value;
}
}
},
series: [{
name: '订单金额',
type: 'bar',
data: this.totalOrderAmout7days_data.reverse()
}]
});
myChart2.setOption({
title:{
text: '近7天订单量走势图'
},
xAxis: {
name: '近7天日期',
type: 'category',
data: this.totalOrderCount7days_date.reverse(),
},
axisLabel: {
intreval:0,
formatter: function(params) {
var newParamsName = ''
var paramsNameNumber = params.length
var provideNumber = 4
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
for (let row = 0; row<rowNumber; row++) {
newParamsName +=
params.substring(
row * provideNumber,
(row + 1) * provideNumber
) + '
'
}
return newParamsName
},
textStyle: {
color: '#7c8893',
fontSize: 5
}
},
yAxis: {
type: 'value',
name: '订单量(个)',
splitNumber:10,
axisLabel:{ //返回y轴的值
formatter:function(value)
{
return value;
}
}
},
series: [{
name: '订单量',
data: this.totalOrderCount7days_data.reverse(),
type: 'line'
}]
});
myChart3.setOption({
title: {
text: '商户构成比例图',
subtext: '实时统计',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['运营商的商户', '代理商的商户', '业务员的商户']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data:this.MchTypeData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
myChart4.setOption({
title: {
text: '近7天开通商户走势图',
},
xAxis: {
name: '近7天日期',
type: 'category',
data: this.totalMchCount7days_date.reverse(),
},
axisLabel: {
intreval:0,
formatter: function(params) {
var newParamsName = ''
var paramsNameNumber = params.length
var provideNumber = 4
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
for (let row = 0; row<rowNumber; row++) {
newParamsName +=
params.substring(
row * provideNumber,
(row + 1) * provideNumber
) + '
'
}
return newParamsName
},
},
yAxis: {
type: 'value',
name: '开通商户量(个)',
axisLabel:{
formatter:function(value)
{
return value;
}
}
},
series: [{
data: this.totalMchCount7days_data.reverse(),
type: 'line',
smooth: true
}]
});
}