一、
1、echarts Y軸刻度保留小數設置，以及設置刻度間隔
默認echarts會給你把最大值，最小值之間的這段距離分爲5段，所以如果你的值都在6到6.5之間的話，你就設置min爲6，max爲6.5就可以
2、不顯示柱狀圖上方的數據
在series裏面的label裏面進行設置
設置label:{show: false}即可
修改掉changeChartStyle裏面的series下面的label對象的normal對象下面的show屬性爲false
3、tooltip表示懸浮框，
backgroundColor: "rgba(62,77,95,0.8)"：表示懸浮框的背景顏色，
shadowStyle:{color:'rgba(14,36,64,0.8)'}：表示懸浮框移入到每一列的背景顏色，需要設置type: 'shadow', 才起作用
二、柱狀圖學習
效果圖：
對柱形圖各部分分析:（重點） ：
實現：
根據柱形每個部分的專業名稱去尋找官網中的配置項手冊對應的屬性，然後實現你需要的效果 
代碼：
<!DOCTYPE html>
<html>
<head>
<title>echarts</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body style="background-color:#333;"><!-- -->
<div id="_top" style="width:600px;height: 400px;margin-top:100px;margin-left: 300px;">
</div>
</body>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('_top'));
// 指定圖表的配置項和數據
var option = {
//-------------- 標題 title ----------------
title: {
text: '主標題',
textStyle:{ //---主標題內容樣式
color:'#fff'
},
subtext:'副標題', //---副標題內容樣式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---標題位置,因爲圖形是是放在一個dom中,因此用padding屬性來定位
},
//---------------- 圖例 legend -----------------
legend: {
type:'plain', //----圖例類型，默認爲'plain'，當圖例很多時可使用'scroll'
top:'1%', //----圖例相對容器位置,top\bottom\left\right
selected:{
'銷量':true, //----圖例選擇,圖形加載出來會顯示選擇的圖例，默認爲true
},
textStyle:{ //----圖例內容樣式
color:'#fff', //---所有圖例的字體顏色
//backgroundColor:'black', //---所有圖例的字體背景色
},
tooltip:{ //圖例提示框，默認不顯示
show:true,
color:'red',
},
data:[ //----圖例內容
{
name:'銷量',
icon:'circle', //----圖例的外框樣式
textStyle:{
color:'#fff', //----單獨設置某一個圖例的顏色
//backgroundColor:'black',//---單獨設置某一個圖例的字體背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否顯示提示框,默認爲true
trigger:'item', //---數據項圖形觸發
axisPointer:{ //---指示樣式
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{ //---提示框內容樣式
color:"#fff",
},
},
//------------- grid區域 ----------------
grid:{
show:false, //---是否顯示直角座標系網格
top:80, //---相對位置，top\bottom\left\right
containLabel:false, //---grid 區域是否包含座標軸的刻度標籤
tooltip:{ //---鼠標焦點放在圖形上，產生的提示框
show:true,
trigger:'item', //---觸發類型
textStyle:{
color:'#666',
},
}
},
//------------- x軸 -------------------
xAxis: {
show:true, //---是否顯示
position:'bottom', //---x軸位置
offset:0, //---x軸相對於默認位置的偏移
type:'category', //---軸類型，默認'category'
name:'月份', //---軸名稱
nameLocation:'end', //---軸名稱相對位置
nameTextStyle:{ //---座標軸名稱樣式
color:"#fff",
padding:[5,0,0,-5], //---座標軸名稱相對位置
},
nameGap:15, //---座標軸名稱與軸線之間的距離
//nameRotate:270, //---座標軸名字旋轉
axisLine:{ //---座標軸 軸線
show:true, //---是否顯示
//------------------- 箭頭 -------------------------
symbol:['none', 'arrow'], //---是否顯示軸線箭頭
symbolSize:[8, 8] , //---箭頭大小
symbolOffset:[0,7], //---箭頭位置
//------------------- 線 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---座標軸 刻度
show:true, //---是否顯示
inside:true, //---是否朝內
lengt:3, //---長度
lineStyle:{
//color:'red', //---默認取軸線的顏色
width:1,
type:'solid',
},
},
axisLabel:{ //---座標軸 標籤
show:true, //---是否顯示
inside:false, //---是否朝內
rotate:0, //---旋轉角度
margin: 5, //---刻度標籤與軸線之間的距離
//color:'red', //---默認取軸線的顏色
},
splitLine:{ //---grid 區域中的分隔線
show:false, //---是否顯示，'category'類目軸不顯示，此時我的X軸爲類目軸，splitLine屬性是無意義的
lineStyle:{
//color:'red',
//width:1,
//type:'solid',
},
},
splitArea:{ //--網格區域
show:false, //---是否顯示，默認false
},
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//內容
},
//---------------------- y軸 ------------------------
yAxis: {
show:true, //---是否顯示
position:'left', //---y軸位置
offset:0, //---y軸相對於默認位置的偏移
type:'value', //---軸類型，默認'category'
name:'銷量', //---軸名稱
nameLocation:'end', //---軸名稱相對位置value
nameTextStyle:{ //---座標軸名稱樣式
color:"#fff",
padding:[5,0,0,5], //---座標軸名稱相對位置
},
nameGap:15, //---座標軸名稱與軸線之間的距離
//nameRotate:270, //---座標軸名字旋轉
axisLine:{ //---座標軸 軸線
show:true, //---是否顯示
//------------------- 箭頭 -------------------------
symbol:['none', 'arrow'], //---是否顯示軸線箭頭
symbolSize:[8, 8] , //---箭頭大小
symbolOffset:[0,7], //---箭頭位置
//------------------- 線 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---座標軸 刻度
show:true, //---是否顯示
inside:true, //---是否朝內
lengt:3, //---長度
lineStyle:{
//color:'red', //---默認取軸線的顏色
width:1,
type:'solid',
},
},
axisLabel:{ //---座標軸 標籤
show:true, //---是否顯示
inside:false, //---是否朝內
rotate:0, //---旋轉角度
margin: 8, //---刻度標籤與軸線之間的距離
//color:'red', //---默認取軸線的顏色
},
splitLine:{ //---grid 區域中的分隔線
show:true, //---是否顯示，'category'類目軸不顯示，此時我的y軸爲類目軸，splitLine屬性是有意義的
lineStyle:{
color:'#666',
width:1,
type:'dashed', //---類型
},
},
splitArea:{ //--網格區域
show:false, //---是否顯示，默認false
}
},
//------------ 內容數據 -----------------
series: [
{
name: '銷量', //---系列名稱
type: 'bar', //---類型
legendHoverLink:true, //---是否啓用圖例 hover 時的聯動高亮
label:{ //---圖形上的文本標籤
show:false,
position:'insideTop', //---相對位置
rotate:0, //---旋轉角度
color:'#eee',
},
itemStyle:{ //---圖形形狀
color:'blue',
barBorderRadius:[18,18,0,0],
},
barWidth:'20', //---柱形寬度
barCategoryGap:'20%', //---柱形間距
data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</html>