echarts实现各种下钻图，并从数据库获取数据填充

最新推荐文章于 2024-07-30 10:14:26 发布

殇灬痛彻心扉

最新推荐文章于 2024-07-30 10:14:26 发布

阅读量2.7k

点赞数

分类专栏： echarts初学者文章标签： java js echarts javascript

本文链接：https://blog.csdn.net/qq_51611509/article/details/120862542

版权

echarts初学者专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在实习工作中，老大让我用后端数据，在前端页面展现并显现柱状图，折线图或饼状图。接到任务二话不说先百度，结果发现了echarts插件。经过查看用户手册了解了大概的用法就开始操作起来，其中发现不少坑，记录下来。

1、先拿样例的代码显现柱状图，前端自己虚构数据。

在引入echarts.min.js的时候进入第一个坑，可能因为项目结构拦截器的原因，像这样直接引用项目内，是引不进来的。但是从新建一个案例项目可以用。

而且直接引入静态文件也是错误的

可能是我比较菜，有些东西没配置好，根据源项目的JS引用才正确。

引用完后正常运行代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

运行页面如下：

第一步完成了，图能柱状图能显现出来了，开始想着怎么把后台数据填充进去啊，echarts官方用户手册异步数据仔细研究了一番。《本身想用echarts官方代码来写，结果写着写着echarts官网进不去了，就用菜鸟教程的代码了，坑！》

先把数据库数据传进来，直接就放图部一一赘述了。代码结构

主要放一下控制层的代码

package com.example.login.controller;

import com.example.login.entity.User;
import com.example.login.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class UserController {

    @Autowired
    UserService userService;

    @RequestMapping("/show")
    @ResponseBody
    public List<User> findById(Model model) {
        List<User> users = userService.userList();
        System.err.println(users.toString());
        return users;
    }

    @RequestMapping("/")
    public String index() {
        return "index";
    }

    @RequestMapping("/show1")
    public String index5() {
        return "tu";
    }

    @RequestMapping("/show2")
    public String index6() {
        return "tu1";
    }


    @RequestMapping("/show3")
    public String index7() {
        return "tu2";
    }

    @RequestMapping("/show4")
    public String index8() {
        return "tu3";
    }

    //展示柱状图
    @RequestMapping("/showbar")
    public String show2() {
        return "histogram/histogram-bar";
    }

    //展示饼图
    @RequestMapping("/showpie")
    public String show3() {
        return "pie";
    }

    //展示折线图
    @RequestMapping("/showline")
    public String show4() {
        return "line";
    }

}

然后经过百度学习了解了后端传入前端的格式：

  <!--使用ajax动态获取数据，将获取的数据放到数组中-->
   var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
   var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/show",    //请求发送到dataActiont处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                for (var i = 0; i < result.length; i++) {
                    names.push(result[i].username);
                    values.push(result[i].age);
                }
            }
        }
    });

完整的格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">
    $(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
        var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/show",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].username);
                        values.push(result[i].age);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({
                        //加载数据图表
                        title:{
                            text: '用户年龄统计图'
                        },

                        legend: {
                            data:['用户年龄']
                        },
                        xAxis: {
                            data: names,
                            axisLabel:{
                                interval: 0
                            }

                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '用户年龄',
                            type: 'bar',
                            data: values
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax
    });
</script>
</body>
</html>

以上这是一个完整的柱状图，折现，饼状图把 "bar" 改成对应的 "line"、"pie"。

如何把这个柱状图再加上一个下钻的柱状图的？本身想慢慢写的，由于突然有事直接复制源码了。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <style>
        #box {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>

<div id="box" style="width: 50%; height:450px; "></div>

<div align="center">
    <button>返回</button>
</div>

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/5.2.0/echarts.min.js"></script>

<script>
    show1();

    function show1() {
        var box = echarts.init($("#box")[0]);
        var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var ages = [];    //纵坐标数组（实际用来盛放Y坐标值）
        var passwords = [];    //纵坐标数组（实际用来盛放Y坐标值）

        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/show",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].username);
                        ages.push(result[i].age);
                        passwords.push(result[i].password);
                    }
                    option = {
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        //调整图形的位置
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: names,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '年龄',
                                type: 'bar',
                                barWidth: '60%',
                                data: ages
                            }
                        ],
                    };
                    box.setOption(option, true);
                    box.on('click', function (params) {
                        console.log(params.name);
//					box.clear();清除画布
                        if (params.name === names[0]) {
                            option.xAxis[0].data = ['张三丰', '王雪雪', '薛俊杰', '祝梦波', '杨青青']
                            option.series[0].data = ['1', '2', '3', '4', '5']
                        }
                        if (params.name === names[1]) {
                            option.xAxis[0].data = ['桌子', '椅子', '塑料凳']
                            option.series[0].data = ['300', '100', '90']
                        }
                        if (params.name === names[2]) {
                            option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                xAxis: [
                                    {
                                        data: passwords,
                                        type: 'category',
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '年龄',
                                        type: 'bar',
                                        barWidth: '60%',
                                        data: ages
                                    }
                                ],
                            }
                        }
                        if (params.name === names[3]) {
                            option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                xAxis: [
                                    {
                                        data: passwords,
                                        type: 'category',
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '年龄',
                                        type: 'bar',
                                        barWidth: '60%',
                                        data: ages
                                    }
                                ],
                            }
                        }

                        // option.series[0].data = ['300', '100', '90']

                        box.setOption(option, true);
                    })
                }
            }
        });
    }

    $("body").on("click", "button", function () {
        show1();
    })
</script>
</body>
</html>

运行结果如下：