Question

我正在尝试使用EChart创建组合图表。我是EChart库的新手。我必须创建如下图 Configuration
折线图应从头开始。 XAxis值是月。因此，折线图的值应为月份开始时的值。条形图值在一个月内。例如：如果折线图代表月初的雇员人数，则两个系列的条形图将显示新员工并在该月内存在。

我试图将此图表创建为组合图表，但是使用多个yAxis的yAxis值存在巨大差距，这对我不起作用。而且，当我设置“ boundaryGap：false”以使折线图从头开始时，条形图就会从左侧的网格中移开。

然后，我尝试使用两条单独的折线和条形图来创建图表。我可以走近一些，但boundaryGap再次给我带来了困难。

Chart need to build

如果我可以将条形图放入网格内，那将是可以的。否则我可以使用ECharts创建图形吗？

以下是我对两个图表的选择。

lineOptions : {
                grid:{
                   top:20,
                   bottom:5,
                    right:0
                },
                xAxis: {
                    type: 'category',
                    data: ['Jul-17','Aug-17','Sep-17','Oct-17','Nov-17','Dec-17','Jan-18','Feb-18','Mar-18','Apr-18','May-18','Jun-18'],
                    splitArea: {show:false},
                    splitLine: {show:false},
                    boundaryGap:false,
                    show:false
                },
                yAxis: {
                    type: 'value',
                    min: 18000,
                    max: 20100,
                    interval: 1000,
                    splitArea: {show:false},
                    splitLine: {show:false},
                    axisLabel: {
                        formatter: function (value) {
                            return value/1000 + "K";
                        }
                    },
                    axisLine : {
                        show: false
                    },
                    axisTick : {
                        show: false
                    }
                },
                series: [{
                    data: [18023, 18100, 18150, 18175, 18200, 18300,18700,18750,18775,18825,19575],
                    type: 'line',
                    itemStyle : {
                        normal: {
                            color: 'blue'
                        }
                    },

                    markLine : {
                        symbol: 'none',itemStyle: {
                            normal: {
                                color: 'gray',
                                hoverAnimation: false
                            }
                        },
                        lineStyle:{
                            type:'solid'
                        },
                        data : [
                            [
                                {xAxis:'May-18',yAxis:18000},{xAxis:'May-18',yAxis:19575}
                            ],
                            [
                                {xAxis:'Apr-18',yAxis:18000},{xAxis:'Apr-18',yAxis:18825}
                                ],
                                [{xAxis:'Mar-18',yAxis:18000},{xAxis:'Mar-18',yAxis:18775}],
                                [{xAxis:'Feb-18',yAxis:18000},{xAxis:'Feb-18',yAxis:18750}],
                                [{xAxis:'Jan-18',yAxis:18000},{xAxis:'Jan-18',yAxis:18700}],
                                [{xAxis:'Dec-17',yAxis:18000},{xAxis:'Dec-17',yAxis:18300}],
                                [{xAxis:'Nov-17',yAxis:18000},{xAxis:'Nov-17',yAxis:18200}],
                                [{xAxis:'Oct-17',yAxis:18000},{xAxis:'Oct-17',yAxis:18175}],
                                [{xAxis:'Sep-17',yAxis:18000},{xAxis:'Sep-17',yAxis:18150}],
                                [{xAxis:'Aug-17',yAxis:18000},{xAxis:'Aug-17',yAxis:18100}],
                                [{xAxis:'Jul-17',yAxis:18000},{xAxis:'Jul-17',yAxis:18023}]
                        ]
                    }
                }]

            };

barOptions : {
                grid:{
                    top:5,
                    bottom:20,
                    right:0
                },
                xAxis: {
                    type: 'category',
                    data: ['Jul-17','Aug-17','Sep-17','Oct-17','Nov-17','Dec-17','Jan-18','Feb-18','Mar-18','Apr-18','May-18','Jun-18'],
                    splitArea: {show:false},
                    splitLine: {show:true},
                    boundaryGap:false
                },
                yAxis: {
                    type: 'value',
                    interval: 200,
                    splitArea: {show: false},
                    splitLine: {show: false},
                    axisLine : {
                        show: false
                    },
                    axisTick : {
                        show: false
                    }
                },
                series: [
                    {
                        type:'bar',
                        data:[600, 400, 375, 375, 360, 800, 500, 400, 450, 500, 700, 900]
                    },
                    {
                        type:'bar',
                        data:[375, 340, 300, 380, 375, 400, 380, 500, 510, 400, 380, 520]
                    }
                ]

            }

请帮助我创建此图表。

ECharts中的折线图

0 个答案: