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

本篇文章给大家带来的内容是关于echarts.js的折线图如何实现？echarts.js折线统计图的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

常用的数据统计图

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;}

折线统计图

// 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: '平均值'}]}

}

]

}) ;

运行结果如下：

相关推荐：