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

最新推荐文章于 2023-06-11 00:20:17 发布

Miakura

最新推荐文章于 2023-06-11 00:20:17 发布

阅读量2.1k

点赞数 2

文章标签： echarts javascript ajax

本文链接：https://blog.csdn.net/Miakura/article/details/120556069

版权

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

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

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

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

<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>

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

<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>

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

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

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>

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端口监听中...");
});