订单堆积图
2021-12-10 本文已影响0人
Haraway
var category = ['待支付', '系统自动取消', '用户手动取消', '订单成交数'];
var lineData = ['2021/8/17',
'2021/8/18',
'2021/8/19',
'2021/8/20',
'2021/8/21',
'2021/8/22',
'2021/8/23',
'2021/8/24',
'2021/8/25',
'2021/8/26'];
var data =[[4,
4,
4,
4,
4,
4,
4,
4,
4,
1],
[59,
65,
87,
88,
79,
65,
72,
76,
90,
40],
[5,
6,
6,
9,
8,
5,
8,
8,
1,
5],
[89,
112,
137,
97,
66,
73,
83,
76,
74,
40]];
option = {
title: {
text: ''
},
legend: {
data:category
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: lineData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: category[0],
type: 'line',
stack: '总量',
data:data[0]
},
{
name: category[1],
type: 'line',
stack: '总量',
data: data[1]
},
{
name: category[2],
type: 'line',
stack: '总量',
data: data[2]
},
{
name: category[3],
type: 'line',
stack: '总量',
data:data[3]
}
]
};
var category = ['待支付', '系统自动取消', '用户手动取消', '订单成交数'];
var lineData = ['2021/8/17',
'2021/8/18',
'2021/8/19',
'2021/8/20',
'2021/8/21',
'2021/8/22',
'2021/8/23',
'2021/8/24',
'2021/8/25',
'2021/8/26'];
var data =[[4,
4,
4,
4,
4,
4,
4,
4,
4,
1],
[59,
65,
87,
88,
79,
65,
72,
76,
90,
40],
[5,
6,
6,
9,
8,
5,
8,
8,
1,
5],
[89,
112,
137,
97,
66,
73,
83,
76,
74,
40]];
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: true,
formatter: function(params) { //自定义函数修改折线图给数据加单位
console.log(params)
var str = '';//声明一个变量用来存储数据
str += '<div>'+ params[0].name +'</div>'; //显示日期的函数
for(var i=0; i<params.length; i++) { //图显示的数据较多时需要循环数据,这样才可以成功的给多条数据添加单位
str += '<div style="color:'+params[i].color+'"><span>'+ params[i].seriesName +'</span> : <span>'+ (params[i].data ? params[i].data+'%' : '暂无') +'</span></div>';
}
return str;
}
},
dataset: {
source: [
['product', '2021/8/17',
'2021/8/18',
'2021/8/19',
'2021/8/20',
'2021/8/21',
'2021/8/22',
'2021/8/23',
'2021/8/24',
'2021/8/25',
'2021/8/26'],
[category[0], 4,
4,
4,
4,
4,
4,
4,
4,
4,
1],
[category[1], 59,
65,
87,
88,
79,
65,
72,
76,
90,
40],
[category[2], 5,
6,
6,
9,
8,
5,
8,
8,
1,
5],
[category[3], 89,
112,
137,
97,
66,
73,
83,
76,
74,
40]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
emphasis: {focus: 'data'},
label: {
formatter: '{b}: {@2012} ({d}%)'
},
encode: {
itemName: 'product',
value: '2012',
tooltip: '2012'
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});