Echarts异步数据与动画加载_echarts 加载动画-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <div id="main" style="width: 600px;height: 400px;"></div>
    <title>发财糕的异步数据与动画加载</title>
</head>
<body>

这段代码是使用 Echarts 绘制图表的关键部分。首先，初始化了一个 Echarts 实例。然后，通过 Ajax 请求获取数据，并基于此设置图表选项。其中包括颜色、背景色、标题、提示框、图例以及饼图的具体配置。

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.get("js/咖啡店各年订单.json",function(data){
    myChart.setOption({
        color: ['#46eda9', '#47e4ed', '#4bbbee', '#4f8fa8','#4586d8', '#4f68d8',],
        backgroundColor: '#d6ecf0', // 配置背景色，rgba 设置透明度 0.1
        title: {
            text: '咖啡店年销',
            x:'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                type:'shadow'