ajax集成Echarts动态生成图表_fastadmin echarts ajax-CSDN博客

本文链接：https://blog.csdn.net/ayunnuo/article/details/114269496

官方文档：https://echarts.apache.org/zh/index.html

自定义主题设置：https://echarts.apache.org/zh/theme-builder.html

  $(function () {
        //加载饼图
        getpieChart();

        //加载柱状图
        getHistogram();

});

    //获取饼图数据
    function getpieChart() {
        var url = prefix + "/pieChart";
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {},
            cache: false,
            success: function (e) {
                var pieData = [];
                // console.log(e);
                $.each(e, function (key, values) {
                    var o = {value: values, name: key};
                    pieData.push(o);
                });
                // console.log(pieData);
                //饼图
                var pieChart = echarts.init(document.getElementById("echarts-main"));
                var pieoption = {
                    title: {
                        text: '数据类模板统计',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    //设置饼状图每个颜色块的颜色
                    color: ['#48B7FE', '#008AFF', '#9F6AFF', '#734DFF', '#f7c5a0', '#FC97AF', '#87F7CF', '#D4A4EB'],
                    legend: {
                        orient: 'vertical',
                        right: 'right',
                    },
                    series: [
                        {
                            name: '访问来源',
                            radius: ['20%', '80%'],
                            hoverAnimation: true,
                            avoidLabelOverlap: true,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            type: 'pie',
                            data: pieData,
                            emphasis: {
                                itemstyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                pieChart.setOption(pieoption);
                $(window).resize(pieChart.resize);

            },
            error: function (responseStr) {
                $.modal.alertError("数据类模板数量查询失败！");
            }
        });
    }

效果：
在这里插入图片描述

    //柱状图
    function getHistogram() {
        var url = prefix + "/getHistogram";
        var dataName = [];
        var dataValue = [];
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: {},
            cache: false,
            success: function (e) {
                console.log(e);
                $.each(e, function (key, values) {
                    key = key.replace('/', "型/");
                    dataName.push(key);
                    dataValue.push(values);
                });
                var barChart = echarts.init(document.getElementById("echarts-barmain"));
                var baroption = {
                    title: {
                        text: '型号/舷号统计',
                        left: 'left'
                    },
                    color: ['#1ab1ff'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            name: '型号/舷号',
                            boundaryGap: true,
                            data: dataName,
                            axisTick: {
                                alignWithLabel: true
                            },
                            nameLocation: "end",
                            nameTextStyle: {
                                align: "left",
                                verticalAlign: "top",
                                lineHeight: 32
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: "数量",
                            splitLine: {
                                show: false
                            }
                        },
                    ],
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            barWidth: '40%',
                            data: dataValue
                        }
                    ]
                };

                barChart.setOption(baroption);
                window.onresize = barChart.resize;

            },
            error: function (responseStr) {
                $.modal.alertError("数据类查询失败！");
            }
        });

    }