echarts 畫柱狀圖

參考http://echarts.baidu.com/echarts2/doc/example/bar1.html

<script type="text/javascript">

    var flowQuatationCode = '${quatationCode!''}';
    if (!flowQuatationCode) {

    } else {


        var time_x_axis_data_flow;
        var time_line_series_data_flow0;
        var time_line_series_data_flow1;

        loadflow();
        setInterval("loadflow()", 60000);
        function loadflow() {


            time_x_axis_data_flow = new Array();
            time_line_series_data_flow0 = new Array();
            time_line_series_data_flow1 = new Array();
            $.getScript("http://api.jijinhao.com/history/quotejs.htm?codes=${quatationCode!''}¤tPage=1&pageSize=20&style=3", function(data, textStatus) {
                if (quot_str[0].data.length == 0) {
                    return;
                } else {

                }
                if (textStatus == 'success') {
                    for (var i = quot_str[0].data.length-1; i>=0; i--){
                        time_x_axis_data_flow.push(quot_str[0].data[i].quote.q59.replace(" 00:00:00",""));
                        time_line_series_data_flow0.push(quot_str[0].data[i].quote.q63);
                        time_line_series_data_flow1.push(quot_str[0].data[i].quote.q1);
                    }
                    loadTimeChartflow();
                }
            });

        }

        function loadTimeChartflow() {
            // 路徑配置
            require.config({
                paths:{
                    'echarts' : 'http://res.cngoldres.com/cang/js/echarts/echarts',
                    'echarts/chart/line' : 'http://res.cngoldres.com/cang/js/echarts/echarts',
                    'echarts/chart/bar' : 'http://res.cngoldres.com/cang/js/echarts/echarts'
                }
            });

            // 使用
            require(
                    [
                        'echarts',
                        'echarts/chart/line',
                        'echarts/chart/bar'
                    ],
                    function (ec) {
                        // 基於準備好的dom，初始化echarts圖表
                        var time_line_chart = ec.init(document.getElementById('time_line_flow'));

                        time_line_option = {
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['資金流入','資金流出']
                            },
                            color:['#FC0019','#9CFF9D'],
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : time_x_axis_data_flow
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'資金流入',
                                    type:'bar',
                                    data:time_line_series_data_flow0,

                                },
                                {
                                    name:'資金流出',
                                    type:'bar',
                                    data:time_line_series_data_flow1,

                                }
                            ]
                        };


                        // 爲echarts對象加載數據
                        time_line_chart.setOption(time_line_option);
                    }
            );
        }

    }

</script>