使用Echarts 实现双柱图效果

代码:
var data = [
['2019-09-03', 2688.4716, 1642, 2688.4716],
['2019-09-02', 2636.6496,1521, 2636.6496],
['2019-09-01', 2602.9838, 1511, 2602.9838],
['2019-08-31', 2602.9838, 1239.7125, 2602.9838], 
['2019-08-30', 2664.6283, 1100.58, 2664.6283],
['2019-08-29', 2678.9107, 1204.0229, 2678.9107],
['2019-08-28', 2300, 1261.5758, 2689.0],
['2019-08-27', 0, 0, 0]
]
// 可以写死图例,但不建议
var  legend_label = ['收货', '发货', '库存']
//数据形式 第一列为category x轴的数据
// 第二,三,四列分别对应剩下的数据
var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    dataset: {
        source: data
    },
    title: {
        text: '10日进销存监控',//设置主标题
        left: 'left'
    },
    legend: {
        data: legend_label // 控制图例 
                       // left,right可以控制图例距离容器方位
                      // textStyle可以控制图例文字样式
    },
    grid: {
        right: '1%'
    }, //设置图标和div上下左右之间的间距
    xAxis: [{
        inverse: true, // x轴左右数据是否翻转
        type: 'category',
        axisLabel: {
            interval: 0, //设置横坐标间隔显示
            rotate: 45 //代表x轴逆时针度数
        },
        axisPointer: {
            type: 'shadow'
        }
    }],
    yAxis: [{
        splitLine: { //网格线
            show: false // 不显示网格线
        },
        type: 'value',
        name: '单位(万)', // y轴单位
        min: 0, // y轴起始
        max: 3500, // y轴结束
        interval: 200, //y轴min-max中间间隔大小
        axisLabel: {
            formatter: '{value}' / 10000 // 数据转换y轴显示
        }
    }],
    series: [{
            name: '收货', // 对应图例数据
            type: 'bar', // 类型为"bar"柱状图
            color: '#4C84FF',
            barWidth: '30%', // 柱状宽度
            barGap: '40%', //不同系列的柱间距离
            //data: [450, 550, 700, 760, 796, 600, 580, 602, 812, 840]
        },
        {
            name: '发货',
            type: 'bar',
            color: '#87F7CF',
            barGap: '40%', // 柱状柱状之间的距离
            barWidth: '30%', // 柱状宽度
            // data: [600, 610, 710, 750, 801, 700, 620, 720, 830, 860]
        },
        {
            name: '库存',
            type: 'line', //折线
            color: '#EEED91',
            smooth: false, // 是平滑线,还是折线
            showSymbol: true,
            //symbol: 'circle', //设定为实心点
            //symbolSize: 12,  //设定实心点的大小
            lineStyle: {
                normal: {
                    color: '#EEED91', //折线的颜色
                    // width:'4'//折线粗细
                }
            },
            hoverAnimation: true, //折线数据点显示
            // data: [900, 1100, 1150, 1170, 1180, 1000, 1100, 1004, 1200, 1100]
        }
    ]
};

效果展示

16.png