首頁 >web前端 >js教程 >echarts.js的折線圖如何實現？ echarts.js折線統計圖的實作程式碼

echarts.js的折線圖如何實現？ echarts.js折線統計圖的實作程式碼

不言原創: 2018-08-17 10:25:454135瀏覽

這篇文章帶給大家的內容是關於echarts.js的折線圖如何實現？ echarts.js折線統計圖的實作程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

<!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折線統計圖的實作程式碼

echarts.js的折線圖如何實現？ echarts.js折線統計圖的實作程式碼

相關文章