echarts生成柱状图

1、引用js

<script src="${ctxStatic }/echarts-3.6.1/echarts.min.js"></script>

2、

<div class="container-fluid"
    style="padding: 0px; background-color: #fff;">
    <div class="row-fluid" style="padding: 0px;">
        <div class="col-md-12" style="padding: 30px 10px 0px 10px;">
            <div id="main" class="main alert"
                style="width: 100%; background-color: #fff; height: 420px;"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        showZZT();
    });

    //生成柜状图
    function showZZT() {
        $.ajax({
            url : '${ctx}/cms/statCmsWebstat/createEcharForBar',// 跳转到 action  
            data : {
                "phase" : $("#phase option:selected").val(),
                "startYear" : $("#startYear option:selected").val(),
                "year" : $("#year option:selected").val(),
                "startMonth" : $("#startMonth option:selected").val(),
                "month" : $("#month option:selected").val()
            },
            dataType : 'text',
            type : 'post',
            success : function(data) {
                if (data == "") {
                    $("#main").hide();
                } else {
                    $("#main").show();
                    eval(data);
                }
            },
            error : function() {
                layer.alert("数据绑定异常！");
            }
        });
    }

</script>

3、createEcharForBar方法

// 生成统计图
    @RequestMapping(value = "createEcharForBar")
    public @ResponseBody String createEcharForBar(String phase, String year, String month, String startYear, String startMonth) {
        //String main_title = year +"年" + month +"月份" + phase + "学段统计图";
        String main_title = "";
        String main_legend1 = "'内容数量'";
        String main_legend2 = "'日均访问量'";
        String main_xAxisData = "";
        String main_datastr = "";
        String main_datastrAvg = "";
        StatCmsWebstat statCmsWebstat = new StatCmsWebstat();
        statCmsWebstat.setPhase(phase);
        statCmsWebstat.setYear(year);
        statCmsWebstat.setMonth(month);
        statCmsWebstat.setStartYear(startYear);
        statCmsWebstat.setStartMonth(startMonth);

        List<StatCmsWebstat> statCmsWebstats = statCmsWebstatService.findStatList(statCmsWebstat);
        if (statCmsWebstats.size() > 0) {
            for (int i = 0; i < statCmsWebstats.size(); i++) {
                StatCmsWebstat e = statCmsWebstats.get(i);
                main_xAxisData += "'" + e.getCreateUnit() + "',";
                main_datastr += e.getContentNum() + ",";
                main_datastrAvg += e.getAverageDailyTraffic() + ",";
            }
            main_xAxisData = main_xAxisData.substring(0, main_xAxisData.length() - 1);
            main_datastr = main_datastr.substring(0, main_datastr.length() - 1);
            main_datastrAvg = main_datastrAvg.substring(0, main_datastrAvg.length() - 1);
        }
        String main_xAxisName = "学校";
        String main_yAxisName = "内容数量/日均访问量";
        String main_colors = "213,58,53";
        String main_color2 = "51,75,92";
        String main_needclick = "0";
        String main_funcationName = "";
        String main_Index = "";
        String main_showchartType = "x";
        String main_showChartType = "bar";
        String mainstr = UserUtils.showEChartForBarOfTwo(main_title, main_legend1, main_legend2, main_xAxisData, main_xAxisName,
                main_yAxisName, main_datastr, main_datastrAvg, main_colors,main_color2, main_needclick, main_funcationName, main_Index,
                main_showchartType, main_showChartType);
        if (statCmsWebstats.size() == 0)
            mainstr = "";
        return mainstr;
    }

