echart多条折线图ajax请求json数据

今天的demo是echart多条折线图ajax请求json数据

两个文件：1，HTML父文件 test.html 2，请求数据的test.json文件

HTML父文件：

<html>

<head>
  <Meta charset="UTF-8">
  <title></title>
</head>

<body>
<!-- 折线统计图 -->
<div class="row">
  <div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  // 折线图
  $.ajax({
    url: "test.json",data: {},type: ‘GET‘,success: function(data) {
      console.log(JSON.stringify(data))
      bloodFun(data.echatX,data.echatY,data.echatY2);

    },});

  // 基于准备好的dom，初始化echarts实例
  var bloodChart = echarts.init(document.getElementById(‘main‘));
  // 指定图表的配置项和数据
  function bloodFun(x_data,y_data,y2_data) {
    bloodChart.setoption({
      title: {
        text: ‘‘
      },tooltip: {
        trigger: ‘axis‘,axisPointer: {
          type: ‘cross‘,label: {
            backgroundColor: ‘#6a7985‘
          }
        }
      },legend: {},toolBox: {
        feature: {
          saveAsImage: {}
        }
      },grid: {
        left: ‘3%‘,right: ‘4%‘,bottom: ‘3%‘,containLabel: true
      },xAxis: [{
        type: ‘category‘,boundaryGap: false,data: x_data,}],yAxis: [{
        type: ‘value‘
      }],series: [{
        name: ‘高血压‘,type: ‘line‘,areaStyle: {
          normal: {
            color: ‘#fff‘ //改变区域颜色
          }
        },itemStyle: {
          normal: {
            color: ‘#8cd5c2‘,//改变折线点的颜色
            linestyle: {
              color: ‘#8cd5c2‘ //改变折线颜色
            }
          }
        },data: y_data
      },{
          name: ‘低血压‘,areaStyle: {
            normal: {
              color: ‘#fff‘ //改变区域颜色
            }
          },itemStyle: {
            normal: {
              color: ‘#8cd5c2‘,//改变折线点的颜色
              linestyle: {
                color: ‘#8cd5c2‘ //改变折线颜色
              }
            }
          },data: y2_data
        }
      ]
    });
  }
</script>
</html>

test.html

请求数据test.json文件：

{
  "echatX": [
    "2019-07-02","2019-07-03","2019-07-04","2019-07-05","2019-07-06","2019-07-07","2019-07-08","2019-07-09","2019-07-10","2019-07-11","2019-07-12","2019-07-13","2019-07-14","2019-07-15"
  ],"echatY": [
    120,121,123,125,127,128,129,120,122,126,122
  ],"echatY2": [
    60,64,63,65,67,68,69,61,66,65
  ]
}

test.json

部分css样式：

  <style>
    #main{
      border: 2px solid #00c2bc;
      margin: 30px;
      background: #ffbdc6;
      border-radius: 10px;
      Box-shadow:7px 7px 7px rgba(101,30,231,0.41);
     

    }
    @-webkit-keyframes anim1 {
      0% {
        Opacity: 0;
        Font-size: 12px;
      }
      100% {
        Opacity: 1;
        Font-size: 24px;
      }
    }

    #main {
      -webkit-animation-name: anim1;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-iteration-count: 4;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease-in-out;
    }
  </style>

View Code

代码架构：

echart多条折线图ajax请求json数据

相关推荐