suchen

Heim >Web-Frontend >js-Tutorial >Wie implementiert man das Liniendiagramm in echarts.js? Implementierungscode des statistischen Liniendiagramms von echarts.js

Wie implementiert man das Liniendiagramm in echarts.js? Implementierungscode des statistischen Liniendiagramms von echarts.js

不言
不言Original
2018-08-17 10:25:454147Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Liniendiagramms von echarts.js. Der Implementierungscode des Linienstatistikdiagramms von echarts.j hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. 

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

Die laufenden Ergebnisse sind wie folgt:

Wie implementiert man das Liniendiagramm in echarts.js? Implementierungscode des statistischen Liniendiagramms von echarts.js

Verwandte Empfehlungen:

Verwenden Sie GD, um ein Liniendiagramm in PHP zu zeichnen , und gd, um ein Liniendiagramm zu zeichnen

JQplots Liniendiagramm icon_html/css_WEB-ITnose

echarts legt die Polylinie fest Linienfarbe und Polylinienpunktfarbe Beispiel für

Das obige ist der detaillierte Inhalt vonWie implementiert man das Liniendiagramm in echarts.js? Implementierungscode des statistischen Liniendiagramms von echarts.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wozu dient Speicher in js? Verstehen Sie die Rolle des js-SpeichersNächster Artikel：Wozu dient Speicher in js? Verstehen Sie die Rolle des js-Speichers

In Verbindung stehende Artikel

Mehr sehen