ECharts简单上手使用

ECharts简单上手使用并且整合SpringBoot

1、什么是ECharts

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。简单点来讲就是纯前端的绘制简单的图表。

官网地址：https://echarts.apache.org/

2、ECharts能画什么图

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

3、安装ECharts

需要先引入ECharts和jQuery的js，或者直接在html里面引入CDN

	<!--引入ECharts.js-->
	<script src="/js/echarts.js"></script>
    <!--引入jQuery.js-->
    <script src="/js/jquery-3.5.1.js"></script>

因为我们需要整合SpringBoot，所以我就使用Thymeleaf模板引擎来渲染，就需要给src前加上th，像这样：

	<!--引入ECharts.js-->
    <script th:src="@{/js/echarts.js}"></script>
    <!--引入jQuery.js-->
    <script th:src="@{/js/jquery-3.5.1.js}"></script>

4、简单使用ECharts

4.1 准备一个div盒子来放图表

<!--为ECharts准备一个id为main，宽高都为500px的盒子-->
<div id="main" style="width: 500px;height: 500px;"></div>

4.2 利用Dom操作盒子然后设置图表的参数

//1、通过id获取到main并且用echarts初始化
let myChart=echarts.init(document.getElementById('main'));
//2、指定图表的配置项和数据
let option = {
	//标题
	title: {
		text: 'ECharts 入门示例'
	},
	//配置信息
	tooltip: {},
	legend: {
		data:['销量']
	},
	xAxis: {
		data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [10, 30, 20, 80, 50, 9]
    }]
};
//3、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这样就可以在页面初始化的时候看到图表和图表上呈现数据了。

5、ECharts集合SpringBoot和Ajax

因为大多数时候数据肯定不会是定死的，所以我们肯定需要从后端加载数据

5.1 后端Controller模拟数据

@Controller
@RequestMapping("/test")
public class TestController {
    @RequestMapping("/data")
    @ResponseBody
    public Map data(@RequestParam("id")int id){
        //衬衫数量
        int shirtNumber=0;
        //羊毛衫数量
        int woolSweaterNumber=0;
        //雪纺衫数量
        int chiffonShirtNumber=0;
        //裤子数量
        int pantsNumber=0;
        //高跟鞋数量
        int highHeelsNumber=0;
        //袜子数量
        int sockNumber=0;
        if (id==1){
            shirtNumber=20;
            woolSweaterNumber=30;
            chiffonShirtNumber=8;
            pantsNumber=80;
            highHeelsNumber=9;
            sockNumber=10;
        }else if (id==2){
            shirtNumber=2;
            woolSweaterNumber=3;
            chiffonShirtNumber=8;
            pantsNumber=8;
            highHeelsNumber=9;
            sockNumber=1;
        }
        HashMap<String, Integer> numberMap = new HashMap<>();
        numberMap.put("shirtNumber",shirtNumber);
        numberMap.put("woolSweaterNumber",woolSweaterNumber);
        numberMap.put("chiffonShirtNumber",chiffonShirtNumber);
        numberMap.put("pantsNumber",pantsNumber);
        numberMap.put("highHeelsNumber",highHeelsNumber);
        numberMap.put("sockNumber",sockNumber);
        return numberMap;
    }
}

发起/test/data这个请求并且携带一个id作为参数，就可以得到key-value的键值对集合来模拟真实的数据。

5.2 前端利用Ajax发起请求获得数据

		//1、通过id获取到main并且用echarts初始化
        let myChart=echarts.init(document.getElementById('main'));
        //开启loading效果
        myChart.showLoading();
        //Ajax的post请求
        $.post({
            //向后端发起的请求
            url:'/test/data',
            //向后端发起的请求并且携带的数据
            data: {
                id: id
            },
            //异步开启
            async:true,
            //请求成功的回调函数
            success:function (e) {
                myChart.hideLoading();//关闭loading效果
                //打印回调里携带的数据
                console.log(e);
                number.shirtNumber=e.shirtNumber;
                number.woolSweaterNumber=e.woolSweaterNumber;
                number.chiffonShirtNumber=e.chiffonShirtNumber;
                number.pantsNumber=e.pantsNumber;
                number.highHeelsNumber=e.highHeelsNumber;
                number.sockNumber=e.sockNumber;
                //2、指定图表的配置项和数据
                let option = {
                    //标题
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    //配置信息
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [number.shirtNumber, number.woolSweaterNumber, number.chiffonShirtNumber, number.pantsNumber, number.highHeelsNumber, number.sockNumber]
                    }]
                };
                //3、使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            //请求失败的回调函数
            error:function (e) {
                console.log(e);
            }
        });

所以数据就会在Ajax发起请求并且成功获取到数据的时候赋给图表里的data。因为ECharts自带loading动画的效果，所以在发起请求的时候使用myChart.showLoading()打开开启loading效果，在请求的成功的回调函数里使用myCharts.hideLoading()关闭loading效果。

5.3 汇总

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ECharts演示</title>
    <!--引入ECharts.js-->
    <script th:src="@{/js/echarts.js}"></script>
    <!--引入jQuery.js-->
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
</head>
<body>
<!--为ECharts准备一个id为main，宽高都为500px的盒子-->
<div id="main" style="width: 500px;height: 500px;"></div>
<script type="text/javascript">

    //函数：给销量图上设置销量数据（异步加载）
    function setNumber(number,id){
        //1、通过id获取到main并且用echarts初始化
        let myChart=echarts.init(document.getElementById('main'));
        //开启loading效果
        myChart.showLoading();
        //Ajax的post请求
        $.post({
            //向后端发起的请求
            url:'/test/data',
            //向后端发起的请求并且携带的数据
            data: {
                id: id
            },
            //异步开启
            async:true,
            //请求成功的回调函数
            success:function (e) {
                myChart.hideLoading();//关闭loading效果
                //打印回调里携带的数据
                console.log(e);
                number.shirtNumber=e.shirtNumber;
                number.woolSweaterNumber=e.woolSweaterNumber;
                number.chiffonShirtNumber=e.chiffonShirtNumber;
                number.pantsNumber=e.pantsNumber;
                number.highHeelsNumber=e.highHeelsNumber;
                number.sockNumber=e.sockNumber;
                //2、指定图表的配置项和数据
                let option = {
                    //标题
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    //配置信息
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [number.shirtNumber, number.woolSweaterNumber, number.chiffonShirtNumber, number.pantsNumber, number.highHeelsNumber, number.sockNumber]
                    }]
                };
                //3、使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            //请求失败的回调函数
            error:function (e) {
                console.log(e);
            }
        });
    };

    //全局加载
    $(function () {
        //销量对象
        let number={
            //衬衫数量
            shirtNumber:0,
            //羊毛衫数量
            woolSweaterNumber:0,
            //雪纺衫数量
            chiffonShirtNumber:0,
            //裤子数量
            pantsNumber:0,
            //高跟鞋数量
            highHeelsNumber:0,
            //袜子数量
            sockNumber:0
        };

        let id=1;

        console.log(number);
        //设置销量图
        setNumber(number,id);

    });
</script>
</body>
</html>