recherche

Maison >interface Web >js tutoriel >Comment implémenter le graphique linéaire dans echarts.js ? Code d'implémentation du graphique statistique de ligne echarts.js

Comment implémenter le graphique linéaire dans echarts.js ? Code d'implémentation du graphique statistique de ligne echarts.js

不言
不言original
2018-08-17 10:25:454163parcourir

Le contenu de cet article explique comment implémenter le graphique linéaire d'echarts.js ? Le code d'implémentation du graphique statistique en ligne echarts.js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile. 

<!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>

Les résultats en cours d'exécution sont les suivants :

Comment implémenter le graphique linéaire dans echarts.js ? Code dimplémentation du graphique statistique de ligne echarts.js

Recommandations associées :

Utilisez GD pour dessiner des graphiques en courbes dans php, gd dessine une polyligne

Le graphique linéaire de JQplot icon_html/css_WEB-ITnose

echarts définit la couleur de la ligne polyligne et polyligne Exemple de couleur de point

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quelle est l’utilisation de la mémoire en js ? Comprendre le rôle de la mémoire jsArticle suivant：Quelle est l’utilisation de la mémoire en js ? Comprendre le rôle de la mémoire js

Articles Liés

Voir plus