項目中需要實現數據可視化，在前輩的推薦之下，最終選取了echarts來實現，在此關於echarts的使用進行總結，最終代碼分享至我的github。
關於echarts
echarts是百度推出的，使用JavaScript實現的開源可視化庫，可以提供直觀、可定制化的數據可視化圖表，包括折線圖、柱狀圖、散點圖、地圖和餅圖等，點擊跳轉主頁。
使用
需求
使用之前先談需求：使用echarts的話，需求基本上都是為了實現數據可視化，那么數據可視化牽扯到一個怎么展示的問題，就echarts功能而言，展示將通過可視化圖表進行，也就是，這里的需求可歸為將某數據使用echarts以圖表（假定為柱狀圖）的形式呈現。
實現
一般情況，我會直接打開echart官方實例, 選取相應的實例，我們以最簡單的折線圖為例。可以看到對應的JS代碼為：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
那么，這里的各種變量分別代表的是什么含義呢？當然可以在此修改部分數據，查看折線圖的變化，echarts圖形化的呈現是通過setOption配置方法來實現的，點擊詳情，這里對各種配置做出詳盡的介紹。
簡單實例
那么在日常開發環境中如何實現呢？
首先，創建first.html文件，並編寫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts使用</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/echarts.min.js"></script>
</head>
<body>
<div class="content">
<div class="title">
echarts使用案例
</div>
<div class="chart">
<div id="firstchart">
</div>
</div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('firstchart'));
var option = {
title: {
text: '一周溫度變化',
left: 'center',
top: '1%',
textStyle: {
color: 'white',
fontSize:16,
}
},
xAxis: {
type: 'category',
data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
axisTick: {
alignWithLabel: true
},
axisLine:{
lineStyle: {
color:'white',
}
},
},
yAxis: {
type: 'value',
axisTick: {
alignWithLabel: true
},
axisLine:{
lineStyle: {
color:'white',
}
},
},
series: [{
data: [11, 12, 15, 5, 8, 14, 9],
type: 'line'
}]
};
myChart.setOption(option);
</script>
</body>
</html>
編寫對應的css樣式文件，打開瀏覽器就可看到對應的折線圖。
定制
在平時的使用中，其它需求勢必存在，而echarts本身也提供了這種定制化配置。下面關於一些常見需求舉例說明：
添加圖注
就上述折線圖而言，氣溫變化一般可分為最高溫度變化和最低溫度變化，也就意味着會有兩條折線。為了更直觀表現，這里可使用圖注來說明,在配置項中legend屬性：
legend:{
right:0,
top:3,
textStyle:{
fontSize:12,
color:'#FFF',
},
data:['最高溫度變化']
},
並設置了圖注屬性。
將坐標名旋轉
由於圖標可占用的空間有限，加之坐標名字符較長，就導致坐標名顯示不全的情況，可以將做表明改為斜體展示（旋轉角度），通過在xAxis中添加axisLabel屬性來實現：
xAxis : [
{
axisLabel:{
interval:0,
rotate:45,//傾斜度 -90 至 90 默認為0
},
}
]
設置坐標網格背景
為了界面的美觀，可以在圖表中繪制網格，並設置網格背景。首先，在xAxis下添加：
splitLine:{
show:true,
lineStyle:{
color: 'white',
width:1,
type: 'solid'
}
},
這樣，繪制了網格，然后，在yAxis中添加：
splitArea:{
show:true,
areaStyle:{
color:['#6a6f71', '#5b6062'],
},
},
即可實現網格背景，如下圖所示：
以上。
本文將持續更新。