一款非常實(shí)用的圖表插件工具echarts。首先貼上官網(wǎng)地址http://echarts.baidu.com/，截取了官網(wǎng)實(shí)例的一個(gè)圖，可以看到官方提供的圖表類型非常的豐富，也有詳細(xì)的使用文檔。
官網(wǎng)截圖
下面簡單介紹echarts的使用
第一步：下載官網(wǎng)的echarts源代碼
第二步：創(chuàng)建一個(gè)項(xiàng)目，頁面中引入echarts.js，并且創(chuàng)建一個(gè)元素用來初始化圖表
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
</head>
<script type="text/javascript" src="js/echarts.js"></script>
<body>
<div id="echarts" style="width: 600px;height:400px;"></div>
</body>
</html>
第三步：初始化與數(shù)據(jù)配置（圖表的配置項(xiàng)可以在官網(wǎng)實(shí)例中 找到自己合適的圖表點(diǎn)開復(fù)制里面的配置參數(shù)即可），如下：
<script type="text/javascript">
//初始化容器 init()
var myChart = echarts.init(document.getElementById('echarts'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
color:['#999'],
xAxis: { //X軸
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7'], //X軸文字項(xiàng)
axisLabel:{
color:"#666" //X軸文字顏色
},
},
yAxis: { //Y軸，注意 如果Y軸是數(shù)據(jù)的話 那不需要進(jìn)行每項(xiàng)設(shè)置，會(huì)根據(jù)下面設(shè)置的數(shù)據(jù)進(jìn)行自動(dòng)展示數(shù)據(jù)組
type: 'value',
axisLabel:{
color:"#666"
},
},
series: [{ //圖標(biāo)數(shù)據(jù)展示
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar' //圖表類型 bar 柱狀圖
}]
};
// 設(shè)置數(shù)據(jù) setOption
myChart.setOption(option);
</script>
官方文檔：在文檔的配置項(xiàng)中，可以看到對(duì)圖表的詳細(xì)配置參數(shù)，比如下圖X坐標(biāo)軸的配置項(xiàng)
圖表參數(shù)截圖
最后附上我上面貼的代碼的效果圖
demo效果圖
