ruby调用echart的柱状饼状图

 sql = "select GROUP_CONCAT( DATE_FORMAT(format_date,'%d')  ,'@', chemical_count ) as group_chemical_count, 
 GROUP_CONCAT( DATE_FORMAT(format_date,'%d')  ,'@', vendor_num ) as group_vendor_num, 
 a.format_date_month
from
(select 
chemical_num as chemical_count , 
vendor_num as vendor_num,
DATE_FORMAT(data_statistics.created_at,'%Y-%m-%d') as format_date , 
DATE_FORMAT(data_statistics.created_at,'%Y-%m') as format_date_month
from data_statistics
where created_at >= '#{@start_time}' and created_at < '#{@end_time}'
group by format_date) as a
group by a.format_date_month"

@reports = Inquiry.find_by_sql(sql) 
@product_charts = {} 
@company_charts = {} 
@report_month = []
@reports.each do |report|
month = report["format_date_month"] + "-01"
    search_day = DateTime.parse(month).to_date
    end_date = search_day.at_end_of_month.strftime("%d").to_i
         _product_charts_data = []
         _company_charts_data = []
    (1..end_date).each do |_|
      _product_charts_data << (report["group_chemical_count"].match(/#{_.to_s.rjust(2,"0") }@\d+/) ? report["group_chemical_count"].match(/#{_.to_s.rjust(2,"0")}@\d+/)[0].split("@")[1].to_i : 0 )
      _company_charts_data << (report["group_vendor_num"].match(/#{_.to_s.rjust(2,"0") }@\d+/) ? report["group_vendor_num"].match(/#{_.to_s.rjust(2,"0")}@\d+/)[0].split("@")[1].to_i : 0 )
    end
    @report_month << report['format_date_month'].delete('-')
    @product_charts[(report['format_date_month'].delete('-'))] = _product_charts_data
    @company_charts[(report['format_date_month'].delete('-'))] = _company_charts_data
end
@chart_data_x = [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]
@chart_data_tab = @report_month
@chart_list = ['new vendor','new product']
@charts1 = @company_charts.to_json
@charts2 = @product_charts.to_json

<%= javascript_include_tag 'echarts.min' %>
<script type="text/javascript">
var div_tag = "<%= div_id %>"
var myChart = echarts.init(document.getElementById(div_tag));
var dataMap = {};

function dataFormatter(obj) {
    var temp;
    <% @chart_data_tab.each do |year| %>   
        var max = 0;
        var sum = 0;
        temp = obj["<%= year %>"];
        for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i]);
            sum += temp[i];
            obj["<%= year %>"][i] = {
                name : i,
                value : temp[i]
            }
        }
        obj["<%= year %>max"] = Math.floor(max / 100) * 100;
        obj["<%= year %>sum"] = sum;
    <% end %>
    return obj;
}


<% (1..@chart_list.size).each do |i|%>
  var aa= "<%= eval('@charts'+i.to_s) %>".replace(/"/g,""); 
  eval("(dataMap.dataChart" + <%=i%> + " = dataFormatter" +'(' + aa + '))');
<% end %>

var option = {
    baseOption: {
        timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: [
                 <%= @chart_data_tab.join(",") %>
            ],
            label: {
                formatter : function(s) {
                    return (new Date(s)).getFullYear();
                }
            }
        },
        tooltip: {
        },
        legend: {
            x: 'right',
            data: eval("("+"<%= @chart_list %>".replace(/"/g,"'")+")")
        },
        calculable : true,
        grid: {
            top: 80,
            bottom: 100,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.value.replace('\n', '');
                        }
                    }
                }
            }
        },
        xAxis: [
            {
                'type':'category',
                'axisLabel':{'interval':0},
                'data': <%= @chart_data_x %>,
                splitLine: {show: false}
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: 'increased qty'
            }
        ],
        series: [
            <% @chart_list.each do |c|%>
             {name: '<%=c%>', type: 'bar'},   
            <% end %>
            { 
                type: 'pie',
                center: ['75%', '35%'],
                radius: '18%',
                z: 100
            }
        ]
    },
    options: [
        <% @chart_data_tab.each_with_index do |y,index|%>
            {
            title: {text: '<%=y[0..3]+"-"+y[4..-1]%>'+" <%=@chart_list.join(' / ')%>"},
            series: [
                <% (1..@chart_list.size).each do |i|%>
                 {data: eval("(dataMap.dataChart<%=i%>['<%=y%>'])") },
                <% end %>
                 {data: [
                <% @chart_list.each_with_index do |c,i|%>
                  {name: '<%=c%>', value: eval("(dataMap.dataChart<%=i+1%>['<%=y%>sum'])") },
                <% end %>
                  ]}
            ]
            },
        <% end %>
    ]
}

myChart.setOption(option);

</script>