在vue使用echarts
echarts是什么
?ecahrts 是一個高度可定制化的圖表庫
如何使用echarts:
1.?cnpm i echarts -S
2. 在入口文件內引入echarts,掛載到vue的原型上，這樣就可以在項目里的任何地方使用了
基本配置
?各個組件在圖表中的位置
配置詳解
1. title:?text:圖表標題 textStyle 標題的樣式? top，left 等
2. legend:展現(xiàn)了不同系列的標記(symbol)，顏色和名字。可以通過點擊控制哪些系列不顯示。
? 1.?data:指定圖表每一項的名字，通常是一個數(shù)組,非必填
? 2. top,left,padding textStyle 等樣式信息
3.?grid 可以在網(wǎng)格上繪制折線圖，柱狀圖，散點圖（氣泡圖）。
? ? 1. left top bottom right 位置信息 ，及其他樣式信息
4. tooltip:?提示框組件，展示對應坐標軸上圖表的信息
? ? 1. trigger：以什么方式顯示提示框
'item'
數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。
'axis'
坐標軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
在 ECharts 2.x 中只支持類目軸上使用 axis trigger，在 ECharts 3 中支持在直角坐標系和極坐標系上的所有類型的軸。并且可以通過?axisPointer.axis?指定坐標軸。
'none'
什么都不觸發(fā)。
? ? 2.?axisPointer:坐標指示器,相當于是輔助看圖的
? ? ? ? 1. type?line直線指示器? ?'shadow'?陰影指示器? ??'cross'?十字準星指示器。其實是種簡寫，表示啟用兩個正交的軸的 axisPointer
? ? ? ? 2.?shadowStyle lineStyle crossStyle 各個指示器的樣式
5.(y)xAxis yx軸 ,可設置多個，單個 grid 組件最多只能放上下兩個 軸，多于兩個? 軸需要通過配置?offset?屬性防止同個位置多個 軸的重疊。
? ? ? ? 1. type：。
? ? ? ? ????1.1?'value'?數(shù)值軸，適用于連續(xù)數(shù)據(jù)
? ? ? ? ????2.1 'category'?類目軸，適用于離散的類目數(shù)據(jù)，為該類型時必須通過?data?設置類目數(shù)據(jù)。
? ? ? ? ????3.1?'time'?時間軸，適用于連續(xù)的時序數(shù)據(jù)，與數(shù)值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據(jù)跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
? ? ? ? 4.1?'log'?對數(shù)軸。適用于對數(shù)數(shù)據(jù)。
? ? ? ? 2. data：存放x,y軸數(shù)據(jù)的地方
? ? ? ? ? ? 示例：
? ???????????所有類目名稱列表
? ? ? ? ? ? ?data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
? ? ? ? ? ? ?每一項也可以是具體的配置項，此時取配置項中的 `value` 為類目名
????????????data: [{ value: '周一', // 突出周一 textStyle: { fontSize: 20, color: 'red' }}, '周二', '周三', '周四', '周五', '周六', '周日']
axisLabel：設置坐標軸刻度的標簽樣式和刻度數(shù)據(jù)
name ：坐標軸的名字
splitLine：坐標軸在?grid?區(qū)域中的分隔線，主要是設置樣式
6. series：數(shù)據(jù)的集中地
? ? 1. type：圖表的類型：有bar ，line，pie 等等
? ? 2. name ：該屬性要同legend上的data數(shù)組一一對應，系列名稱，用于tooltip的顯示，legend?的圖例篩選，在?setOption?更新數(shù)據(jù)和配置項時用于指定對應的系列。
? ? 3. stack：數(shù)據(jù)堆疊，同個類目軸上系列配置相同的stack值后，后一個系列的值會在前一個系列的值上相加。
? ? 4.?barGap 可實現(xiàn)類似的效果，但會出現(xiàn)覆蓋的情況，設置-100%同一類目軸的會層疊，在同一坐標系上，此屬性會被多個 'bar' 系列共享。此屬性應設置于此坐標系中最后一個 'bar' 系列上才會生效，并且是對此坐標系中所有 'bar' 系列生效。
? ? 5.??(x) yAxisIndex:將series的數(shù)據(jù)映射到哪個軸，多個x軸線或y軸線比較有用 0：代表映射到第一個軸，依次類推
7. toolbox：工具組件，用于下載等功能
8.?dataZoom:數(shù)據(jù)縮放 [slider||inside]
? ? 1. handleIcon：手柄的 icon 形狀，
? ?2.?start:數(shù)據(jù)窗口開始百分比??end:數(shù)據(jù)窗口結束百分比
? ?3.?xAxisIndex控制哪一條軸的縮放
? ?4. filterMode: 過濾模式?
'filter'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被?過濾掉。即?會?影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只要有一個維度在數(shù)據(jù)窗口外，整個數(shù)據(jù)項就會被過濾掉。
'weakFilter'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被?過濾掉。即?會?影響其他軸的數(shù)據(jù)范圍。每個數(shù)據(jù)項，只有當全部維度都在數(shù)據(jù)窗口同側外部，整個數(shù)據(jù)項才會被過濾掉。
'empty'：當前數(shù)據(jù)窗口外的數(shù)據(jù)，被?設置為空。即?不會?影響其他軸的數(shù)據(jù)范圍。
'none': 不過濾數(shù)據(jù)，只改變數(shù)軸范圍。
怎么選擇
當『只有 X 軸 或 只有 Y 軸受?dataZoom?組件控制』時，常使用?filterMode: 'filter'，這樣能使另一個軸自適應過濾后的數(shù)值范圍。
當『X 軸 Y 軸分別受?dataZoom?組件控制』時：
如果 X 軸和 Y 軸是『同等地位的、不應互相影響的』，比如在『雙數(shù)值軸散點圖』中，那么兩個軸可都設為?fiterMode: 'empty'。
如果 X 軸為主，Y 軸為輔，比如在『柱狀圖』中，需要『拖動?dataZoomX?改變 X 軸過濾柱子時，Y 軸的范圍也自適應剩余柱子的高度』，『拖動?dataZoomY?改變 Y 軸過濾柱子時，X 軸范圍不受影響』，那么就 X軸設為?fiterMode: 'filter'，Y 軸設為?fiterMode: 'empty'，即主軸?'filter'，輔軸?'empty'。
