Spring Boot 结合 ECharts 实现霸气、美观、高大上 图表分析

学会分析ECharts的option配置结构很重要，配置需要怎样的数据结构，我们只要返回给它即可

有道无术，术尚可求，有术无道，止于术

html

<div class="box">
  <div class="box-header with-border">
    <h3 class="box-title"><strong>商品类目与商品数量分析</strong></h3>
  </div>

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


<!-- 引入ECharts相关JS -->
<script src="/static/js/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    myChart.setOption({
        roseType: 'angle',
        title: {
            text: '商品类目与商品数量分析图',
            subtext: '数据来源于 IceStream 分析实验室',
            x: 'center'
        },
        // 提示框
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // 图例（data要与series中的每一个name对应）
        legend: {
            orient: 'vertical',
            x: 'left'
        },
        // toolbox，工具箱（五大工具在feature中配置）
        toolbox: {
            show: true,
            feature: {
                dataView: {readOnly: true},
                saveAsImage: {
                    title: '保存为图片'
                }
            }
        },
        // 阴影的配置
        itemStyle: {
            // 阴影的大小
            shadowBlur: 200,
            // 阴影水平方向上的偏移
            shadowOffsetX: 0,
            // 阴影垂直方向上的偏移
            shadowOffsetY: 0,
            // 阴影颜色
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        series: [
            {
                name: '商品类目',
                type: 'pie',
                radius: ['0%', '55%'],
                label: {
                    normal: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    }
                }
            }
        ]
    });

    // 异步加载数据
    $.get('getEChartsData').done(function (data) {
        var categoryArray = [];
        $(data).each(function (index, item) {
            categoryArray.push(item.name);
        });
        // 填入数据
        myChart.setOption({
            legend: {
                data: categoryArray
            },
            series: [{
                data: data
            }]
        });
    });
</script>

EChartsController

List集合就像是data数组，Map就像是数组里面的一个个对象，key对应着value，value对应着name

/**
 * ECharts异步获取数据
 *
 * @return 返回数据
 */
@RequestMapping("/getEChartsData")
public List<Map<String, String>> getEChartsData() {
    if (当前用户为超级管理员) {
        // 走查询所有商品数据分页
        return productCategoryMapper.getCategoryCountAndName();
    } else {
        // 商家只能是获取自己的商品信息，超级管理员可以查看所有商家的情况
        return productCategoryMapper.getCategoryCountAndNameBySellerId(userId);
    }
}

SQL语句

<!-- 获得商品类目对应的商品数量，value和name是与ECharts的data对应的 -->
<select id="getCategoryCountAndName" resultType="java.util.Map">
    select count(*) as value, tbl_product_category.category_name as name
    from tbl_product inner join tbl_product_category
    on tbl_product.category_id = tbl_product_category.category_id
    group by tbl_product_category.category_id;
</select>