ホームページ > ウェブフロントエンド > jsチュートリアル > Ajax を介して折れ線グラフを動的にロードする方法 (グラフィック チュートリアル)

Ajax を介して折れ線グラフを動的にロードする方法 (グラフィック チュートリアル)

亚连
リリース: 2018-05-21 15:46:29
オリジナル
2654 人が閲覧しました

この記事では、Echarts チュートリアルで Ajax を介して折れ線グラフを動的にロードする方法を主に紹介します。必要な友達は参照してください

1. GIF チャート

2. フロント終了コード

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

// 调用方法

hotlineLine();

// 定时刷新

setInterval(function () {

  hotlineLine();

},5000);

function hotlineLine(){

  // 初始化图表元素

  var hotlineLine = echarts.init(document.getElementById('hotlineLine_id'));

  $.get('${pageContext.request.getContextPath()}/m/hotline.do', function (res) {

    var option = {

      // 提示框组件,鼠标经过饼图时会出现提示框

      tooltip: {

        // 触发类型

        // 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。

        trigger: 'axis'

      },

      // 每条折线的颜色

      color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'],

      // 图例组件

      legend: {

        // 内容

        data:['呼入', '呼出', '应答', '用户放弃'],

        // 样式

        textStyle:{

            fontSize:10,

            color:'#66ffff'

          },

        // 上距离,类似css中的margin

        top:'5%'

      },

      // 网格

      grid: {

        // 左距离

        left: '7%',

        right: '5%',

        bottom: '10%',

        top:'20%'

      },

      // 横坐标

      xAxis: {

        // 类型

        type: 'category',

        // 刻度

        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],

        // 样式

        axisLine:{

          // 横坐标线的颜色

          lineStyle:{

            color:'#66ffff'

          }

        }

      },

      yAxis: {

        type: 'value',

        name: '次数',

        axisLabel: {

          formatter: '{value}'

        },

        axisLine:{

          lineStyle:{

            color:'#66ffff'

          }

        },

        splitLine:{

          show: true,

          lineStyle:{

            color:'#66ffff'

          }

        }

      },

      series: [

           {

             name:'呼入',

             type:'line',

             data:res[3]

           },

           {

             name:'呼出',

             type:'line',

             data:res[2]

           },

           {

             name:'应答',

             type:'line',

             data:res[1]

           },

           {

             name:'用户放弃',

             type:'line',

             data:res[0]

           }

        ],

        // 文本标签

        label: { 

          //是否展示 

          show: true,

          position: 'top',

          textStyle: { 

            fontWeight:'bolder', 

            fontSize : '12', 

            fontFamily : '微软雅黑', 

            color:defaultColor

          

        }

    };

    hotlineLine.setOption(option);

  });

}

<p class="rightMain01-sub03 box-border">

  <p class="box-title">话务指标趋势图</p>

  <p class="rightMain01-sub03-data">

    <p id="hotlineLine_id" style="height:340px;"></p>

  </p>

</p>

ログイン後にコピー

3. バックエンドコード

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

List<List<Integer>> hotlineList = new ArrayList<List<Integer>>();

@RequestMapping("/m/hotline.do")

@ResponseBody

public JSONArray hotline() {

  List<List<Integer>> returnList = new ArrayList<List<Integer>>();

  if (hotlineList.size() == 0 || hotlineList.get(0).size() >= 9) {

    hotlineList.clear();

    for (int i = 0; i < 4; i++) {

      List<Integer> l = new ArrayList<Integer>();

      l.add(i * 5 + AlexUtils.getRandomInteger(0, 5));

      hotlineList.add(l);

    }

  }

  for (int i = 0; i < hotlineList.size(); i++) {

    List<Integer> list = hotlineList.get(i);

    int thisSize = list.size();

    if (thisSize < 5) {

      list.add(list.get(thisSize - 1) + AlexUtils.getRandomInteger(1, 5));

    } else {

      list.add(list.get(thisSize - 1) - AlexUtils.getRandomInteger(1, 5));

    }

    returnList.add(list);

  }

  hotlineList = returnList;

  return JSONArray.fromObject(returnList);

}

public static int getRandomInteger(int min, int max) {

  int diff = max - min;

  return min + new Random().nextInt(diff);

}

ログイン後にコピー

データ形式:

1.[[1,3,4,5,7],[6,9,11,12,13] ,[10 ,11,12,13,16],[16,19,21,22,24]]

上記は、今後皆さんのお役に立てれば幸いです。

関連記事:

Ajaxの概念と利点

ajax3つの実装方法

AJAX ASP/PHPリクエスト例の関連知識

以上がAjax を介して折れ線グラフを動的にロードする方法 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート