ECharts简单上手使用

女爷i 2021-09-02 03:49 697阅读 0赞

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

## 1、什么是ECharts ##

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

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

## 2、ECharts能画什么图 ##

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

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

## 3、安装ECharts ##

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

<script src="/js/echarts.js"></script>
        
        <script src="/js/jquery-3.5.1.js"></script>

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

<script th:src="@{/js/echarts.js}"></script>
        
        <script th:src="@{/js/jquery-3.5.1.js}"></script>

## 4、简单使用ECharts ##

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

<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>
        
        <script th:src="@{/js/echarts.js}"></script>
        
        <script th:src="@{/js/jquery-3.5.1.js}"></script>
    </head>
    <body>
    
    <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>