layui框架与EChart来生成饼状图，并且可以按照时间条件来生成饼状图

xingxingwuxin

于 2023-03-24 15:04:56 发布

阅读量1.3k

点赞数 2

文章标签： layui javascript echarts

本文链接：https://blog.csdn.net/fzxyxf1314/article/details/129751181

版权

layui框架与EChart来生成饼状图，并且可以按照时间条件来生成饼状图 - 知识干货、满满的，越努力越幸运

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>饼状图示例-可以按照时间条件查询</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="layui-form-item">
          <label class="layui-form-label">选择日期</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="date-picker" placeholder="请选择日期">
          </div>
        </div>
        <div id="chart" style="height: 400px;"></div>

    </div>
</body>
</html>

<script type="text/javascript">
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('chart'));

// 定义饼状图的配置项和数据
var option = {
    title: {
        text: '饼状图示例',
        subtext: '数据来自某个接口',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: []
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: []
        }
    ]
};

// 使用Ajax请求数据并更新饼状图
function updateChart(date) {
    // 发送Ajax请求获取数据
    layui.$.ajax({
        url: '/api/data',
        type: 'get',
        data: {
            date: date
        },
        success: function (res) {
            // 更新legend数据
            option.legend.data = res.legend;

            // 更新series数据
            option.series[0].data = res.series;

            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        },
        error: function (xhr, status, error) {
            console.log(error);
        }
    });
}

// 初始化图表
updateChart('2022-01-01');

// 监听日期选择器的变化并更新图表
layui.laydate.render({
    elem: '#date-picker',
    type: 'date',
    done: function (value, date) {
        updateChart(value);
    }
});


</script>

努力的星星，加油！