ホームページ > ウェブフロントエンド > jsチュートリアル > echarts.js で折れ線グラフを実装するにはどうすればよいですか? echarts.js折れ線統計グラフの実装コード

echarts.js で折れ線グラフを実装するにはどうすればよいですか? echarts.js折れ線統計グラフの実装コード

不言
リリース: 2018-08-17 10:25:45
オリジナル
4233 人が閲覧しました

この記事の内容は、echarts.jsの折れ線グラフの実装方法についてです。 echarts.js の折れ線統計グラフの実装コードは、参考になると思います。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>常用的数据统计图</title>

 

<link type="text/css" rel="stylesheet" href="./css/index.css" />

<style type="text/css">

body{font-size:14px;color:#000;user-select:none;-webkit-user-select:none;-webkit-text-size-adjust:none;background-color:#fff;}

html,body{height:100%;}

*{font-family:"微软雅黑","华文细黑",Arial,Helvetica,sans-serif;}

a,input,div,textarea{outline:none;}

html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea,a{margin:0;padding:0}

input,textarea,select{text-decoration:none;outline:0 none;resize:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;border-radius:0;}

ul,dl,ol{list-style:none;}

ul,li{list-style:none;}

fieldset,img{border:0;}

a{text-decoration:none;outline:0 none;}

body{background-color:#faf9f4;}

p{color:#3d3d3d;font-size:20px;text-align:center;padding:100px 0 10px 0;}

 

#ring,#line,#pillar1,#pillar2{margin:0 auto;}

.null{padding-bottom:100px;}

</style>

</head>

<body>

 

<p>折线统计图</p>

<div id="line" style="width:822px;height:492px;"></div>

 

<div class="null"></div>

 

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>

 

<!-- <script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>

<script type="text/javascript" src="./js/echarts.min.js"></script> -->

<script type="text/javascript">

// JavaScript Document

// echarts

// create for AgnesXu at 20161115

 

//折线图

var line = echarts.init(document.getElementById(&#39;line&#39;));

line.setOption({

    color:["#32d2c9"],

    title: {

        x: &#39;left&#39;,

        text: &#39;成绩统计&#39;,

        textStyle: {

            fontSize: &#39;18&#39;,

            color: &#39;#4c4c4c&#39;,

            fontWeight: &#39;bolder&#39;

        }

    },

    tooltip: {

        trigger: &#39;axis&#39;

    },

    toolbox: {

        show: true,

        orient: &#39;horizontal&#39;,

        feature: {

            dataZoom: {

                yAxisIndex: &#39;none&#39;

            },

            dataView: {readOnly: false},

            magicType: {type: [&#39;line&#39;, &#39;bar&#39;]}

        }

    },

    xAxis:  {

        type: &#39;category&#39;,

        boundaryGap: false,

        data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;],

        axisLabel: {

            interval:0

        }

    },

    yAxis: {

        show: false,

        type: &#39;value&#39;,

         axisLabel: {

            formatter: &#39;{value} °C&#39;

        }

    },

    series: [

        {

            name:&#39;成绩&#39;,

            type:&#39;line&#39;,

            data:[23, 42, 18, 45, 48, 49,100],

            markLine: {data: [{type: &#39;average&#39;, name: &#39;平均值&#39;}]}

        }

    ]

}) ;

 

</script>

</body>

</html>

ログイン後にコピー

実行結果は次のとおりです:

echarts.js で折れ線グラフを実装するにはどうすればよいですか? echarts.js折れ線統計グラフの実装コード

関連する推奨事項:

phpで折れ線グラフを描画するにはGDを使用します。gdは折れ線グラフを描画します

JQplotの折れ線グラフ icon_html/css_WEB-ITnose

ポリラインの線の色とポリラインの点の色の設定のechartsの例

以上がecharts.js で折れ線グラフを実装するにはどうすればよいですか? echarts.js折れ線統計グラフの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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