如何使用E'chart JS创建以下图表

Question

我使用了echart js，现在使用e'chart创建此类图表。 E'chart JS可以使用。

enter image description here

Answer 1

`var dataAll = [             [20,14,28,29,200,9,24,20,14,28,29,200,9,24,20,14,28,29,200,9,24,20,14,28,29,200,9,24,20 ，14,28,29,200,9,24,20,14,28,29,200,9,24]，             [2,7,3,2,5,1,8,2,7,3,2,5,1,8,2,7,3,2,5,1,8,2,7,3,2 ，5,1,8,2,7,3,2,5,1,8,2,7,3,2,5,1,8]，             [34,15,30,53,65,15,48,34,15,30,53,65,15,48,34,15,30,53,65,15,48,34,15,30,53 ，65,15,48,34,15,30,53,65,15,48,34,15,30,53,65,15,48]，             [38,12,35,58,68,16,49,38,12,35,58,68,16,49,38,12,35,58,68,16,49,38,12,35,58 ，68,16,49,38,12,35,58,68,16,49,38,12,35,58,68,16,49]，         ];

选项= {

        color: ['#fff'],

        tooltip : {
            trigger: 'axis',
            axisPointer : {            
                type : 'shadow'        
            }
        },
        legend: [{
            data: ['Biding', 'Cancel', 'Cancel By User'],
            align: 'left',
        },
        {
            data: ['Driver Rating'],
            align: 'left',
            bottom:'10%',
        },
        ],

        grid: [
            {x: '10%', y: '5%', width: '85%', height: '30%'},

            {x: '10%', y2: '18.3%', width: '85%', height: '30%'},

        ],
        //calculable : true,
        xAxis : [
            {type:'category',gridIndex: 0, data : ['Operator 1', 'Operator 2', 'Operator 3', 'Operator 4', 'Operator 5', 'Operator 6', 'Operator 7','Operator 8', 'Operator 9', 'Operator 10', 'Operator 11', 'Operator 12', 'Operator 13', 'Operator 14', 'Operator 15','Operator 16', 'Operator 17', 'Operator 18', 'Operator 19', 'Operator 20', 'Operator 21','Operator 1', 'Operator 2', 'Operator 3', 'Operator 4', 'Operator 5', 'Operator 6', 'Operator 7','Operator 8', 'Operator 9', 'Operator 10', 'Operator 11', 'Operator 12', 'Operator 13', 'Operator 14', 'Operator 15','Operator 16', 'Operator 17', 'Operator 18', 'Operator 19', 'Operator 20', 'Operator 21'],  axisTick: {show: false},nameGap:'40',axisLabel: {fontWeight: 'bold',rotate: 60}},
            {type:'category',gridIndex: 1, data : ['Operator 1', 'Operator 2', 'Operator 3', 'Operator 4', 'Operator 5', 'Operator 6', 'Operator 7','Operator 8', 'Operator 9', 'Operator 10', 'Operator 11', 'Operator 12', 'Operator 13', 'Operator 14', 'Operator 15','Operator 16', 'Operator 17', 'Operator 18', 'Operator 19', 'Operator 20', 'Operator 21','Operator 1', 'Operator 2', 'Operator 3', 'Operator 4', 'Operator 5', 'Operator 6', 'Operator 7','Operator 8', 'Operator 9', 'Operator 10', 'Operator 11', 'Operator 12', 'Operator 13', 'Operator 14', 'Operator 15','Operator 16', 'Operator 17', 'Operator 18', 'Operator 19', 'Operator 20', 'Operator 21'],axisLabel:{show:false},axisTick: {show: false}},
        ],
        yAxis : [
            {type:'value',gridIndex: 0,splitLine:{lineStyle:{type:'dashed'}},  axisTick: {show: false},axisLabel: {show: false},axisLine: {show: false},splitLine: {show: false}},
            {type:'value',gridIndex: 1,inverse:true,splitLine:{lineStyle:{type:'dashed'}}, axisTick: {show: false},axisLabel: {show: false},axisLine: {show: false},splitLine: {show: false}},

        ],
        /*dataZoom: [
        {
            show: true,
            realtime: true,
            start: 1,
            end: 50,
            xAxisIndex: [0, 1]
        },
        {
            type: 'inside',
            realtime: true,
            start: 1,
            end: 50,
            xAxisIndex: [0, 1]
        }
    ],*/
        series : [
            {
                name: 'Biding',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: dataAll[0],
                stack: 'Total amount',
                itemStyle:{color:'#62cf72'},
                barWidth:20,
                label: {
                    normal: {
                        show: false,
                        position: 'top'
                    }
                },
            },
            {
                name: 'Cancel',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                stack: 'Total amount',
                data: dataAll[2],
                itemStyle: {color: '#fa76ee'},
                barWidth:20,

                label: {
                    normal: {
                        show: false,
                        position: 'top'
                    }
                },
            },
            {
                name: 'Cancel By User',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                stack: 'Total amount',
                data: dataAll[3],
                itemStyle: {color: '#739ffe'},
                barWidth:20,

                label: {
                    normal: {
                        show: false,
                        position: 'top'
                    }
                },
            },
            {
                name: 'Driver Rating',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: dataAll[1],
                itemStyle: {color: '#feb082'},
                barWidth:20,
                label: {
                    normal: {
                        show: false,
                        position: 'bottom'
                    }
                },
            },

        ]
    });

`