EChart和hightcharts介紹和使用（生成圖示）
有兩種生成圖表方法：
hightcharts（推薦） https://www.highcharts.com.cn/
echarts https://echarts.apache.org/examples/zh/index.html
需要檢視具體操作可見詳情連結
一、hightcharts
1、什麼是highcharts？
highcharts是一款純js編寫的圖表庫，能夠很簡單便捷在web網站或用中新增互動性的圖表，Highcharts目前支援直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同型別的圖表，可以滿足你對Web圖表的任何需求 ！
2、優勢：
相容性好在ie6
開源免費
純js
圖表型別豐富
動態性
多軸支援
動態提示框
圖表匯出和列印功能
圖表縮放
支援外部資料載入
3、Highcharts主要組成
Title
圖表標題，包含標題和副標題（subTitle），其中副標題是非必須的。
Axis
座標軸，包含x軸（xAxis）和y軸（yAxis）。通常情況下，x軸顯示在圖表的底部，y軸顯示在圖表的左側。多個數據列可以共同使用同一個座標軸，為了對比或區分資料，Highcharts提供了多軸的支援。
Series
資料列。圖表上一個或多個數據系列，比如曲線圖中的一條曲線，柱狀圖中的一個柱形。
Tooltip
資料提示框。當滑鼠懸停在某點上時，以框的形式提示該點的資料，比如該點的值，資料單位等。資料提示框內提示的資訊完全可以通過格式化函式動態指定。
Legend
圖例。用不同形狀、顏色、文字等 標示不同資料列，通過點選標示可以顯示或隱藏該資料列。
Credits
圖表版權資訊。顯示在圖表右下方的包含連結的文字，預設是Highcharts官網地址。通過指定credits.enabled=false即可不顯示該資訊。
Exporting
匯出功能按鈕。通過引入exporting.js即可增加圖表匯出為常見檔案功能。
PlotLines
標示線（或輔助線）。可以在圖表上增加一條標示線，比如平均值線，最高值線等。
PlotBands
標示區域（分辨帶）。可以在圖表新增不同顏色的區域帶，標示出明顯的範圍區域。
二、echarts 1、什麼是echarts？1、title：寫標題，屬性如下
show:false/true 標題是否顯示；
text：標題內容；textstyle修飾標題樣式
subtext：副標題，也可以算是內容；subtextStyle修飾副標題樣式；
2、legentd:圖例元件展現了不同系列的標記(symbol)，顏色和名字；
show:false/true 是否顯示；
data:圖例的資料陣列;
3、grid:直角座標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖;
show:false/true 是否顯示；
top、left、right、bottom標識上左右下的邊距；
4、xAxis :直角座標系 grid 中的 x 軸，單個 grid 元件最多隻能放上下兩個 x 軸。
type:座標軸型別。
'value'數值軸，適用於連續資料。
'category'類目軸，適用於離散的類目資料，為該型別時必須通過data設定類目資料。
'time'時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。
data:類目資料，在類目軸（type: 'category'）中有效。
5、yAxis:直角座標系 grid 中的 y 軸，單個 grid 元件最多隻能放左右兩個 y 軸。
type:座標軸型別。
'value'數值軸，適用於連續資料。
'category'類目軸，適用於離散的類目資料，為該型別時必須通過data設定類目資料。
'time'時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。
6、dataZoom:元件 用於對資料進行區域縮放，從而能自由關注細節的資料資訊，或者概覽資料整體。
type:slider;是否顯示 元件。如果設定為false，不會顯示，但是資料過濾的功能還存在;
backgroundColor:元件的背景顏色。
realtime:拖動時，是否實時更新系列的檢視。如果設定為false，則只在拖拽結束的時候更新。
top、left、right、bottom標識上左右下的邊距；
7、tooltip:提示框元件。
show:false/true 是否顯示；
trigger:觸發型別;
'item'：資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
'axis'：座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
8、color：調色盤顏色列表。如果系列沒有設定顏色，則會依次迴圈從該列表中取顏色作為系列顏色。
預設為：['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3']；
9、seriers:系列列表。每個系列通過type 決定自己的圖表型別；
series[i]-line：折線
itemStyle折線拐點標誌的樣式；
series[i]-bar：柱狀圖通過柱形的高度來表現資料的大小，用於有至少一個類目軸的直角座標系上。
series[i]-pie：餅圖主要用於表現不同類目的資料在總和中的佔比。每個的弧度表示資料數量的比例。
10、itemStyle 樣式:
normal:color 顏色；
3、柱狀圖的中間顯示資料改變position的值：
1、外部位置：top：在柱狀圖頂部，bottom：在柱狀圖底部，right：在柱狀圖的右邊，left：在柱狀圖左邊。
2、內部位置：inside：在柱狀圖中間，insideRight：在柱狀圖內部的右邊，insideLeft：在柱狀圖內部的右邊，insideTop：在柱狀圖內部的頂部，insideBottom：在柱狀圖內部的底部。
程式碼demo：series : [
{
name:'機器數量',
type:'bar',
barWidth:'60%',
data:[569, 30],
itemStyle:{
normal:{
label:{
show:true,//表示是否顯示
position:'inside',//改變數字的位置
textStyle: {//改變字型的顏色和字型大小
color:'#ffff',
fontSize: 13
},
formatter:function(params){
if(params.value == 0){
return'';
}else{
returnparams.value;
}
}
}
}
}
}
]
拿一個例項展示一下 inside：在柱狀圖中間：
分類:JQuery