search

Home  >  Article  >  Web Front-end  >  How to implement the line chart in echarts.js? Implementation code of echarts.js line statistical chart

How to implement the line chart in echarts.js? Implementation code of echarts.js line statistical chart

不言
不言Original
2018-08-17 10:25:454110browse

The content of this article is about how to implement the line chart of echarts.js? The implementation code of echarts.js line statistical chart has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. 

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

The running results are as follows:

How to implement the line chart in echarts.js? Implementation code of echarts.js line statistical chart

Related recommendations:

Use GD to draw a line chart in php, and gd to draw a line chart

JQplot's line chart icon_html/css_WEB-ITnose

##echarts sets the polyline line color and polyline point color Example

The above is the detailed content of How to implement the line chart in echarts.js? Implementation code of echarts.js line statistical chart. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What is the use of memory in js? Understand the role of js memoryNext article：What is the use of memory in js? Understand the role of js memory

Related articles

See more