订单堆积图

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);

});