ajax实现异步加载ECharts图表数据_JavaScript

ajax实现异步加载ECharts图表数据

html代码

<div class="layui-row" style="margin-top:0.5rem">
    <div style="width:90%;margin:0rem auto 0.7rem auto;font-size:0.28rem">
      <div style="background:#3385ff;color:#fff;border-radius:4px;padding:0.08rem 0.2rem;display: inline;margin-left:0.2rem;">体温变化曲线图 / ℃</div>
      <div style="border:1px solid #3385ff;height:auto;border-radius:4px;box-sizing:border-box;margin-top:-0.18rem;height:3.2rem;">
        <div  id="tiwen"  style="width:100;height:100%;"></div>
      </div>
    </div>
  </div>

js代码

<script type="text/javascript">

    // 折线图
    $(function () {
        tiwen();

        // 体温
        function tiwen() {
            // 基于准备好的dom，初始化echarts实例
            var mychart = echarts.init(document.getelementbyid('tiwen'));
            option = {
              title:{
            // text:'echars入门'
            },
            grid:{
              x:35,
              y:35,
              x2:25,
              y2:40,
            },
            tooltip: {
              trigger: 'axis'
            },
            xaxis: {
              type: 'category',
              data: [],
              axislabel: {
                margin: 10,
                color: '#777',
              },
              axisline: {
                linestyle: {
                  color: 'rgba(107,107,107,1)',
                }
              },
            },
            yaxis: {
              type: 'value',
              splitnumber: 2,
              scale:true,
              // mininterval: 1,
              maxinterval: 3600 * 24 * 1000,
              axislabel: {
                color: '#555',
                margin: 6
              },
              axisline: {
                linestyle: {
                  color: 'rgba(107,107,107,0.2)',
                }
              },
              splitline: {
                linestyle: {
                  type: 'dashed',
                  color: 'rgba(131,101,101,0.3)'
                }
              },

            },
            series: [{
              name: '体温',
              data: [],
              type: 'line',
              linestyle: {
                normal: {
                  width: 2,
                  color: {
                    type: 'linear',
                    colorstops: [{
                      offset: 0,
                                color: '#48d8bf' // 0% 处的颜色
                              }, {
                                offset: 1,
                                color: '#48d8bf' // 100% 处的颜色
                              }],
                            globalcoord: false // 缺省为 false
                          }
                        }
                      },
                      itemstyle: {
                        normal: {
                          color: '#48d8bf',
                          bordercolor: "#5b92c9"
                        }
                      },
                      smooth: true
                    }]
                  };

            // 使用刚指定的配置项和数据显示图表。
            mychart.setoption(option);
            window.addeventlistener("resize",function(){
              mychart.resize();
            });

            // 异步加载数据
            $.get("gettiwen.html?cardid="+cardid+"").done(function (data) {

              if (data.code == 200) {
                  // 后台传过来的数据
                var createdate = data.data.createdate
                var tiwen = data.data.tiwen
              }else{
                 // 默认值
                var createdate = ['03/01','03/02','03/03','03/04','03/05','03/06','03/07']
                var tiwen = [62,64,62,63,63,64,63]
            }

              // 填入数据
              mychart.setoption({
                xaxis: {
                  data: createdate
                },
                series: [{
                  data: tiwen
                }]
              });
            });
        }
    })

</script>