一甘穿、簡單介紹
Echart是百度研發(fā)團(tuán)隊(duì)開發(fā)的一款報(bào)表視圖JS插件，功能十分強(qiáng)大梢杭，使用內(nèi)容做簡單記錄温兼；（EChart下載地址?http://echarts.baidu.com/download.html）
Echart官方網(wǎng)站：https://www.echartsjs.com/index.html
二、Echart屬性介紹
1武契、title：寫標(biāo)題募判，屬性如下
show:false/true ?標(biāo)題是否顯示；
text：標(biāo)題內(nèi)容咒唆；textstyle修飾標(biāo)題樣式
subtext：副標(biāo)題届垫，也可以算是內(nèi)容；subtextStyle修飾副標(biāo)題樣式全释；
2装处、legentd:圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字浸船；
show:false/true ?是否顯示妄迁；
data:圖例的數(shù)據(jù)數(shù)組;
3、grid:直角坐標(biāo)系內(nèi)繪圖網(wǎng)格,單個(gè) grid 內(nèi)最多可以放置上下兩個(gè) X 軸糟袁，左右兩個(gè) Y 軸判族√墒ⅲ可以在網(wǎng)格上繪制折線圖项戴，柱狀圖，散點(diǎn)圖;
show:false/true ?是否顯示槽惫；
top周叮、left、right界斜、bottom標(biāo)識上左右下的邊距仿耽；
4、xAxis :直角坐標(biāo)系 grid 中的 x 軸各薇，單個(gè) grid 組件最多只能放上下兩個(gè) x 軸项贺。
type:坐標(biāo)軸類型。
????????'value'數(shù)值軸峭判，適用于連續(xù)數(shù)據(jù)开缎。
????????'category'類目軸，適用于離散的類目數(shù)據(jù)林螃，為該類型時(shí)必須通過data設(shè)置類目數(shù)據(jù)奕删。
????????'time'時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)疗认，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化完残，在刻度計(jì)算上也有所不同伏钠，例如會根據(jù)跨度的范圍來決定使用月，星期谨设，日還是小時(shí)范圍的刻度熟掂。
????????data:類目數(shù)據(jù)滓彰，在類目軸（type: 'category'）中有效症杏。
5绸贡、yAxis:直角坐標(biāo)系 grid 中的 y 軸耗美，單個(gè) grid 組件最多只能放左右兩個(gè) y 軸欠窒。
????????type:坐標(biāo)軸類型干毅。
????????'value'數(shù)值軸滤否，適用于連續(xù)數(shù)據(jù)吃嘿。
????????'category'類目軸侣夷，適用于離散的類目數(shù)據(jù)横朋，為該類型時(shí)必須通過data設(shè)置類目數(shù)據(jù)。
????????'time'時(shí)間軸百拓，適用于連續(xù)的時(shí)序數(shù)據(jù)琴锭，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同衙传，例如會根據(jù)跨度的范圍來決定使用月决帖，星期，日還是小時(shí)范圍的刻度蓖捶。
6地回、dataZoom:組件 用于對數(shù)據(jù)進(jìn)行區(qū)域縮放，從而能自由關(guān)注細(xì)節(jié)的數(shù)據(jù)信息俊鱼，或者概覽數(shù)據(jù)整體刻像。
????????type:slider;?是否顯示 組件。如果設(shè)置為false并闲，不會顯示细睡，但是數(shù)據(jù)過濾的功能還存在;
backgroundColor:組件的背景顏色。
????????realtime:拖動時(shí)帝火，是否實(shí)時(shí)更新系列的視圖溜徙。如果設(shè)置為false，則只在拖拽結(jié)束的時(shí)候更新犀填。
top蠢壹、left、right宏浩、bottom標(biāo)識上左右下的邊距知残；
7、tooltip:提示框組件。
????????show:false/true ?是否顯示求妹；
trigger:觸發(fā)類型;
????????'item'：數(shù)據(jù)項(xiàng)圖形觸發(fā)乏盐，主要在散點(diǎn)圖，餅圖等無類目軸的圖表中使用制恍。
????????'axis'：坐標(biāo)軸觸發(fā)父能，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用净神。
8何吝、color：調(diào)色盤顏色列表。如果系列沒有設(shè)置顏色鹃唯，則會依次循環(huán)從該列表中取顏色作為系列顏色爱榕。
????????默認(rèn)為：['#c23531','#2f4554',?'#61a0a8',?'#d48265',?'#91c7ae','#749f83',?'#ca8622',?'#bda29a','#6e7074',?'#546570',?'#c4ccd3']；
9坡慌、seriers:系列列表黔酥。每個(gè)系列通過type 決定自己的圖表類型；
????????series[i]-line：折線
????????itemStyle折線拐點(diǎn)標(biāo)志的樣式洪橘；
????????series[i]-bar：柱狀圖通過柱形的高度來表現(xiàn)數(shù)據(jù)的大小跪者，用于有至少一個(gè)類目軸的直角坐標(biāo)系上。
????????series[i]-pie：餅圖主要用于表現(xiàn)不同類目的數(shù)據(jù)在總和中的占比熄求。每個(gè)的弧度表示數(shù)據(jù)數(shù)量的比例渣玲。
10、itemStyle 樣式:
????????normal:color 顏色弟晚；
三忘衍、簡單入門使用
1、引用echarts.js文件
注意：需要引用時(shí)請到官網(wǎng)下載echarts.js文件指巡。
<script?type="text/javascript"?src="js/echarts.js"></script>
2淑履、準(zhǔn)備一個(gè)放視圖的div（自定義）
<div id="chartmain"?style="width:600px; height: 400px;"></div>
3隶垮、設(shè)置參數(shù)藻雪，初始化自定義的圖標(biāo)
<script type="text/javascript">
????????//初始化echarts實(shí)例
????????var?myChart = echarts.init(document.getElementById('chartmain'));
????????//var myChart = echarts.init($("#chartmain")[0]); jquery方式
????????//指定圖標(biāo)的配置和數(shù)據(jù)
????????var?option = {
????????????title:{
????????????????text:'ECharts 數(shù)據(jù)統(tǒng)計(jì)'
????????????},
????????????tooltip:{},
????????????legend:{
????????????????data:['用戶來源']
????????????},
????????????xAxis:{
????????????????data:["Android","IOS","PC","Ohter"]
????????????},
????????????yAxis:{
????????????},
????????????series:[{
????????????????name:'訪問量',
????????????????type:'line',
????????????????data:[500,200,360,100]
????????????}]
????????};
????????//使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
????????myChart.setOption(option);
</script>
?這樣簡單的一個(gè)統(tǒng)計(jì)圖表就出來了，官網(wǎng)使用的柱狀圖狸吞，我這邊改用了折線圖勉耀。
四、柱狀圖的中間顯示數(shù)據(jù)
改變position的值：
1蹋偏、外部位置：top：在柱狀圖頂部便斥，bottom：在柱狀圖底部，right：在柱狀圖的右邊威始，left：在柱狀圖左邊枢纠。
2、內(nèi)部位置：inside：在柱狀圖中間黎棠，insideRight：在柱狀圖內(nèi)部的右邊晋渺，insideLeft：在柱狀圖內(nèi)部的右邊镰绎，insideTop：在柱狀圖內(nèi)部的頂部，insideBottom：在柱狀圖內(nèi)部的底部木西。
代碼demo：
series : [
????{
????????name:'機(jī)器數(shù)量',
????????type:'bar',
????????barWidth:?'60%',
????????data:[569, 30],
????????itemStyle:{
????????????normal:{
????????????????label:{
????????????????????show:true,?//表示是否顯示
????????????????????position:?'inside',?//改變數(shù)字的位置
????????????????????textStyle: {?//改變字體的顏色和字體大小
????????????????????????color:?'#ffff',
????????????????????????fontSize: 13
????????????????????},
????????????????????formatter:?function(params){
????????????????????????if(params.value == 0){
????????????????????????????return?'';
????????????????????????}else?{
????????????????????????????return?params.value;
????????????????????????}
????????????????????}
????????????????}
????????????}
????????}
????}
]
?拿一個(gè)實(shí)例展示一下?? inside：在柱狀圖中間：
分類:jquery畴栖；
