百度ECharts图形报表的介绍以及应用案例理解

关注

原创最新推荐文章于 2026-08-19 10:04:39 发布 3.4k 阅读 AI 写同款· GEO 优化 ›

百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据这几天接触的一个项目需要使用到百度的echart，所以简单查找并实验了几款比较简单且适用性较广的例子，做了几个简单的Demo，一来是对echart有所了解，二来也是记录一下，方便以后进一步的优化。首先，是echart的js文件，一般情况下，这一个文件基本就可以了，但是由于本文还需要涉及到地图类型的处理，所以还需要一个地图包，，这个echart官网已经下架了，说是因为部分矢量数据不正确，建议用百... 阅读详情

图形报表ECharts

一、Echarts简介

ECharts缩写来自Enterprise Charts，商业级数据图表，是apache的一个开源的使用 JavaScript实现的数据可视化工具，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。

官网 https://echarts.apache.org/zh/index.html

下载地址：https://echarts.apache.org/zh/download.html

解压后的文件中只需要将echarts.js 导入到工程中即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YlA1l0kX-1657031809561)(E:\Java资料\笔记整理\JavaUp\笔记整理\图形报表ECharts.assets\image-20220630232440383.png)]$

二、Echarts.js入门案例

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

效果如下

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkwH8AVX-1657031809562)(E:\Java资料\笔记整理\JavaUp\笔记整理\图形报表ECharts.assets\image-20220630232825558.png)]$

三、Echarts使用总结

通过官方案例我们可以发现，使用ECharts展示图表效果，关键点在于确定此图表所需的数据格式，然后按照此数据格式提供数据就可以了，我们无须关注效果是如何渲染出来的。在实际应用中，我们要展示的数据往往存储在数据库中，所以我们可以发送ajax请求获取数据库中的数据并转为图表所需的数据即可。

四、案例

1、使用Echarts绘制会员数量的折线图

前端代码

<script src="../plugins/echarts/echarts.js"></script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('line'));
        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
    
axios.get("/report/getMemberReport.do").then((res)=>{
        myChart1.setOption(
                            {
                                title: {
                                    text: '会员数量'
                                },
                                tooltip: {},
                                legend: {
                                    data:['会员数量']
                                },
                                xAxis: {
                                    data: res.data.data.months
                                },
                                yAxis: {
                                    type:'value'
                                },
                                series: [{
                                    name: '会员数量',
                                    type: 'line',
                                    data: res.data.data.memberCount
                                }]
                            });
    });
</script>

需要的json格式数据为:

"data":{
  "months":["2019.01","2019.02","2019.03","2019.04"], 
  "memberCount":[3,4,8,10] 
}, 
"flag":true, 
"message":"获取会员统计数据成功"

后端代码

controller

@RestController
@RequestMapping("/report")
public class ReportController {
    @Reference
    private MemberService memberService;
    //会员数量折线图数据
    @RequestMapping("/getMemberReport")
    public Result getMemberReport(){
        Map<String,Object> map = new HashMap<>();
        List<String> months = new ArrayList();
        Calendar calendar = Calendar.getInstance();//获得日历对象，模拟时间就是当前时间
        //计算过去一年的12个月
        calendar.add(Calendar.MONTH,-12);//获得当前时间往前推12个月的时间
        for(int i=0;i<12;i++){
            calendar.add(Calendar.MONTH,1);//获得当前时间往后推一个月日期
            Date date = calendar.getTime();
            months.add(new SimpleDateFormat("yyyy.MM").format(date));
        }
        map.put("months",months);
        List<Integer> memberCount = memberService.findMemberCountByMonths(months);
        map.put("memberCount",memberCount);
        return new Result(true, MessageConstant.GET_MEMBER_NUMBER_REPORT_SUCCESS,map);
    }

}

接口中方法

 List<Integer> findMemberCountByMonths(List<String> months);

实现类

@Service(interfaceClass = MemberService.class)
@Transactional
public class MemberServiceImpl implements MemberService {

    @Resource
    private MemberMapper memberMapper;
    @Override
    public List<Integer> findMemberCountByMonths(List<String> months) {
        List<Integer> list = new ArrayList<>();
        for(String date : months){
            String newdata = months+".31"; //2019.05.31;
            QueryWrapper<Member>  queryWrapper = new QueryWrapper<>();
            queryWrapper.lt("regTime",date);
            Integer selectCount = memberMapper.selectCount(queryWrapper);
            list.add(selectCount);
        }
        return list;
    }
}

2、绘制饼图

会员可以通过移动端自助进行体检预约，在预约时需要选择预约的体检套餐。本章节我们需要通过饼形图直观的展示出会员预约的各个套餐占比情况。

前端代码

 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('chart1'));

        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);

        axios.get("/report/getSetmealReport.do").then((res)=>{
            myChart1.setOption({
                                    title : {
                                        text: '套餐预约占比',
                                        subtext: '',
                                        x:'center'
                                    },
                                    tooltip : {//提示框组件
                                        trigger: 'item',//触发类型，在饼形图中为item
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
                                    },
                                    legend: {
                                        orient: 'vertical',
                                        left: 'left',
                                        data: res.data.data.setmealNames
                                    },
                                    series : [
                                        {
                                            name: '套餐预约占比',
                                            type: 'pie',
                                            radius : '55%',
                                            center: ['50%', '60%'],
                                            data:res.data.data.setmealCount,
                                            itemStyle: {
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                });
        });
    </script>
    
        
 对应后台的json数据格式为:
{
    "data":{
        "setmealNames":["套餐1","套餐2","套餐3"], 
        "setmealCount":[{"name":"套餐1","value":10}, 
                     {"name":"套餐2","value":30}, 
                     {"name":"套餐3","value":25} ] 
    }, 
    "flag":true, 
    "message":"获取套餐统计数据成功" 
}

后台代码

controller

 //套餐预约占比饼形图
    @RequestMapping("/getSetmealReport")
    public Result getSetmealReport(){
        //使用模拟数据测试使用什么样的java对象转为饼形图所需的json数据格式
        Map<String,Object> data = new HashMap<>();
        try{
            List<Map<String,Object>> setmealCount = setmealService.findSetmealCount();
            data.put("setmealCount",setmealCount);

            List<String> setmealNames = new ArrayList<>();
            for (Map<String, Object> map : setmealCount) {
                String name = (String) map.get("name");//套餐名称
                setmealNames.add(name);
            }

            data.put("setmealNames",setmealNames);
            return new Result(true,MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,data);
        }catch (Exception e){
            e.printStackTrace();
            return new Result(false,MessageConstant.GET_SETMEAL_COUNT_REPORT_FAIL);
        }
    }

接口方法

 List<Map<String, Object>> findSetmealCount();

接口方法实现

 @Override
    public List<Map<String, Object>> findSetmealCount() {
        return setmealMapper.findSetmealCount();
    }

Mapper的接口中添加方法

public List<Map<String,Object>> findSetmealCount();

Mapper.xml的sql内容

 <select id="findSetmealCount" resultType="map">
         select s.name,count(o.id) as value
         from t_order o ,t_setmeal s
         where o.setmeal_id = s.id group by s.name
 </select>

加方法**

public List<Map<String,Object>> findSetmealCount();

Mapper.xml的sql内容

 <select id="findSetmealCount" resultType="map">
         select s.name,count(o.id) as value
         from t_order o ,t_setmeal s
         where o.setmeal_id = s.id group by s.name
 </select>