003--异步数据加载

发布时间 2023-06-12 15:30:17作者: sportdog

遇到的问题: 

  1. json文件格式在网上在线验证一下(回车换行导致格式不对)
  2. 本地文件不行(以网站页面运行或其他方式) 
  3. 网上例子中不需要用parse转换,实际上data是个字符串,不知道是啥原因.

data.json

{"data":[23, 25, 4, 14],"category": ["壹钱包","银行","零钱","股票1"]}

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>w3cschool (www.w3cschool.cn) </title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js" rel="external nofollow" ></script>
    <script src="jquery-3.4.1.min.js" ></script>
    <script src="data.json"></script>
    
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
       var myChart = echarts.init(document.getElementById('main'));
       

$.get('data.json').done(function (data) 
{
    var obj = JSON.parse(data);
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
             data: obj.category
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: obj.data
        }]
    });
});
    </script>
</body>
</html>