Echarts 通用配置項

時間 2019-11-08

標籤 echarts 通用配置简体版

原文原文鏈接

這篇文章會首先介紹使用echarts的最簡單的例子，而後介紹一些通用的配置項。後面會拿幾篇文章專門講解echarts的graphic, 以及echarts的自定義系列，掌握了echarts的自定義系列的用法，那繪製任何圖形都不在話下。除了普通的渲染，還有一些交互行爲，好比拖動等等，後面也會介紹。
因此主要包含幾個方面：
一、echarts的通用配置項
二、echarts的graphic
三、echarts的自定義系列
四、echarts的交互javascript

首頁進入第一塊內容，echarts的通用配置項。
咱們來看看官網的第一的例子：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

通用的配置項能夠查看官網的配置項手冊：https://echarts.baidu.com/opt...
這裏只介紹幾種通用的配置，好比grid, xAxis的配置 , yAxis的配置, DataZoom的配置以及Echarts拖動。java

1、grid的配置

單個grid最多能夠放上下兩個X軸，左右兩個Y軸，在Echarts3中能夠存在任意個grid組件
下面給幾個grid的實例：數組

https://gallery.echartsjs.com...
並且grid的位置是能夠任意調整的：echarts

grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x2: '7%', y: '7%', width: '38%', height: '38%'}
 ]

https://gallery.echartsjs.com...dom

grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x: '7%', y2: '7%', width: '38%', height: '38%'}
 ]

https://gallery.echartsjs.com...ide

grid: [
        {x: '7%', y: '7%', width: '38%', height: '38%'},
        {x2: '7%', y2: '7%', width: '38%', height: '38%'}
 ]

2、xAxis的配置 , yAxis的配置

xAxis的配置與yAxis的配置能夠是數組，也就是若是是多個grid的時候，就能夠按照數組的形式來配置
好比：spa

xAxis: [
        {gridIndex: 0, min: 0, max: 20},
        {gridIndex: 1, min: 0, max: 20}
 ],
 yAxis: [
        {gridIndex: 0, min: 0, max: 20},
        {gridIndex: 1, min: 0, max: 15}
  ],

https://gallery.echartsjs.com...code

xAxis gridIndex：0 表示第一個grid的x軸，xAxis gridIndex: 1表示第二個grid的x軸；對於yAxis同理htm

3、DataZoom的配置

dataZoom 組件用於區域縮放，這裏詳細介紹幾個屬性：type, start, end, filterMode, xAxisIndex, yAxisIndex。

type: inside, 內置於座標系中，使用戶能夠在座標系上經過鼠標拖拽、鼠標滾輪、手指滑動（觸屏上）來縮放或漫遊座標系
type: slider, 有單獨的滑動條，用戶在滑動條上進行縮放或漫遊
start: 數據窗口範圍的起始百分比, 範圍是：0 ~ 100
end: 數據窗口範圍的結束百分比, 範圍是：0 ~ 100
startValue: 數據窗口範圍的起始數值。若是設置了 dataZoom-inside.start 則 startValue 失效。若是軸的類型爲 category，則 startValue 既能夠設置爲 axis.data 數組的 index，也能夠設置爲數組值自己。可是若是設置爲數組值自己，會在內部自動轉化爲數組的 index
endValue: 數據窗口範圍的結束數值。若是設置了 dataZoom-inside.end 則 endValue 失效。
dataZoom 的運行原理是經過數據過濾來達到數據窗口縮放的效果。數據過濾模式的設置不一樣，效果也不一樣。

filterMode:
可選值爲：
'filter'：當前數據窗口外的數據，被過濾掉。即會影響其餘軸的數據範圍。每一個數據項，只要有一個維度在數據窗口外，整個數據項就會被過濾掉。
'weakFilter'：當前數據窗口外的數據，被過濾掉。即會影響其餘軸的數據範圍。每一個數據項，只有當所有維度都在數據窗口同側外部，整個數據項纔會被過濾掉。
'empty'：當前數據窗口外的數據，被設置爲空。即不會影響其餘軸的數據範圍。
'none': 不過濾數據，只改變數軸範圍。

如何設置，由用戶根據場景和需求本身決定。經驗來講：
一、當『只有 X 軸或只有 Y 軸受 dataZoom 組件控制』時，常使用 filterMode: 'filter'，這樣能使另外一個軸自適應過濾後的數值範圍。
二、當『X 軸 Y 軸分別受 dataZoom 組件控制』時：
若是 X 軸和 Y 軸是『同等地位的、不該互相影響的』，好比在『雙數值軸散點圖』中，那麼兩個軸可都設爲 fiterMode: 'empty'。
三、若是 X 軸爲主，Y 軸爲輔，好比在『柱狀圖』中，須要『拖動 dataZoomX 改變 X 軸過濾柱子時，Y 軸的範圍也自適應剩餘柱子的高度』，『拖動 dataZoomY 改變 Y 軸過濾柱子時，X 軸範圍不受影響』，那麼就 X軸設爲 fiterMode: 'filter'，Y 軸設爲 fiterMode: 'empty'，即主軸 'filter'，輔軸 'empty’。

xAxisIndex: 表示控制第幾個x軸，若是是 number 表示控制一個軸，若是是 Array 表示控制多個軸
yAxisIndex: 表示控制第幾個y軸，若是是 number 表示控制一個軸，若是是 Array 表示控制多個軸
詳情查看下面的實例：
https://gallery.echartsjs.com...

4、Echarts拖動

關於拖動的例子仍是挺少的，在官網上echarts給了兩個實例, 詳見https://echarts.baidu.com/exa...

第一個實例比較簡單，就是經過graphic的ondrag與draggable結合使用的方式，裏面使用了convertToPixel，convertFromPixel兩個方法
convertToPixel：轉換座標系上的點到像素座標值
convertFromPixel：轉換像素座標值到邏輯座標系上的點，是convertToPixel的逆運算
好比：
在直角座標系（cartesian，grid）上，把某個點的座標轉換成爲像素座標：

chart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);

把某個座標軸的點轉換成像素座標：

// id 爲 'x0' 的 xAxis 的刻度 3000 位置所對應的橫向像素位置：

chart.convertToPixel({xAxisId: 'x0'}, 3000); // 返回一個 number。

// 第二個 yAxis 的刻度 600 位置所對應的縱向像素位置：
chart.convertToPixel({yAxisIndex: 1}, 600); // 返回一個 number。

把關係圖（graph）的點轉換成像素座標：
// 由於每一個 graph series 本身持有一個座標系，因此咱們直接在 finder 中指定 series：

chart.convertToPixel({seriesIndex: 0}, [2000, 3500]);
chart.convertToPixel({seriesId: 'k2'}, [100, 500]);

在某個系列所在的座標系（不管是 cartesian、geo、graph 等）中，轉換某點成像素座標：

// 使用第一個系列對應的座標系：
chart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);
// 使用 id 爲 'k2' 的系列所對應的座標系：
chart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);

固然，還有其餘的定位依據，詳見以下
seriesIndex: number,

seriesId: string,
seriesName: string,
geoIndex: number,
geoId: string,
geoName: string,
xAxisIndex: number,
xAxisId: string,
xAxisName: string,
yAxisIndex: number,
yAxisId: string,
yAxisName: string,
gridIndex: number,
gridId: string
gridName: string

對於裏面的第二個實例，下次會詳細介紹第二個實例。
拖動實例：
有時候咱們會對多個grid拖動從新設置不一樣grid高度的需求，以下實例：
https://gallery.echartsjs.com...