javascript - 如何使用 E'chart JS 创建下图

Question

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

在此处输入图像描述

标签： javascriptjquery

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'
                    }
                },
            },

        ]
    });

`