生成餅狀體、柱狀圖Option工具類

Option工具類

public class EchartsOptionUtil {

    /**
     * 生成餅狀圖的Option
     *
     * @Param xValue : X軸的值
     * @Param yValue : Y軸的值
     * @Param title : 標題
     * @Param legend : 圖例
     * @Date 創建時間 : 2017年8月23日 上午9:47:33
     * @Version: V1.0
     */
    public static GsonOption getPieGraphOption(Object[] xValue, Object[] yValue, String title, String legend) {

        GsonOption option = new GsonOption();

        if (title != null) {
            option.title().text(title).x("center").y(30);
        }

        // 提示工具 鼠標在每一個數據項上，觸發顯示提示數據
        option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c} ({d}%)");

        // 工具欄
        option.toolbox().show(true).feature(new Mark().show(true), // 輔助線
                new DataView().show(true).readOnly(true), // 數據視圖
                Tool.restore, // 還原
                Tool.saveAsImage);// 保存爲圖片

        option.legend().orient(Orient.vertical).x("left").data(xValue);// 圖例及位置

        option.calculable(true);// 拖動進行計算

        Pie pie = new Pie();

        // 標題、半徑、位置
        pie.name(title).radius("55%").center("50%", "50%");

        // 循環數據
        for (int i = 0; i < xValue.length; i++) {
            Map<String, Object> map = new HashMap<String, Object>(2);
            map.put("value", yValue[i]);
            map.put("name", xValue[i]);
            pie.data(map);
        }
        pie.name(legend);
        option.series(pie);

        return option;
    }

    /**
     * 生成柱狀圖的Option
     *
     * @Param xValue : X軸的值
     * @Param yValue : Y軸的值
     * @Param title : 標題
     * @Param legend : 圖例
     * @Param color : 柱狀圖顏色
     * @Date 創建時間 : 2017年8月23日 上午9:53:04
     * @Version: V1.0
     */
    public static GsonOption getBarGraphOption(Object[] xValue, Object[] yValue, String title, String legend,
            String color, Integer barWidth,String xName,String yName) {

        GsonOption option = new GsonOption();

        if (title != null) {
            option.title(title); // 標題
        }

        // 工具欄
        option.toolbox().show(true).feature(Tool.mark, // 輔助線
                new DataView().show(true).readOnly(true), // 數據視圖 Tool.dataView
                new MagicType(Magic.line, Magic.bar), // 線圖、柱狀圖切換
                Tool.restore, // 還原
                Tool.saveAsImage);// 保存爲圖片

        option.tooltip().show(true).trigger(Trigger.axis).formatter("{a} <br/>{b} : {c}");// 顯示工具提示,設置提示格式

        if (legend != null) {
            option.legend(legend);// 圖例
        }
        
        // x軸
        CategoryAxis xCategory = new CategoryAxis();
        // x軸數據配置
        xCategory.data(xValue).boundaryGap(true).name(xName).nameGap(barWidth).type();
        xCategory.axisLabel().position("end").interval(0).rotate(30);
        option.xAxis(xCategory);
        
        // y軸
        /**
         yAxis : [ {
                name : '區域銷量',
                nameLocation : 'end',
                nameGap : 20,
                type : 'value'
            } ],
         */
        CategoryAxis yCategory = new CategoryAxis();
        yCategory.name(yName).nameGap(barWidth).type(AxisType.value).position("end");
        option.yAxis(yCategory);
        
        // 圖類別(柱狀圖)
        Bar bar = new Bar();
        // 循環數據
        for (int i = 0; i < xValue.length; i++) {

            // 類目對應的柱狀圖
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("value", yValue[i]);
            map.put("itemStyle", new ItemStyle().normal(new Normal().color(color)));
            map.put("barWidth", barWidth);
            bar.data(map);
        }
        bar.name(legend);
        option.series(bar);

        return option;
    }

    /**
     * 生成中國地圖
     *
     * @Param xValue : 地區列表
     * @Param yValue : 地區對應的數值
     * @Param title : 標題
     * @Param legend : 圖例
     * @Author: Lilg
     * @Date 創建時間 : 2017年8月23日 下午1:02:05
     * @Version: V1.0
     */
    @SuppressWarnings({ "unchecked", "rawtypes" })
    public static GsonOption getChinaMapOption(Object[] xValue, Object[] yValue, String title, String legend) {

        GsonOption option = new GsonOption();

        // 標題
        if (title != null) {
            option.title().text(title).x("center").y("top");
        }

        // 提示工具 鼠標在每一個數據項上，觸發顯示提示數據
        option.tooltip().trigger(Trigger.item);

        // 工具欄
        option.toolbox().show(true).orient(Orient.vertical).x("right").y("center").feature(
                new DataView().show(true).readOnly(true), // 數據視圖
                Tool.restore, // 還原
                Tool.saveAsImage);// 保存爲圖片

        List<VisualMap> visualMaps = new ArrayList<>();
        VisualMap visualMap = new VisualMap();
        visualMap.setMin(0);
        List list = Arrays.asList(yValue);
        if(list.size() == 1 && "".equals(list.get(0))){
            visualMap.setMax(100);
        } else {
            visualMap.setMax(Integer.valueOf(Collections.max(list).toString()) + Integer.valueOf(Collections.min(list).toString()));
        }
        visualMap.setLeft("left");
        visualMap.setTop("bottom");
        visualMap.setText(new String[] { "高", "低" });
        visualMap.setCalculable(true);
        visualMaps.add(visualMap);

        option.visualMap(visualMaps);

        com.github.abel533.echarts.series.Map china = new com.github.abel533.echarts.series.Map(legend);
        china.setMapType("china");
        china.roam(false);
        china.label().normal().show(true);
        china.label().emphasis().show(true);

        // 循環數據
        for (int i = 0; i < xValue.length; i++) {
            java.util.Map<String, Object> map = new HashMap<String, Object>(2);
            map.put("value", yValue[i]);
            map.put("name", xValue[i]);
            china.data(map);
        }

        option.series(china);

        return option;
    }
}

2.頁面代碼

<script type="text/javascript">
var option= ${option };

var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
</script>