对Echarts工厂的封装处理

最新推荐文章于 2025-06-19 15:26:48 发布

原创最新推荐文章于 2025-06-19 15:26:48 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图形 #需求 #实例

随笔专栏收录该内容

3 篇文章

订阅专栏

本文介绍了博主因工作需求对Echarts进行的简单封装，包括中国地图、柱状图、饼状图和折线图。主要关注option对象以及图表的X轴、Y轴数据。详细讲述了封装过程，从引入jar包到controller层调用，再到前端页面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对Echarts工厂的封装，以及实体类的封装

出于工作上的需求，博主需要对Echarts进行简单的封装。于是在官网找到一些图形例子，不过也仅仅是图形展示。也找过一些实例（博主没积分），最终也没有找到合适的封装好的例子。

1、首先，当然你需要jar包，博主用的是3.0.0.1版本。如果你是maven项目，引入以下内容，如果普通WEB项目，直接下载jar包放入lib下。

<dependency>
    <groupId>com.github.abel533</groupId>
    <artifactId>ECharts</artifactId>
    <version>3.0.0.1</version>
</dependency>

2、此处封装几种简单的，也是用的较多的：柱状图，饼状图，折线图和中国地图。

看过官网例子后，我们知道echarts图形重要的无非就是option对象，和柱状图、折线图的X轴、Y轴数据。

首先看下中国地图，这个稍微简单点，不需要传入任何数据对象：

public class EchartDataOptionFactory {
    /**
     * 创建中国地图
     * 
     * @return
     */
    public static Option createMapChartDataOption() {
        Option option = new Option();
        EMap map = new EMap("Map");
        map.mapLocation(new MapLocation(X.center, Y.center, 500));
        map.selectedMode(SelectedMode.single);
        map.itemStyle().normal().borderWidth(1)
                .borderColor("lightgreen").color("orange")
                .label().show(true);
        map.itemStyle().emphasis()
                .borderWidth(0).borderColor("#fff").color("#32cd32")
                .label().show(true)
                .textStyle().color("#fff");
        Data data = new Data();
        map.data(data);
        option.series(map);
        return option;
    }
}

这里返回option对象。

3、controller层调用

@Controller
@RequestMapping(value="/echar")
public class EchartsController {
    /**
     * 获取中国地图
     * 
     * @return
     */

    @RequestMapping(value="/getMap.do",produces="text/html;charset=UTF-8")
    @ResponseBody
    public String getMap() {
        return JSON.toJSONString(es.createMapChartDataOption());
    }
}

4、前端jsp页面中请求，获取返回的json字符串：

<div style=" padding: 5px 15px;margin: 15px;text-align: center;">
        <div id="main" style="minwidth: 50px;height: 550px"></div>
    </div>

$(function() {
    var echar = echarts.init(document.getElementById('main'));
        showChinaMap(echar);
        $(window).resize(function() {
            echar.resize();
        });
    });
function showChinaMap(echar) {
        $.ajax({
            url: 'echar/getMap.do',
            type: 'post',
            dataType: 'json',
            success: function(data) {
                console.log(data);
                optionView(data,echar);
            }
        });
}
function optionView(option,echar) {
        echar.setOption(option);
}

5、显示(当然主题可以自行加入)：
中国地图