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: '低血压',
          type: 'line',

          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,123,125,127,128,129,120,123,122,126,129,122
  ],
  "echatY2": [
    60,64,63,63,65,67,68,69,61,66,65,68,69,65
  ]
}

test.json

代码架构：

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

相关推荐