Examples of work in general is good enough, you can be more complex query Tutorial:
The official title Commentary: http://echarts.baidu.com/option.html#title
coordinate related: X axis: http://echarts.baidu.com/option.html#xAxis
coordinate relevant: Y axis: HTTP: // echarts.baidu.com/option.html#yAxis
form part: http://echarts.baidu.com/option.html#grid
<Script>
function getChartsLine () {
var myChart = echarts.init (document.getElementById ( 'Progress'),' macarons' );
var Option = {
title: {
text: 'Engineering line graph ", // main title
textStyle: {
color: '# 0DB9F2', // color
fontStyle: 'Normal', // style
fontWeight: 'Normal', // thickness
fontFamily: 'in the Microsoft YaHei', // font
fontSize: 14, //Size
align = left: 'Center' // horizontally aligned
},
subtext: 'Subtitle', @ subtitle
subtextStyle: { // the corresponding style
Color: '# F27CDE' ,
the fontSize: 14
},
itemGap: . 7
},
Grid: { // graph display data in the current canvas coordinate axes of
X: 50 ,
Y: 55 ,
X2: 50 ,
Y2: 60,
BorderWidth: . 1
},
ToolTip: {
Trigger: 'Axis'
},
Legend: {
Data: [ "scheduled to be completed", "the actual completion" ]
},
Toolbox: {
Show: to true ,
Feature: {
saveAsImage: {}
}
} ,
XAXIS: {
type: 'category' ,
boundaryGap: to false ,
Data: ["2015-1", "2015-2," "2015-3," "2015-4," "2015-5," "2015-6," "2015-7," "2015-8", "2015 -9 "," 2015-10 "," 2015-11 "," 2015-12 " ]
},
YAXIS: {
type: 'value' ,
// default thousandth to display, may not want to use it with a piece of the
AxisLabel: { // adjust the left Y-axis scale, data corresponding to the press
Show: to true ,
showMinLabel: to true ,
showMaxLabel: to true ,
Formatter:function (value) {
return value;
},
}
}
Series: [
{
name:
Data: [ "planning" ,
type: 'Line' ,
Data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3 ],
markPoint: {
Data: [
type {: 'max', name: 'maximum' },
{type: "min", name: "min" }
]
},
markLine: {
type {: 'Average', name: 'average' },
[{
Symbol: 'none' ,
X: '90% ' ,
YAXIS: ' max '
}, {
Symbol: ' Circle ' ,
label: {
Normal: {
position: 'Start' ,
Formatter: 'maximum'
}
},
Type: 'max' ,
name: 'highest'
}]
]
}
},
{
name: "Actual" ,
type: 'Line' ,
Data: [ 0, 0, 37 [, 0, 0, 15, 3036 , 5572, 0, 0, 0, 0 ],
markPoint: {
Data: [
{type: 'max', name: 'Maximum ' },
{type: 'min', name: 'minimum'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'Start' ,
Formatter:'Maximum'
}
},
type: 'max' ,
name: 'highest'
}]
]
}
}
]
};
myChart.setOption (Option);
}
getChartsLine ();
</ Script>
Modified:
