echarts Demo

Posted 2020-12-24 csj007523

 

 

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="width: 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="width: 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: {
data: this.totalOrderAmout7days_date.reverse()
},
axisLabel: {
intreval:0,
formatter: function(params) {  //4个子长度换行显示文字
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
},
// formatter:function(value,index) ////隔行显示文字
// {
// if (index % 2 != 0) {
// return ‘ ‘ + value;
// }
// else {
// return value;
// }
// //return value.toString().split("").join(" "); //竖着显示文字
// },

},
yAxis: {},
series: [{
name: ‘订单金额‘,
type: ‘bar‘,
data: this.totalOrderAmout7days_data.reverse()
}]
});
myChart2.setOption({
title:{
text: ‘近7天订单量走势图‘
},
xAxis: {
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‘
},
series: [{
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: {
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‘
},
series: [{
data: this.totalMchCount7days_data.reverse(),
type: ‘line‘,
smooth: true
}]
});

}