若依整合Echarts

最新推荐文章于 2025-02-20 16:45:06 发布
shirley61
最新推荐文章于 2025-02-20 16:45:06 发布
阅读量5.2k
点赞数 6
分类专栏： echarts 文章标签： echarts javascript
本文链接：https://blog.youkuaiyun.com/shirley61/article/details/120317749
版权
echarts 专栏收录该内容
1 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('可视化列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-xs-6">
            <div class="ibox-content">
                <div id="lineEcharts" class="echarts"></div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="ibox-content">
                <div id="pieEcharts" class="echarts"></div>
            </div>
        </div>
    </div>

</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<th:block th:include="include :: footer"/>
<script th:src="@{/js/echarts.js}"></script>

<script th:inline="javascript">
    var prefix = ctx + "weixin/customer";

    //折线图
    $(document).ready(function () {
        //初始化ehcharts实例
        var lineChart = echarts.init(document.getElementById("lineEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        lineChart.showLoading();
        //指定图表的配置项和数据
        var names = []; //类别数组（实际放x轴坐标值）
        var nums = []; //销量数组（Y坐标值）
        $.ajax({
            type: "get",
            async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/list",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name);
                        nums.push(result[i].num);
                    }
                    lineChart.hideLoading();//隐藏加载动画
                    lineChart.setOption({//加载数据图表
                        title: {
                            text: '折线图',
                        },
                        //工具箱
                        //保存图片
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        //图例-每一条数据的名字叫销量
                        legend: {
                            data: ['销量']
                        },
                        //x轴
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: names
                        },
                        //y轴没有显式设置，根据值自动生成y轴
                        yAxis: {
                            type: 'value'
                        },
                        //数据-data是最终要显示的数据
                        series: [{
                            name: '销量',
                            type: 'line',
                            smooth: true,
                            itemStyle : { normal: {label : {show: true}}},
                            data: nums
                        }]
                    })
                }
            },
            error: function (errorMsg) {
                alert("图表请求数据失败");
                lineChart.hideLoading();
            }
        })
    })


    //饼图
    $(document).ready(function () {
        var pieChart = echarts.init(document.getElementById("pieEcharts"));
        //数据加载完之前先显示一段简单的loading动画
        pieChart.showLoading();
        //指定图表的配置项和数据
        var names = []; //类别数组（实际放x轴坐标值）
        var nums = []; //销量数组（Y坐标值）
        $.ajax({
            type: "get",
            async: "true",//异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/list",
            data: {},
            dataType: "json",
            success: function (result) {
                debugger
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name);
                        var obj = new Object();
                        obj.name = result[i].name;
                        obj.value = result[i].num;
                        nums.push(obj);
                    }
                    pieChart.hideLoading();//隐藏加载动画
                    pieChart.setOption({//加载数据图表
                        title: {
                            text: '饼图',
                            x: 'center'
                        },
                        //工具箱
                        //保存图片
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: names
                        },
                        calculable: true,
                        series: [{
                            name: '销量',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: nums,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsextX: 0,
                                    shadowColor: 'rgba(0,0,0,0.5)'
                                }
                            }
                        }]

                    })

                }
            }
        })

    })

</script>
</body>
</html>