echarts使用

基本概述

Echarts:是一种图表展示技术，信息汇总，数据统计的时候，类似的图表展示技术：JFreeChart、HighChart等
Echarts官网：https://www.echartsjs.com/zh/index.html
Echarts的使用：

• 引入echarts.js
• 提供一个容器显示图表
• 初始化Echart，得到图表
• 把数据填充到图表中
  最简洁的echarts图表

<!-- 3.初始化图表 -->
var chart= echarts.init(document.getElementById("container"));
// 指定图表的配置项和数据
var option = {
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};
//4.往图表中设置数据
chart.setOption(option);

Echarts和后端的交互(柱状图、折线图、扇形图)

图的type属性决定图的类型
折线图或柱状图

mapper层

int selectUserCount(int flag);

<select id="selectUserCount" resultType="java.lang.Integer" parameterType="java.lang.Integer">
  SELECT SUM(IF(userStatus=#{flag,jdbcType=INTEGER},1,0)) FROM USER
</select>

service层

public XzResult getUserInfo() {
    Map map = new HashMap();
    int first = userMapper.selectUserCount(0);//待认证
    int second = userMapper.selectUserCount(1);//认证成功
    int third = userMapper.selectUserCount(2);//待审核
    int fourth = userMapper.selectUserCount(3);//认证失败
    map.put("name",first);
    map.put("second",second);
    map.put("third",third);
    map.put("fourth",fourth);
    XzResult result = new XzResult();
    result.setData(map);
    return result;
}

controller层直接返回service层调用
前端代码

<div id="first" style="width: 600px;height:400px;"></div>

$(function () {
            var keys = [];
            var values = [];
            $.ajax({
                type:'get',
                url:'/CA/echarts/user',
                success:function (response) {
                    console.log(response.data)
                    for (key in response.data){
                        keys.push(key);
                        values.push(response.data[key]);
                    }
                    var chart= echarts.init(document.getElementById("first"));
                    var option = {
                        xAxis: {
                            data: keys
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'line',
                            data: values
                        }]
                    };
                    //4.往图表中设置数据
                    chart.setOption(option);
                }
            })

        })

扇形图

mapper层同上
service层

public XzResult getUserInfo() {
    List list = new ArrayList();//有序列表，查询快，增删慢
    for (int i = 0; i <= 3; i++) {
        list.add(userMapper.selectUserCount(i));
    }
    XzResult result = new XzResult();
    result.setData(list);
    return result;
}

前端页面js

$(function () {
    var values = [];
    $.ajax({
        type:'get',
        url:'/CA/echarts/user',
        success:function (response) {
            values = response.data;
            var chart= echarts.init(document.getElementById("first"));
            //指定图表的配置项和数据
            var option = {
                series: [{
                    name: '销量',
                    type: 'pie',
                    data: [
                        {value:values[0],name:"未认证"},
                        {value:values[1],name:"认证成功"},
                        {value:values[2],name:"待审核"},
                        {value:values[3],name:"认证失败"}]
                }]
            };
            //4.往图表中设置数据
            chart.setOption(option);
        }
    })
})