echarts图表演示图表演示

怼烎@ 2023-09-29 18:25 15阅读 0赞

## eCharts图表演示 ##

比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大 小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。

郑州的大数据产业局，黄强：图表系统。

官网：

https://echarts.apache.org/zh/index.html

源于百度

## 一.超简单入门 ##

### 1.引入 ECharts ###

### 2.绘制一个简单的图表 ###

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。这个DOM容器的作用，就是一块画布。图表在这个画布上进行绘制。

### 3.绘制 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例,init初始化操作；
            //var myChart=echarts.init($("#main")),这种形式出不来。这里用的原生js来获取main对象
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据,option如何配置的呢？
            //采用的是什么样的形式？？？json格式
            //option={title:{}}
            var option = {
          
                title: {
          
                    text: 'ECharts 入门示例'
                },
                tooltip: {
          },   //提示信息
                legend: {
          
                    data:['销量']
                },
                xAxis: {
          
                    //data：数据,x 轴的数据
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {
          },
                series: [{
          
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

### 4.效果 ###

![在这里插入图片描述][91cf0c9e437545d191d0e2ecede05fa1.png_pic_center]

## 二.引入项目 ##

### 1.在webapp下增加对js的引用 ###

![在这里插入图片描述][ea82e98467ea46beb4724f28fc9eaa54.png_pic_center]

### 2.echarts页面 ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>测试echarts案例</title>
        <script src="static/js/echarts.min.js"></script>
        <script src="static/js/jquery-2.1.0.min.js"></script>
        <script></script>
    </head>
    <body>
        <%--构建div主体--%>
        <div id="main" style="width: 600px;height: 400px;"></div>
        <script type="text/javascript">
            $(function() {
        
                // 初始化
                var myChart = echarts.init(document.getElementById('main'));
                //var myChart = echarts.init($('#main')[0]); // 注意：这里init方法的参数的javascript对象，使用jQuery获取标签时，要将jQuery对象转成JavaScript对象；
    
                // 配置图标参数
                var options = {
        
                    title: {
        
                        text: '员工工资',
                        show: true, // 是否显示标题
                        subtext: '实发工资',
                        textStyle: {
        
                            fontSize: 18 // 标题文字大小
                        }
                    },
                    tooltip: {
        
                        // trigger: 'axis',
                        // axisPointer: {
        
                        //     type: 'shadow'
                        // }
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
        
                        //orient: 'vertical',
                        //left: 'left',
                        data: ['销量']
                    },
                    // X轴
                    xAxis: {
        
                        data: [] // 异步请求时,这里要置空
                    },
                    // Y轴
                    yAxis: {
        },
                    series: [{
        
                        name: '销量',
                        type: 'pie', // 设置图表类型为柱状图
                        data: [] // 设置纵坐标的刻度(异步请求时,这里要置空)
                    }]
                };
                // 给图标设置配置的参数
                myChart.setOption(options);
                myChart.showLoading(); // 显示加载动画
    // 异步请求加载数据
                $.ajax({
        
                    url: 'selectSalary',
                    type: 'get',
                    dataType: 'json',
                    success: function(data) {
        
                        var names = [];
                        var fa = [];
                        var result=[];
    
                        console.log(names)
                        $.each(data, function(index, obj) {
        
                            names.push(obj.name);
                            fa.push(obj.value);
    
                          //  result[index]["name"]=obj.EName;
                            //result[index]["value"]=obj.fa;
                        })
                        console.log(JSON.stringify(result))
                        myChart.hideLoading(); // 隐藏加载动画
                        myChart.setOption({
        
                            legend: {
        
                                /*//图例垂直排列orient: 'vertical',*/
                                type: 'scroll',
                                orient: 'vertical',
                                padding:[80,50,0,0],
                                x: 'left',
                                data: names
                            },
                            xAxis: {
        
                                data: []
                            },
                            yAxis:{
        
                                data:[]
                            },
                            series: [{
        
                                name: '工资',
                                type: 'pie', // 设置图表类型为柱状图
                                data: data    // 设置纵坐标的刻度
                            }]
                        });
                    },
                    error:function (data) {
        
                        console.log(data);
                    }
                });
            });
        </script>
    </body>
    </html>

核心代码：

异步加载

({
        
        url: 'selectSalary',
        type: 'get',
        dataType: 'json',
        success: function(data) {
        
            var names = [];
            var fa = [];
            var result=[];
    
            console.log(names)
            $.each(data, function(index, obj) {
        
                names.push(obj.name);
                fa.push(obj.value);
    
              //  result[index]["name"]=obj.EName;
                //result[index]["value"]=obj.fa;
            })
            console.log(JSON.stringify(result))
            myChart.hideLoading(); // 隐藏加载动画
            myChart.setOption({
        
                legend: {
        
                    /*//图例垂直排列orient: 'vertical',*/
                    type: 'scroll',
                    orient: 'vertical',
                    padding:[80,50,0,0],
                    x: 'left',
                    data: names
                },
                xAxis: {
        
                    data: []
                },
                yAxis:{
        
                    data:[]
                },
                series: [{
        
                    name: '工资',
                    type: 'pie', // 设置图表类型为柱状图
                    data: data    // 设置纵坐标的刻度
                }]
            });
        },
        error:function (data) {
        
            console.log(data);
        }
    });

### 3.控制器 ###

SalaryController

@Controller
    public class SalaryController {
        
        @Autowired
        SalaryService salaryService;
    
        @RequestMapping("/selectSalary")
        @ResponseBody
        public List<Map<String,Object>> selectSalary(){
        
            List<Map<String,Object>> salaries = salaryService.selectSalary();
            return salaries;
        }
    }

### 4.service层 ###

public interface SalaryService {
        List<Map<String,Object>> selectSalary();
    }

@Service("salaryService")
    public class SalaryServiceImpl implements SalaryService {
        @Autowired
        SalaryDao salaryDao;
        @Override
        public List<Map<String,Object>> selectSalary() {
            return salaryDao.selectSalary();
        }
    }

### 5.dao层和xml实现 ###

public interface SalaryDao {
        List<Map<String,Object>>selectSalary();
    }

<mapper namespace="com.aaa.mapper.SalaryDao">
    
        <select id="selectSalary" resultType="java.util.Map">
            select e.EName 'name',s.fa  'value' from    emp e
            INNER JOIN salary s
            on e.EID=s.EID
        </select>
    </mapper>

### 6.效果 ###

![在这里插入图片描述][d467aae356ef41b5ac2683aefdc07a71.png_pic_center]

扩展：

柱状图，精炼格式：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>我的echarts案例</title>
        <script src="static/js/jquery-2.1.0.min.js"></script>
        <script src="static/js/echarts.min.js"></script>
    </head>
    <body>
        <%--1.设计一个div--%>
        <div id="main" style="width:600px;height: 400px;"></div>
        <%--2.js 进行异步调用--%>
        <script>
            function loadData(option) {
        
                $.ajax({
        
                    type : 'get',  //传输类型
                    async : false, //同步执行
                    url : 'salary/selectSalary',   //web.xml中注册的Servlet的url-pattern
                    data : {
        },
                    dataType : 'json', //返回数据形式为json
                    success : function(result) {
        
                        if (result) {
        
                            //初始化xAxis[0]的data
                            option.xAxis[0].data = [];
                            for (var i=0; i<result.length; i++) {
        
                                option.xAxis[0].data.push(result[i].name);
                            }
                            //初始化series[0]的data
                            option.series[0].data = [];
                            for (var i=0; i<result.length; i++) {
        
                                option.series[0].data.push(result[i].value);
                            }
                        }
                    },
                    error : function(errorMsg) {
        
                        alert("加载数据失败");
                    }
                });//AJAX
            }//loadData()
    
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
        
                title: {
        
                    text: 'ECharts技术(柱状图)'
                },
                tooltip : {
        
                    show : true
                },
                legend : {
        
                    data : [ '工资' ]
                },
                xAxis : [ {
        
                    type : 'category'
                } ],
                yAxis : [ {
        
                    type : 'value'
                } ],
                series : [ {
        
                    name : '销量',
                    type : 'bar'
                } ]
            };
            //加载数据到option
            loadData(option);
            //设置option
            myChart.setOption(option);
    
        </script>
    </body>
    </html>
    : [ {
        
                    type : 'category'
                } ],
                yAxis : [ {
        
                    type : 'value'
                } ],
                series : [ {
        
                    name : '销量',
                    type : 'bar'
                } ]
            };
            //加载数据到option
            loadData(option);
            //设置option
            myChart.setOption(option);
    
        </script>
    </body>
    </html>

[91cf0c9e437545d191d0e2ecede05fa1.png_pic_center]: https://img-blog.csdnimg.cn/91cf0c9e437545d191d0e2ecede05fa1.png#pic_center
[ea82e98467ea46beb4724f28fc9eaa54.png_pic_center]: https://img-blog.csdnimg.cn/ea82e98467ea46beb4724f28fc9eaa54.png#pic_center
[d467aae356ef41b5ac2683aefdc07a71.png_pic_center]: https://img-blog.csdnimg.cn/d467aae356ef41b5ac2683aefdc07a71.png#pic_center