Echarts饼状图+Mybatisplus动态数据源

1.引入相关依赖

        <!-- fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastjson.version}</version>
        </dependency>
        <!--mybatisplus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>${mybatisplus.version}</version>
        </dependency>
 		<!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

2.我们以查询商品的名称，数量为例做一个饼状图

NameNumber.java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class NameNumber {

    @JsonProperty("value") //echarts 要求返回的名称，要不封装不上数据
    private int number;

    @JsonProperty("name") //echarts 要求返回的名称，要不封装不上数据
    private String goodsname;
}

3.PieVo.java 用来返回json数据的实体，里面装着List<NameNumber>

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PieVo {
    private List<NameNumber> nameNumberList;
}

4.EchartsController.java

@RestController
@RequestMapping("/echarts")
public class EchartsController {

    @Autowired
    PieMapper pieMapper;

    @RequestMapping("/pie")
    public PieVo loadAll(){
        PieVo pieVo = new PieVo();
       List<NameNumber> pieVoList =  pieMapper.findNameNumber();
       pieVo.setNameNumberList(pieVoList);
       return pieVo;
    }
}

5.PieMapper.java

@Mapper
public interface PieMapper {
	
    @Select("select goodsname,number from bus_goods")
    public List<NameNumber> findNameNumber();
}

6.echarts饼图页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" th:src="@{/echarts/jquery.min.js}"></script>
</head>
<body>

<div class="page-container" id="main" style="width: 95%;height:580px;"></div>

<script type="text/javascript" th:src="@{/echarts/echarts.js}"></script>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    $.ajax({ //你需要写这些请求  异步请求数据
        type: "GET",
        url: "/echarts/pie",
        dataType: 'json',
        success: function (data) {

            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '商品数量展示',
                    subtext: '北京地区',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     left: 'left',
                //     data: data.nameNumberList.goodsname
                // },
                series: [
                    {
                        name: '商品数量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data.nameNumberList,//json实体的list数据
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    });

    /**


     */
</script>

</body>
</html>

来源：oschina

链接：https://my.oschina.net/wyn365/blog/3208290

标签

ECharts

Mybatis-Plus