销售量、销售额统计echarts 柱状配置项内容和展示

两个bar覆盖，时间轴统一控制，双轴维度数据展示

      var chartData= {
        dataTime: [
            "2014-10-07",
            "2014-10-14",
            "2014-10-21",
            "2014-10-28",
            "2015-02-16",
            "2015-02-23",
            "2015-03-02",
            "2015-09-12",
            "2015-09-19",
            "2015-11-14",
            "2015-11-21",
            "2015-11-28",
            "2016-01-29",
            "2016-02-05",
            "2016-02-12",
            "2016-04-01",
            "2016-04-08",
            "2016-06-02",
            "2016-07-28",
            "2016-08-04",
            "2016-08-11",
            "2016-08-18",
            "2017-01-24",
            "2017-01-31",
            "2017-02-07",
            "2017-02-14",
            "2017-08-07",
            "2017-08-14",
            "2017-08-21",
            "2017-08-28",
            "2017-09-04",
            "2017-09-11",
            "2017-09-18",
            "2017-09-24",
            "2017-10-01",
            "2017-10-08",
            "2017-10-15",
            "2017-10-22",
            "2017-10-29",
            "2017-11-05",
            "2017-11-12",
            "2018-06-15",
            "2018-06-22",
            "2018-06-29",
            "2018-07-06",
            "2018-07-13",
            "2018-07-20"
        ],
        x1:[
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40,
            40
        ],
        x2:[
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13,
            14,
            15,
            16,
            17,
            18,
            19,
            20,
            21,
            22,
            23,
            24,
            25,
            26,
            27,
            28,
            29,
            30,
            31,
            32,
            33,
            34,
            35,
            36,
            37,
            38,
            39,
            40,
            41,
            42,
            43,
            44,
            45,
            46,
            47
        ],
        x3:[
            1000000,
            2000000,
            3000000,
            4000000,
            5000000,
            6000000,
            7000000,
            8000000,
            9000000,
            1000000,
            1100000,
            1200000,
            1300000,
            1400000,
            1500000,
            1600000,
            1700000,
            1800000,
            1900000,
            2000000,
            2100000,
            2200000,
            2300000,
            2400000,
            2500000,
            2600000,
            2700000,
            2800000,
            2900000,
            3000000,
            3100000,
            3200000,
            3300000,
            3400000,
            3500000,
            3600000,
            3700000,
            3800000,
            3900000,
            4000000,
            4100000,
            4200000,
            4300000,
            4400000,
            4500000,
            4600000,
            4700000
        ]
};
var legend = [
            '实际到账佣金',
            '预计收入佣金',
            '收入佣金总计'
        ];

option = {
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legend
            },
            dataZoom: [{
                show: true,
                realtime: true,
                xAxisIndex: [0, 1],
            }],
            toolbox: {
                show: false
            },
            xAxis: [
                {
                    type: 'category',
                    data: chartData.dataTime
                },
                {
                    type: 'category',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { show: false },
                    splitArea: { show: false },
                    splitLine: { show: false },
                    data: chartData.dataTime
                }
            ],
            yAxis: [
                {
                    type: 'log',
                    axisLabel: { formatter: '{value}' }
                },
                {
                    type: 'value',
                    axisLabel: { formatter: '{value}' },
                    max: 100 //设置成最大值的两倍
                }
            ],
            series: [
                {
                    name: legend[1],
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color: '#B9A39B',
                            label: {
                                show: true,
                                formatter: function (p) { return p.value }
                            }
                        }
                    },
                    data: chartData.x1
                },
                {
                    name: legend[0],
                    type: 'bar',
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color: '#B34038',
                            label: {
                                show: true,
                                textStyle: { color: '#fff' }
                            }
                        }
                    },
                    data: chartData.x2,
                    //标记
                    markPoint: {
                        data: [
                            { value: 5, xAxis: '2015-02-16', yAxis: 5 },
                            { value: 6, xAxis: '2015-02-23', yAxis: 6 },
                            { value: 7, xAxis: '2015-03-02', yAxis: 7 }
                        ]
                    }
                },
                {
                    name: legend[2],
                    type: 'line',
                    data: chartData.x3
                }
            ]
        };