echarts.js的折线图如何实现？echarts.js折线统计图的实现代码

本篇文章给大家带来的内容是关于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">// javascript document// echarts// create for agnesxu at 20161115//折线图var line = echarts.init(document.getelementbyid('line'));line.setoption({ color:["#32d2c9"], title: { x: 'left', text: '成绩统计', textstyle: { fontsize: '18', color: '#4c4c4c', fontweight: 'bolder' } }, tooltip: { trigger: 'axis' }, toolbox: { show: true, orient: 'horizontal', feature: { datazoom: { yaxisindex: 'none' }, dataview: {readonly: false}, magictype: {type: ['line', 'bar']} } }, xaxis: { type: 'category', boundarygap: false, data: ['周一','周二','周三','周四','周五','周六','周日'], axislabel: { interval:0 } }, yaxis: { show: false, type: 'value', axislabel: { formatter: '{value} °c' } }, series: [ { name:'成绩', type:'line', data:[23, 42, 18, 45, 48, 49,100], markline: {data: [{type: 'average', name: '平均值'}]} } ]}) ;</script></body></html>
运行结果如下：
相关推荐：
php中用gd绘制折线图，gd绘制折线
jqplot的折线图图示_html/css_web-itnose
echarts设置折线线条颜色和折线点颜色的实例
以上就是echarts.js的折线图如何实现？echarts.js折线统计图的实现代码的详细内容。

echarts.js的折线图如何实现？echarts.js折线统计图的实现代码

推荐信息