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

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

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

HTML父文件:

<html>

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

<body>
<!-- 折线统计图 -->
<div class="row">
  <div ></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

相关文章:

  • 2021-11-20
  • 2021-11-25
  • 2022-12-23
  • 2022-12-23
  • 2021-10-15
  • 2021-07-29
猜你喜欢
  • 2022-12-23
  • 2022-02-01
  • 2021-12-31
  • 2021-10-01
  • 2022-12-23
  • 2021-11-27
  • 2021-05-02
相关资源
相似解决方案