两种echarts简单异步数据导引入方法_其他方法引用mychart

作者：人工智能uu | 2024-06-29 13:53:28

踩

其他方法引用mychart

两种echarts异步数据导引入方法

1、根据echarts官方网站提供的jQuery方法
echarts相关异步数据官方教程
data.json文件中存放的数据

{
    "categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    "values": [5, 20, 36, 10, 10, 20]
}
1
2
3
4

方法一：
①将加载数据与准备图表容器放在一起

<script>
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function(data) {//获得存放在data.json中的json数据
  myChart.setOption({
    title: {
      text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {},
    xAxis: {
      //引入json数据中的categories一栏数据
      data: data.categories
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        //引入values数据
        data: data.values
      }
    ]
  });
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

方法二：
②先准备一个空白图表容器，然后在进行异步数据的加载

<script>
var myChart=echarts.init(document.getElementById('main'));
//显示空白坐标轴与标题
myChart.setOption({
  title: {
    text: '异步数据加载示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: []
    }
  ]
});

//引入异步数据
$.get('data.json').done(function(data){
    myChart.setOption({
        xAxis:{
            data:data.categories
        },
        series:[{
            data:data.values
        }]
    })
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

其实当数据加载时间过长时，可以设置一个加载动画提高用户体验

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);});
1
2
3
4

2、用Ajax+Express后台服务器方法
index.html客户端的写法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src='jQuery-3.6.0.min.js'></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart=echarts.init(document.getElementById('main'));
//显示空白坐标轴与标题
myChart.setOption({
  title: {
    text: '异步数据加载示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: []
    }
  ]
});


//使用Ajax方法向后台请求数据
$.ajax({
    url:'http://127.0.0.1:8000/data',
    method:'GET',
    dataType:'json',
    success:function(data){
        //console.log(data);
        //获取数据成功，将其填入图表中
        myChart.setOption({
            xAxis:{
                data:data.categories
            },
            series:[{
                data:data.values
            }]
        })
    },
    error:function(){
        console.log("error!")
    }
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

server.js的写法

const express=require('express');
const app=express();
app.all("/data",(req,res)=>{
     res.setHeader("Access-Control-Allow-Origin","*");
     res.setHeader("Access-Control-Allow-Headers","*");
     let data={
         "categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
         "values": [5, 20, 36, 10, 10, 20]
     };
    //将数据转化为字符串格式发送
     data=JSON.stringify(data);
        //用.end()方法，不然会报错
     res.end(data);
});
app.listen(8000,()=>{
     console.log("服务启动，8000端口监听中...");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

重点是对json数据的声明要用let，不然会报错…
这种方法还可以扩展下用express框架传入外部json文档中的数据，来适合大数据量的图表制作

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/769395