In the website development, may use the line chart, the pie chart, and so on to enrich the webpage to the data display, may use the Echart
Http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts can refer to this URL to get started quickly
<! DOCTYPE html> <meta CharSet="Utf-8"> <title>Echarts</title> <!--introduction Echarts.js-- <script Src="Echarts.min.js"></script><body> <!--prepare a DOM-to-size (wide-height) for echarts <div Id="Main" Style="Width: 600px;Height:400px;"></div> <script Type="Text/javascript"> Initializes a Echarts instance based on the prepared DOM VarMyChart=Echarts.Init(Document.getElementById(' Main ')); Specify the configuration items and data for the chart VarOption= {Title: {Text: ' Echarts Getting Started example ' },ToolTip: {},Legend: {Data:[Sales] },Xaxis: {Data: [Shirt,Sweater,"Chiffon Sweater",Pants,High Heels,Socks] },YAxis: {},Series: [{Name: Sales,Type: ' Bar ',Data: [5, 20 36, 10 , 10, 20] }] }; The span class= "com" >//uses the configuration item and data that you just specified to display the chart. Mychart.option</script></body></HTML>
Can quickly come out of a bar chart
This is what I use this
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ECharts</title>
<meta name= "viewport" content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ">
<script src= "Js/echarts.simple.min.js" ></script>
<body>
<!--prepare a DOM-to-size (wide-height) for echarts
<div id= "Chart" style= "height:400px" ></div>
<script>
var chart = echarts.init (document.getElementById (' Chart '));
option = {
Title: {
Text: ' Integral Trend Line chart '
},
tooltip: {
Trigger: ' Axis '
},
Grid: {
Left: ' 5% ',
Right: ' 8% ',
Bottom: ' 1% ', containlabel:true
},
color: [' #27AACC '],
Xaxis: {
Type: ' Category ',
Boundarygap:false,
Data: [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday '],
axisline:{
LineStyle: {
Type: ' Solid ',
Color: ' #666 '
},
}
},
YAxis: {
zlevel:0,
Type: ' Value ',
Axisline: {
Show:false,
linestyle:{
Color: ' #dfe3e3 '
}},
Axistick: {
Show:false
},
Boundarygap: [' 20% ', ' 20% '],
Scale:false,
min:0,
Type: ' Value ',
Splitline: {
LineStyle: {
Type: ' Dotted '
}
}
},
Series: [
{
Name: ' Integration Trend Chart ',
Type: ' line ',
Stack: ' Fractions ',
LineStyle: {
Normal: {
Width:1
}
},
data:[0,12,23,23,25]
} ,
]
};
chart.setoption (option);
Window.onresize = chart.resize;
</script>
</body>
You can modify the style of the icon by using the parameter configuration
option = {
Title: {
Text: ' Integral trend line chart '
},
ToolTip: {
Trigger: ' axis '
},
Grid: {
Left: ' 10px ',
Right: ' 12% ',
Bottom: ' 1% ',
Containlabel:true
},
Color: [' #27AACC '],
Xaxis: {
Type: ' Category ',
Boundarygap:false,
Data:months_array,
axisline:{
LineStyle: {
Type: ' Solid ',
Color: ' #666 '
},
}
},
YAxis: {
zlevel:0,
Type: ' Value ',
Axisline: {
Show:false,
linestyle:{
Color: ' #999 '
}
},
Axistick: {
Show:false
},
Boundarygap: [' 20% ', ' 20% '],
Scale:false,
min:0,
Type: ' Value ',
Splitline: {
LineStyle: {
Type: ' Dotted '
}
}
},
Series: [
{
Name: ' Integration Trend Chart ',
Type: ' line ',
Stack: ' Fractions ',
LineStyle: {
Normal: {
Width:1
}
},
Data:sum_point
},
]
};
You can refer to http://echarts.baidu.com/option.html to modify the chart we designed.
Use Echart in the website