在vue使用echarts
echarts是什么
?ecahrts 是一個(gè)高度可定制化的圖表庫(kù)
如何使用echarts:
1.?cnpm i echarts -S
2. 在入口文件內(nèi)引入echarts,掛載到vue的原型上，這樣就可以在項(xiàng)目里的任何地方使用了
基本配置
?各個(gè)組件在圖表中的位置
配置詳解
1. title:?text:圖表標(biāo)題 textStyle 標(biāo)題的樣式? top，left 等
2. legend:展現(xiàn)了不同系列的標(biāo)記(symbol)淳玩，顏色和名字瑟啃∪杩可以通過(guò)點(diǎn)擊控制哪些系列不顯示谤碳。
? 1.?data:指定圖表每一項(xiàng)的名字佑钾，通常是一個(gè)數(shù)組,非必填
? 2. top,left,padding textStyle 等樣式信息
3.?grid 可以在網(wǎng)格上繪制折線圖，柱狀圖烂翰，散點(diǎn)圖（氣泡圖）夯缺。
? ? 1. left top bottom right 位置信息 ，及其他樣式信息
4. tooltip:?提示框組件甘耿，展示對(duì)應(yīng)坐標(biāo)軸上圖表的信息
? ? 1. trigger：以什么方式顯示提示框
'item'
數(shù)據(jù)項(xiàng)圖形觸發(fā)踊兜，主要在散點(diǎn)圖，餅圖等無(wú)類目軸的圖表中使用佳恬。
'axis'
坐標(biāo)軸觸發(fā)捏境，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用毁葱。
在 ECharts 2.x 中只支持類目軸上使用 axis trigger垫言，在 ECharts 3 中支持在直角坐標(biāo)系和極坐標(biāo)系上的所有類型的軸。并且可以通過(guò)?axisPointer.axis?指定坐標(biāo)軸头谜。
'none'
什么都不觸發(fā)骏掀。
? ? 2.?axisPointer:坐標(biāo)指示器,相當(dāng)于是輔助看圖的
? ? ? ? 1. type?line直線指示器? ?'shadow'?陰影指示器? ??'cross'?十字準(zhǔn)星指示器。其實(shí)是種簡(jiǎn)寫柱告，表示啟用兩個(gè)正交的軸的 axisPointer
? ? ? ? 2.?shadowStyle lineStyle crossStyle 各個(gè)指示器的樣式
5.(y)xAxis yx軸 ,可設(shè)置多個(gè)截驮，單個(gè) grid 組件最多只能放上下兩個(gè) 軸，多于兩個(gè)? 軸需要通過(guò)配置?offset?屬性防止同個(gè)位置多個(gè) 軸的重疊际度。
? ? ? ? 1. type：葵袭。
? ? ? ? ????1.1?'value'?數(shù)值軸，適用于連續(xù)數(shù)據(jù)
? ? ? ? ????2.1 'category'?類目軸乖菱，適用于離散的類目數(shù)據(jù)坡锡，為該類型時(shí)必須通過(guò)?data?設(shè)置類目數(shù)據(jù)。
? ? ? ? ????3.1?'time'?時(shí)間軸窒所，適用于連續(xù)的時(shí)序數(shù)據(jù)鹉勒，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同吵取，例如會(huì)根據(jù)跨度的范圍來(lái)決定使用月禽额，星期，日還是小時(shí)范圍的刻度皮官。
? ? ? ? 4.1?'log'?對(duì)數(shù)軸脯倒。適用于對(duì)數(shù)數(shù)據(jù)。
? ? ? ? 2. data：存放x,y軸數(shù)據(jù)的地方
? ? ? ? ? ? 示例：
? ???????????所有類目名稱列表
? ? ? ? ? ? ?data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
? ? ? ? ? ? ?每一項(xiàng)也可以是具體的配置項(xiàng)捺氢，此時(shí)取配置項(xiàng)中的 `value` 為類目名
????????????data: [{ value: '周一', // 突出周一 textStyle: { fontSize: 20, color: 'red' }}, '周二', '周三', '周四', '周五', '周六', '周日']
axisLabel：設(shè)置坐標(biāo)軸刻度的標(biāo)簽樣式和刻度數(shù)據(jù)
name ：坐標(biāo)軸的名字
splitLine：坐標(biāo)軸在?grid?區(qū)域中的分隔線藻丢，主要是設(shè)置樣式
6. series：數(shù)據(jù)的集中地
? ? 1. type：圖表的類型：有bar ，line摄乒，pie 等等
? ? 2. name ：該屬性要同legend上的data數(shù)組一一對(duì)應(yīng)悠反，系列名稱残黑，用于tooltip的顯示，legend?的圖例篩選问慎，在?setOption?更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列萍摊。
? ? 3. stack：數(shù)據(jù)堆疊，同個(gè)類目軸上系列配置相同的stack值后如叼，后一個(gè)系列的值會(huì)在前一個(gè)系列的值上相加冰木。
? ? 4.?barGap 可實(shí)現(xiàn)類似的效果，但會(huì)出現(xiàn)覆蓋的情況笼恰，設(shè)置-100%同一類目軸的會(huì)層疊踊沸，在同一坐標(biāo)系上，此屬性會(huì)被多個(gè) 'bar' 系列共享社证。此屬性應(yīng)設(shè)置于此坐標(biāo)系中最后一個(gè) 'bar' 系列上才會(huì)生效逼龟，并且是對(duì)此坐標(biāo)系中所有 'bar' 系列生效。
? ? 5.??(x) yAxisIndex:將series的數(shù)據(jù)映射到哪個(gè)軸追葡，多個(gè)x軸線或y軸線比較有用 0：代表映射到第一個(gè)軸腺律，依次類推
7. toolbox：工具組件，用于下載等功能
8.?dataZoom:數(shù)據(jù)縮放 [slider||inside]
? ? 1. handleIcon：手柄的 icon 形狀宜肉，
? ?2.?start:數(shù)據(jù)窗口開始百分比??end:數(shù)據(jù)窗口結(jié)束百分比
? ?3.?xAxisIndex控制哪一條軸的縮放
? ?4. filterMode: 過(guò)濾模式?
'filter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)匀钧，被?過(guò)濾掉。即?會(huì)?影響其他軸的數(shù)據(jù)范圍谬返。每個(gè)數(shù)據(jù)項(xiàng)之斯，只要有一個(gè)維度在數(shù)據(jù)窗口外，整個(gè)數(shù)據(jù)項(xiàng)就會(huì)被過(guò)濾掉遣铝。
'weakFilter'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)佑刷，被?過(guò)濾掉。即?會(huì)?影響其他軸的數(shù)據(jù)范圍酿炸。每個(gè)數(shù)據(jù)項(xiàng)瘫絮，只有當(dāng)全部維度都在數(shù)據(jù)窗口同側(cè)外部，整個(gè)數(shù)據(jù)項(xiàng)才會(huì)被過(guò)濾掉填硕。
'empty'：當(dāng)前數(shù)據(jù)窗口外的數(shù)據(jù)檀何，被?設(shè)置為空。即?不會(huì)?影響其他軸的數(shù)據(jù)范圍廷支。
'none': 不過(guò)濾數(shù)據(jù)，只改變數(shù)軸范圍栓辜。
怎么選擇
當(dāng)『只有 X 軸 或 只有 Y 軸受?dataZoom?組件控制』時(shí)恋拍，常使用?filterMode: 'filter'，這樣能使另一個(gè)軸自適應(yīng)過(guò)濾后的數(shù)值范圍藕甩。
當(dāng)『X 軸 Y 軸分別受?dataZoom?組件控制』時(shí)：
如果 X 軸和 Y 軸是『同等地位的施敢、不應(yīng)互相影響的』周荐，比如在『雙數(shù)值軸散點(diǎn)圖』中，那么兩個(gè)軸可都設(shè)為?fiterMode: 'empty'僵娃。
如果 X 軸為主概作，Y 軸為輔，比如在『柱狀圖』中默怨，需要『拖動(dòng)?dataZoomX?改變 X 軸過(guò)濾柱子時(shí)讯榕，Y 軸的范圍也自適應(yīng)剩余柱子的高度』，『拖動(dòng)?dataZoomY?改變 Y 軸過(guò)濾柱子時(shí)匙睹，X 軸范圍不受影響』愚屁，那么就 X軸設(shè)為?fiterMode: 'filter'，Y 軸設(shè)為?fiterMode: 'empty'痕檬，即主軸?'filter'霎槐，輔軸?'empty'。
