Echarts在线免费图表

 
            option = {
            legend: {
                data: ['2018Q1', '2018Q2', '2018Q3', '2018Q4'],
                y: 'bottom'
            },
            color: ['#0a5781', '#92c829', '#1da0df', '#0d7025'],
            title: {
                text: '实际支付与财务预算对比'
            },
            xAxis: {
                type: 'category',
                data: ['实际支付', '财务预算']
            },
            yAxis: {
                type: 'value',
                name: '金额(元)',
                axisLabel: {
                    formatter: function(value, index) {
                        return value/10000.0 + '万';
                    }
                }
            },
            series: [
                
                {
                    name: '2018Q1',
                    stack: '金额',
                    data: [(6262101.0).toFixed(0), (6660000.0).toFixed(0)],
                    type: 'bar',
                    barWidth: 120,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: function(param) {
                                if(param.data == 0) {
                                    return ''
                                }
                                else{
                                    return param.data.toLocaleString() + '\n' + (param.data/37000000.0*100).toFixed(2) + '%';
                                }
                            }
                        }
                    },
                },
                
                {
                    name: '2018Q2',
                    stack: '金额',
                    data: [(0).toFixed(0), (9620000.0).toFixed(0)],
                    type: 'bar',
                    barWidth: 120,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: function(param) {
                                if(param.data == 0) {
                                    return ''
                                }
                                else{
                                    return param.data.toLocaleString() + '\n' + (param.data/37000000.0*100).toFixed(2) + '%';
                                }
                            }
                        }
                    },
                },
                
                {
                    name: '2018Q3',
                    stack: '金额',
                    data: [(0).toFixed(0), (9620000.0).toFixed(0)],
                    type: 'bar',
                    barWidth: 120,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: function(param) {
                                if(param.data == 0) {
                                    return ''
                                }
                                else{
                                    return param.data.toLocaleString() + '\n' + (param.data/37000000.0*100).toFixed(2) + '%';
                                }
                            }
                        }
                    },
                },
                
                {
                    name: '2018Q4',
                    stack: '金额',
                    data: [(0).toFixed(0), (11100000.0).toFixed(0)],
                    type: 'bar',
                    barWidth: 120,
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: function(param) {
                                if(param.data == 0) {
                                    return ''
                                }
                                else{
                                    return param.data.toLocaleString() + '\n' + (param.data/37000000.0*100).toFixed(2) + '%';
                                }
                            }
                        }
                    },
                },
                
            ]
        };