在網站開發中，可能會使用折線圖，圓餅圖，等等 來豐富網頁對數據的展示，可以使用echart
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 可以參考這個網址，快速上手
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和數據 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
可以快速出來一個柱狀圖
這是我使用這個
<!DOCTYPE html>
<head>
<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>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="chart" style="height:400px"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
option = {
title: {
text: '積分趨勢折線圖'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '5%',
right: '8%',
bottom: '1%',
containLabel: true
},
color: ['#27AACC'],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五'],
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:'積分趨勢圖',
type:'line',
stack: '分數',
lineStyle: {
normal: {
width: 1
}
},
data:[0,12,23,23,25]
},
]
};
chart.setOption(option);
window.onresize = chart.resize;
</script>
</body>
可以通過參數配置來修改圖標的樣式
option = {
title: {
text: '積分趨勢折線圖'
},
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:'積分趨勢圖',
type:'line',
stack: '分數',
lineStyle: {
normal: {
width: 1
}
},
data:sum_point
},
]
};
具體可以參考http://echarts.baidu.com/option.html來修改成咱們設計的圖表。