/**
     * 生成统计图--柱状图
     * 
     * @param title
     *            标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。
     * @param legend
     *            图例：横向统计分类（即有几个分类，每个柱状组就会出现几个分类）
     * @param AxisData
     *            数据分组
     * @param AxisName
     *            坐标轴名称
     * @param AxisName2
     *            坐标轴名称
     * @param datastr
     *            统计数据集：每个组分类用 ｜ 分隔，每个组中每个小分类用 , 分隔（PS：统计数据集组数与图例组数相同）
     * @param colors
     *            数据显示颜色：用逗号分隔（PS：颜色需为rgb颜色）
     * @param needclick
     *            是否允许点击
     * @param funcationName
     *            js方法名称，只有当允许点击时这个参数才有效，这个方法固定有两个传值，一个是横向统计的组号，另一个是每个组中的类别号。
     * @param mainIndex
     *            统计图放置容器id（PS：每个页面必需有一个main容器）
     * @param showDataType
     *            柱状图显示方法：x-数据显示在x轴，y-数据显示在y轴
     * @param showChartType
     *            数据显示方式：柱状图（bar）/折线图（line）
     * @return
     */
    public static String showEChartForBar(String title, String legend, String AxisData, String AxisName, String AxisName2,
            String datastr, String colors, String needclick, String funcationName, String mainIndex,
            String showDataType, String showChartType) {
        String result = "";
        result += "option" + mainIndex + " = {";
        // 标题
        result += "title: {text: '" + title + "',x: 'center'},";
        // 提示
        result += "tooltip:{trigger: 'axis'},";
        // 图列（即横向分组）
        result += "legend: {data: [" + legend + "],y: 'bottom',orient: 'horizontal',x: 'left'},";
        // 工具箱
        result += "toolbox: {show: false,";
        result += "feature: {mark: {show: true},";
        result += "dataView: {show: true,readOnly: true},";
        result += "magicType: {show: false,type: ['line', '" + showChartType + "']},";
        result += "restore: {show: true},";
        result += "saveAsImage: {show: true}},";
        result += "y: 'bottom'},";
        if (showDataType == "x") {
            // 横向数据列表
            result += "xAxis: [{";
            result += "axisLabel:{clickable:false,show:true,rotate:0,interval:0},";
            result += "type: 'category',";
            result += "data: [" + AxisData + "],";
            result += "name: '" + AxisName + "',";
            result += "splitArea: {show: true}";
            result += "}],";
            // 竖向显示列表
            result += "yAxis: [{";
            result += "type: 'value',";
            result += "name: '" + AxisName2 + "',";
            result += "splitLine: {lineStyle: {type: 'dashed'}}";
            result += "}],";
        } else {
            // 竖向数据列表
            result += "yAxis: [{";
            result += "type: 'category',";
            result += "data: [" + AxisData + "],";
            result += "name: '" + AxisName + "',";
            result += "splitArea: {show: true}";
            result += "}],";
            // 横向显示列表
            result += "xAxis: [{";
            result += "type: 'value',";
            result += "name: '" + AxisName2 + "',";
            result += "splitLine: {lineStyle: {type: 'dashed'}}";
            result += "}],";
        }
        // 数据集
        result += "series: [";
        String[] dataStrArry = datastr.split("\\|");
        String[] legendArry = legend.split("\\,");
        String[] colorArry = colors.split("\\|");
        for (int i = 0; i < dataStrArry.length; i++) {
            result += "{";
            result += "name:" + legendArry[i].toString() + ",";
            result += "type:'" + showChartType + "',";
            result += "data: [" + dataStrArry[i].toString() + "],";
            if (i == dataStrArry.length - 1)
                result += "itemStyle: {normal: {label: {show: true}, color: 'rgb(" + colorArry[i].toString() + ")'}}}";
            else
                result += "itemStyle: {normal: {label: {show: true}, color: 'rgb(" + colorArry[i].toString() + ")'}}},";
        }
        result += "]};";

        result += "myChart" + mainIndex + " = echarts.init(document.getElementById('main" + mainIndex + "'));";
        result += "myChart" + mainIndex + ".setOption(option" + mainIndex + ");";
        // 点击事件
        if (needclick == "1") {
            result += "var ecConfig" + mainIndex + " = require('echarts/config');";
            result += "function eConsole" + mainIndex + "(param) {";
            result += "if (typeof param.seriesIndex != 'undefined') {";
            result += funcationName + "(param.dataIndex,param.seriesName)";
            result += "}";
            result += "}";
            result += "myChart" + mainIndex + ".on(ecConfig" + mainIndex + ".EVENT.CLICK, eConsole" + mainIndex + ");";
        }
        // 初始加载统计图
        result += "setTimeout(function (){";
        result += "window.onresize = function () {";
        result += "myChart" + mainIndex + ".resize();";
        result += "}";
        result += "},200);";
        return result;
    }

    /**
     *  生成统计图--饼状图
     * @param title 标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。
     * @param legendStr 图例：统计分类
     * @param axisName 统计数据名称
     * @param datastr 统计数据集：数据间用 , 分隔
     * @param needclick 是否允许点击
     * @param funcationName js方法名称，只有当允许点击时这个参数才有效，这个方法固定有两个传值，一个是横向统计的组号，另一个是每个组中的类别号。
     * @param mainIndex 统计图放置容器id（PS：每个页面必需有一个main容器）
     * @return
     */
    public static String showEChartFroPie(String title, String legendStr, String axisName, String datastr, String needclick,
            String funcationName, String mainIndex) {
        String result = "";
        result += "option" + mainIndex + " = {";
        // 标题
        result += "title : {text: '" + title + "',x:'center'},";
        result += "tooltip : {trigger: 'item',formatter: \"{a} <br />{b} : {c} ({d}%)\"},";
        result += "legend: {y: 'bottom',orient: 'horizontal',x: 'left',data:[" + legendStr + "]},";
        result += "calculable : true,";
        result += "series : [{";
        result += "name:'" + axisName + "',";
        result += "type:'pie',";
        result += "radius : '55%',";
        result += "center: ['50%', 225],";
        result += "itemStyle: {normal: {label: {show: true,formatter: \"{b}: {c} ({d}%)\"}}},";
        result += "data:[";
        String[] dataStrArry = datastr.split("\\,");
        String[] legendStrArry = legendStr.split("\\,");
        for (int i = 0; i < dataStrArry.length; i++) {
            result += "{value:" + dataStrArry[i].toString() + ", name:" + legendStrArry[i].toString() + "}";
            if (i != dataStrArry.length - 1)
                result += ",";
        }
        result += "]}]};";
        result += "myChart" + mainIndex + " = echarts.init(document.getElementById('main" + mainIndex + "'));";
        result += "myChart" + mainIndex + ".setOption(option" + mainIndex + ");";
        // 点击事件
        if (needclick == "1" && funcationName != "") {
            result += "var ecConfig" + mainIndex + " = require('echarts/config');";
            result += "function eConsole" + mainIndex + "(param) {";
            result += "if (typeof param.seriesIndex != 'undefined') {";
            result += funcationName + "(param.dataIndex,param.seriesName)";
            result += "}";
            result += "}";
            result += "myChart" + mainIndex + ".on(ecConfig" + mainIndex + ".EVENT.CLICK, eConsole" + mainIndex + ");";
        }
        // 初始加载统计图
        result += "setTimeout(function (){";
        result += "window.onresize = function () {";
        result += "myChart" + mainIndex + ".resize();";
        result += "}";
        result += "},200);";
        return result;
    }

    /**
     * 生成统计图--柱状图
     * 
     * @param title
     *            标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。
     * @param legend
     *            图例：横向统计分类（即有几个分类，每个柱状组就会出现几个分类）
     * @param AxisData
     *            数据分组
     * @param AxisName
     *            坐标轴名称
     * @param AxisName2
     *            坐标轴名称
     * @param datastr
     *            统计数据集：每个组分类用 ｜ 分隔，每个组中每个小分类用 , 分隔（PS：统计数据集组数与图例组数相同）
     * @param colors
     *            数据显示颜色：用逗号分隔（PS：颜色需为rgb颜色）
     * @param needclick
     *            是否允许点击
     * @param funcationName
     *            js方法名称，只有当允许点击时这个参数才有效，这个方法固定有两个传值，一个是横向统计的组号，另一个是每个组中的类别号。
     * @param mainIndex
     *            统计图放置容器id（PS：每个页面必需有一个main容器）
     * @param showDataType
     *            柱状图显示方法：x-数据显示在x轴，y-数据显示在y轴
     * @param showChartType
     *            数据显示方式：柱状图（bar）/折线图（line）
     * @return
     */
    public static String showEChartForBarOfTwo(String title, String legend1, String legend2, String AxisData, String AxisName, String AxisName2,
            String datastr, String datastr2, String colors, String colors2, String needclick, String funcationName, String mainIndex,
            String showDataType, String showChartType) {
        String result = "";
        result += "option" + mainIndex + " = {";
        // 标题
        result += "title: {text: '" + title + "',x: 'center'},";
        // 提示
        result += "tooltip:{trigger: 'axis',axisPointer : {type : 'shadow'}},";
        // 图列（即横向分组）
        result += "legend: {orient : 'vertical',left : 'left',top : 'bottom',data: ['内容数量', '日均访问量']},";
        // 工具箱
        result += "toolbox: {show: true,";
        result += "feature: {mark: {show: true},";
        result += "dataView: {show: true,readOnly: false},";
        result += "magicType: {show: true,type: ['line', '" + showChartType + "']},";
        result += "restore: {show: true},";
        result += "saveAsImage: {show: true}},";
        result += "y: 'bottom'},";
        result += "calculable: true,";
        if (showDataType == "x") {
            // 横向数据列表
            result += "xAxis: [{";
            result += "axisLabel:{clickable:false,show:true,rotate:0,interval:0},";
            result += "type: 'category',";
            result += "data: [" + AxisData + "],";
            result += "name: '" + AxisName + "',";
            result += "splitArea: {show: true}";
            result += "}],";
            // 竖向显示列表
            result += "yAxis: [{";
            result += "type: 'value',";
            result += "name: '" + AxisName2 + "',";
            result += "splitLine: {lineStyle: {type: 'dashed'}}";
            result += "}],";
        } else {
            // 竖向数据列表
            result += "yAxis: [{";
            result += "type: 'category',";
            result += "data: [" + AxisData + "],";
            result += "name: '" + AxisName + "',";
            result += "splitArea: {show: true}";
            result += "}],";
            // 横向显示列表
            result += "xAxis: [{";
            result += "type: 'value',";
            result += "name: '" + AxisName2 + "',";
            result += "splitLine: {lineStyle: {type: 'dashed'}}";
            result += "}],";
        }
        // 数据集
        result += "series: [";
        String[] dataStrArry = datastr.split("\\|");
        String[] dataStrArry2 = datastr2.split("\\|");
        String[] legendArryone = legend1.split("\\,");
        String[] legendArrytwo = legend2.split("\\,");
        String[] colorArry = colors.split("\\|");
        String[] colorArry2 = colors2.split("\\|");
        for (int i = 0; i < dataStrArry.length; i++) {
            result += "{";
            result += "name:" + legendArryone[i].toString() + ",";
            result += "type:'" + showChartType + "',";
            result += "data: [" + dataStrArry[i].toString() + "],";
            result += "itemStyle: {normal: {label: {show: true}, color: 'rgb(" + colorArry[i].toString() + ")'}}},";
        }
        for (int i = 0; i < dataStrArry2.length; i++) {
            result += "{";
            result += "name:" + legendArrytwo[i].toString() + ",";
            result += "type:'" + showChartType + "',";
            result += "data: [" + dataStrArry2[i].toString() + "],";
            if (i == dataStrArry2.length - 1)
                result += "itemStyle: {normal: {label: {show: true}, color: 'rgb(" + colorArry2[i].toString() + ")'}}}";
            else
                result += "itemStyle: {normal: {label: {show: true}, color: 'rgb(" + colorArry2[i].toString() + ")'}}},";
        }
        result += "]};";

        result += "myChart" + mainIndex + " = echarts.init(document.getElementById('main" + mainIndex + "'));";
        result += "myChart" + mainIndex + ".setOption(option" + mainIndex + ");";
        // 点击事件
        if (needclick == "1") {
            result += "var ecConfig" + mainIndex + " = require('echarts/config');";
            result += "function eConsole" + mainIndex + "(param) {";
            result += "if (typeof param.seriesIndex != 'undefined') {";
            result += funcationName + "(param.dataIndex,param.seriesName)";
            result += "}";
            result += "}";
            result += "myChart" + mainIndex + ".on(ecConfig" + mainIndex + ".EVENT.CLICK, eConsole" + mainIndex + ");";
        }
        // 初始加载统计图
        result += "setTimeout(function (){";
        result += "window.onresize = function () {";
        result += "myChart" + mainIndex + ".resize();";
        result += "}";
        result += "},200);";
        return result;
    }

效果：