Echarts在线免费图表

 
            var data = {
    title: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07', '12-08', '12-09','12-10','12-11','12-12'],
    plan_production: [0.09,-1.98,-1,-2.64,0.32, 0.82,2.85,2.88,1.03,0.44,0.41,-4.11],
    actual_production: [0.09,-1.17,-1.12,-2.64,-3.1,-2.53,-0.58,1.49,3,2.23,0.53,4.98],
    attainment_rate: [0.09,-1.89,-2.89,-2.59,-2.27,-1.45,1.4,4.28,5.31,5.75,6.16,2.05],
    productivity: [0.09,-1.08,-2.2,-4.84,-7.94,-5,-2,-9.56,-6.56,-4.33,-3.8,1.18]
};

function getTableLine(num) {
    var list = [];
    var bottom = 122;
    var height = 20;
    for (var i = 0; i < num; i++) {
        list.push({
            type: 'line',
            bottom: bottom - i * height,
            right: 80,
            style: {
                fill: '#333',
                color:'#000'
                
            },
            shape: {
                x1: 0,
                y1: 0,
                x2: 3200,
                y2: 0
            }

        });
    }
    return list;
}
var lineList = getTableLine(6);


option = {
    title: [{
        text: '统计月份 \n计划数量\n实际产出\n达成率\n生产效率',
        top:596,
        left: 10,
        textStyle: {
            lineHeight: 20,
            fontSize: 13,
            fontWeight: 'normal',
            formatter: function(value) {
                return '{table|' + value + '}';
            },
            rich: {
                table: {
                    align: 'center'
                }
            }
        }
    }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }
    },
    legend: {
        data: ['计划数量', '实际产出', '达成率', '生产效率']
    },
    grid: {
        top:400,
        bottom: 130,
        left: 80,
        right: 80
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        data: data.title,
        axisTick: {
            length: 103,
            lineStyle:{
                color:'#efefef',
                width:1,
                shadowBlur: 0,
                shadowOffsetY:101,
                shadowColor:'#000000'
            }
        },
        axisLabel: {
            formatter: function(value, index) {
                return '' + value +
                    '\n' + data.plan_production[index] +
                    '\n' + data.actual_production[index] +
                    '\n' + data.attainment_rate[index] +
                    '%\n' + data.productivity[index] + '%';
            },
            lineHeight:20
        },
        z:1
    }],
    yAxis: [{
        type: 'value',
        scale: true,
        name: '数量',
        axisLine:{
            lineStyle:{
                color:'#000000',
                width:1,
                shadowOffsetY:101
                
            }
        },
        splitLine: {
            show: false,
            lineStyle:{color:'#000'},
        },
        min: function(v) {
            return ((v.max/1*-1)>v.min?v.min:(v.max/1*-1));
        },
        max:function(v){
            return (v.min>0? v.max : (v.min*-1)>v.max?(v.min*-1):v.max)
            
        },
        z:10
    }],
    series: [{
        name: '计划数量',
        type: 'bar',
        label: {
            show: true,
            position: 'top'
        },
        yAxisIndex: 0,
        data: data.plan_production
    }, {
        name: '实际产出',
        type: 'bar',
        label: {
            show: true,
            position: 'top'
        },
        yAxisIndex: 0,
        data: data.actual_production
    }, {
        name: '达成率',
        type: 'line',
        label: {
            show: true,
            position: 'top',
            formatter: '{c} %'
        },
        yAxisIndex: 0,
        data: data.attainment_rate
    }, {
        name: '生产效率',
        type: 'line',
        label: {
            show: true,
            position: 'top',
            formatter: '{c} %'
        },
        yAxisIndex: 0,
        data: data.productivity
    }],
    graphic: lineList
};