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>

 

——现在的努力，只为小时候吹过的牛逼！ ——