ECharts 圖表外掛使用整理

說明

ECharts 是一個 JavaScript 實現的開源視覺化庫，相容當前絕大部分瀏覽器 IE 8 以上，是一個可高度個性化定製的資料視覺化圖表

ECharts 版本 –> 4.0.2

這篇文章只是對 ECharts 的 API 學習了一遍後，做的簡單記錄，結合 react 和 vue 的案例模板會在程式碼庫中陸續實現。

基本使用

1. 初始化例項

注意初始化時，echarts 內部會獲取 dom 的 clientWidth 和 clientHeight 來計算寬高，如果設定 width、height

為百分比，某些框架（react）會導致，計算出的 clientWidth 和 clientHeight 不符合預期（沒有計算完就被獲取使用），解決辦法一個是計算出確定的畫素值後傳入，另一個辦法是設定定時器，等待新的值計算完直接使用

    <!-- 需要設定寬高 -->
    <div id="main" style="width: 100px;height: 100px"></div>

    const chart = echart.init(document.getElementById('main'));

react 中使用

    render() {
        const
 
 {width = '100%', height = '100%'} = this.props;
        return (
            <div 
                className="default-chart" 
                ref={el => this.el = el} 
                style={{width, height}}
            ></div>
        );
    }
    initChart = (el) => {
        return new Promise((resolve) => {
            // 設定定時器，使得獲得的 clientWidth clientHeight 符合預期
            setTimeout(() => { 
                this.chart = echarts.init(el, null, {renderer: 'svg', width: 'auto', height: 'auto'});
                resolve();
            }, 0);
        })
    }
    async componentDidMount() { // 變成非同步的
        console.log('did mount');
        await this.initChart(this.el);
        this.setOption(this.props.options);
    }
 

或者等待容器尺寸後重新繪製

    initChart = (el) => {
        /*
            設定定時器呼叫 echarts 例項的 resize() 方法，重新重新整理畫布
        */ 
        this.chart = echarts.init(el, null, {renderer: 'svg', width: 'auto', height: 'auto'});
        setTimeout(() => this.chart.resize(), 0);
    }
    componentDidMount() { // 不在需要非同步
        console.log('did mount');
        this.initChart(this.el);
        this.setOption(this.props.options);
        window.addEventListener('resize', throttle(this.resize, 100));
    }

2. 非同步載入資料

echart 在圖示初始化後的任何時候，都可以通過例項的 setOption() 方法直接填入資料，如果需要載入資料，可以在載入資料完成後呼叫此方法；也可以階段性的獲取資料，然後通過 setOption() 方法注入資料。

    const chart = echart.init(document.getElementById('main'));

    get('/xxx').then(res => chart.setOption(res));

3. 載入動畫

echart 提供簡單的載入動畫

    const chart = echart.init(document.getElementById('main'));

    chart.showLoading();
    get('/xxx').then(res => {
        chart.hideLoading();
        chart.setOption(res);
    }); 

4. 互動元件

• legend 圖例元件
• title 標題元件
• visualMap 視覺對映元件
• dataZoom 資料區域縮放元件
• timeline 時間線元件

5. 移動端自適應

ECharts 實現了類似 CSS Media Query 的自適應能力

    option = {
        baseOption: { // 這裡是基本的『原子option』。
            title: {...},
            legend: {...},
            series: [{...}, {...}, ...],
            ...
        },
        media: [ // 這裡定義了 media query 的逐條規則。
            {
                query: { // 這裡寫規則。
                    minWidth: 200,
                    maxHeight: 300,
                    minAspectRatio: 1.3 // 長寬比
                },   
                option: {       // 這裡寫此規則滿足下的option。
                    legend: {...},
                    ...
                }
            },
            {
                query: {...},   // 第二個規則。
                option: {       // 第二個規則對應的option。
                    legend: {...},
                    ...
                }
            },
            {                   // 這條裡沒有寫規則，表示『預設』，
                option: {       // 即所有規則都不滿足時，採納這個option。
                    legend: {...},
                    ...
                }
            }
        ]
    };

5. 資料的視覺對映

資料視覺化是資料到視覺元素的對映過程，ECharts 的每種圖表本身就內建了這種對映過程，比如折線圖把資料對映到 ‘線’，柱狀圖 把資料對映到 ‘長度’ 等

ECharts 提供 visualMap 元件來提供通用的視覺對映

ECharts 中的資料，一般存放於 series.data 中，根據圖表型別不同，資料的具體形式也可能有些許差異

6. ECharts 中的事件和行為

在 ECharts 的圖表中使用者的操作將會觸發相應的事件，開發者可以監聽這些事件，然後通過回撥函式做相應的處理，比如跳轉到一個地址，或者彈出對話方塊

    chart.on('click', function (params) {
        console.log('chart in click', params);
    })

滑鼠事件的監聽函式會得到引數 params ，這是一個包含點選圖形的資料資訊物件

由元件的互動行為可以觸發事件，除此之外也可以在程式裡呼叫方法觸發圖表行為

    // 呼叫此方法可以觸發圖表行為，type對應著動作
    chart.dispatchAction({
        type: ''
    })

7. 切換 canvas 和 svg 渲染

ECharts 預設使用 canvas 渲染，切換到 svg 需要進行一些設定

    import * as echarts from 'echarts/lib/echarts';
    import 'zrender/lib/svg/svg';

    const chart = echarts.init(dom, null, {renderer: 'svg' /* canvas */}); 

API

1. echarts 屬性和方法

1. 初始化 echarts.init(dom, theme, opts) 建立例項

用於建立一個 ECharts 例項，不能在單個容器上初始化多個例項

• dom: 例項容器，一般是一個具有寬高的 div 元素，需要明確指定 style.width | style.height
• theme: 應用的主題配置物件，也可以是 echarts.registerTheme 註冊的主題名稱
• opts: 附加引數
  
  • renderer: 渲染器配置項 svg|canvas
  • width: 用於指定例項寬度 null/undefined/'auto' 表示例項容器的寬度
  • height: 同上
  • devicePixelRatio: 裝置畫素比，會預設獲取瀏覽器的 window.devicePixelRatio 值

    const chart = echarts.init(document.getElementById('main'), null, {
        renderer: 'svg',
        width: 300,
        height: 400
    });

2. echarts.dispose() 銷燬例項

例項銷燬後無法被使用

3. echarts.getInstanceByDom() 通過容器獲取容器上的例項

2. echartsInstance 例項屬性與方法

1. instance.group = 'xxx' 用於設定分組資訊

2. instance.setOption({}) 用於設定圖示配置項

設定圖表例項的配置項以及資料，萬能介面，所有引數和資料的修改都可以通過它完成，ECharts 會合並新的引數和資料，然後重新整理圖表，並通過合適的動畫變化

    chart.setOption(option, notMerge, lazyUpdate);

• option: 圖表的配置項和資料
• notMerge: 是否與之前的 option 合併 預設為 false 即為合併
• lazyUpdate: 在設定完option後是否不立即更新圖表，預設為false，即立即更新。

3. instance.getWidth()|getHeight() 獲取例項容器寬度|高度

4. instance.getDom()| () 獲取例項容器的 DOM | 獲取合併後的配置項

5. instance.resize(opts) 改變圖表尺寸，在容器大小發生變化時手動呼叫

引數可以省略，opts如下

• width: 顯式指定例項寬度，單位為畫素
• height: 顯式的指定例項的高度
• silent: 是否禁止丟擲事件 預設 false

6. instance.dispatchAction() 手動觸發圖表行為

7. instance.on('envent', handle) 繫結事件處理函式

ECharts 中事件有兩種，一種是滑鼠事件，滑鼠點選在某個圖形上會觸發，還有一種是呼叫 dispatchAction 後觸發的事件，每個 action 都會有對應的事件

    chart.on('click', params => console.log(params));

8. instance.off('event, handle) 解綁事件處理函式

9. instance.convertToPixel(finder, value) 轉換為畫素值

finder 表示定位引數，用來定位，value 表示要被轉換的值，返回畫素座標值

暫時理解為，將圖形座標值，轉化為對應的畫素座標值

10. instance.convertFromPixel() 從畫素值轉換

裝換畫素座標值到邏輯座標系上的點，是 convertToPixel 的逆運算

11. instance.containPixel() 判斷給定的點是否在指定的座標系上

12. instance.showLoading()|hideLoading() 顯示隱藏載入動畫

13. instance.getDataURL() 匯出圖表圖片

> 獲取圖表對應圖片的 base64的URL，可以設定為 Img 標籤的 src , 適合 canvas 渲染的圖表

14. instance.getConnectedDataURL() 匯出聯動的圖表圖片，返回 bas e64

適合 canvas 渲染的圖表

15. instance.clear() 清空當前例項

移除例項中所有元件和圖表，清空後呼叫 getOption 方法返回一個{}空物件。

16. instance.dispose()|isDisposed 銷燬例項|判斷例項是否銷燬

3. 滑鼠事件事件引數

事件引數是時間物件的資料的各個屬性，圖表的點選事件，基本引數如下，一些圖表還會有附加引數

常用滑鼠事件：click, dbclick, mousedown, mouseup, mouseover, mouseout, globalout, contextmenu

    {
        componentType: string, // 點選的圖形元素所屬元件名稱 series 表示系列
        seriesType: string, // 系列型別
        seriesIndex: number, // 系列編號
        seriesName: string, // 系列名稱
        name: string, // 資料名稱、類目名稱
        dataIndex: number, // 資料在傳入的 data 陣列中的 index
        data: Object, // 傳入的原始資料
        value: number|Array, // 傳入的資料值
        color: string, // 資料圖形的顏色
    }

4. instance.setOption({}) 的配置項

配置項物件的第一層屬性名錶示相應的元件，屬性值則是對應的元件的配置

    chart.setOption({
        title: {},
        legend: {}
        ....
    })

1. title 標題元件

    title: {
        show: true, // 是否顯示
        text: 'ECharts 入門示例xxx', // 主標題
        link: 'http://write.blog.csdn.net/postlist', // 主標題連結
        target: 'self', // 'blank' // 頁面跳轉方式
        textStyle: { // 主標題文字樣式
            color: '#333', // 部分 css 樣式
        },
        subtext: '簡單示例', // 副標題
        sublink: '',
        subtarget: 'blank',
        subtextStyle: {},
        padding: 10, // [t, r, b, l] 標題內邊距
        itemCap: 10, // 主副標題間距
        zlevel: 0, // 所有圖形的 zelvel 值，用於 canvas 分層，不同的 zlevel 會放置在不同的 canvas 中
        z: 2, // 元件所有圖形的 z 值，控制圖形的前後順序，比 zlevel 優先順序低，不會建立 canvas
        left: 'center', // left|top|right|bottom 對其屬性
        borderWidth: 1,
        borderColor: '#666',
        borderRadius: 4,
    },

2. legend 圖例元件

圖例元件展現了不同系列的標記、顏色和名字，可以通過點選圖例控制哪些系列不顯示

    legend: {
        type: 'scroll', // 圖例型別 ‘scroll’
        show: true, // 是否顯示
        zlevel: 0,
        z: 2,
        left: 'right',
        top: 'bottom', // left|top|right|bottom 顯示位置
        width: '100%', // width|height 圖例元件的寬高
        heigth: '100%',
        orient: 'vertical', // 圖例列表的佈局朝向
        align: 'left', // 標記和文字的對其
        padding: 10, // 元件的內邊距
        itemGap: 18, // 每項間距
        itemWidth: 20, // itemWidth|itemHeight每項圖形寬高
        // formatter: name => `is ${name}`, // 用來格式化圖例文字，也可以使用字串模板
        selectedMode: true, // 圖例選擇的模式, 預設為 true 表示可選擇
        inactiveColor: '#989796', // 圖例關閉時的顏色
        selected: {aaa: true, ccc: true}, // 圖例選中狀態表
        textStyle: {}, // 圖例公用文字樣式
        tooltip: { // 圖例的 tooltip 配置
            show: true
        },
        /*
            圖例資料陣列，每一項代表一個系列的 name ,
            圖例會根據對應系列的圖形標記繪製自己的顏色和標記，
            如果沒有指定 data 會自動從當前系列中獲取 series.name 等指定的緯度，
            可以將每一項寫成物件，來配置樣式
        */ 
        // data: ['xxx', 'aaa'],
        borderWidth: 1,
        borderColor: '#333',
        pageButtonItemGap: 3, 
    },

3. grid 直角座標系內繪圖網格元件

    grid: {
        show: true, // 是否顯示
        left: '5%', // 元件位置 left|top|right|bottom
        width: 'auto', // 設定寬高 width|height
        containLabel: true, // 計算寬高時是否包含了所有標籤，用於防止溢位
        backgroundColor: 'rgba(128, 128, 128, 0.5)',
        tooltip: { // 本座標系特定的 tooltip 設定
            trigger: 'axis' // 設定觸發型別 
        }
    },

4. xAxis yAxis 直角座標系 grid 中的 X 軸 Y 軸

    xAxis: {
        show: true, // 是否顯示
        position: 'bottom', // x 軸的位置
        offset: 0, // x 軸相對預設位置的偏移
        type: 'value', // 座標軸型別 value數值型|category類目軸|time時間軸|log對數軸
        name: 'x 軸', // 座標軸名稱
        nameLocation: 'end', // 座標軸顯示位置
        nameTextStyle: { // 座標軸文字顏色
            color: '#425aaa'
        },
        nameGap: 5, // 座標軸名稱與軸線之間的距離
        nameRotate: -30, // 座標軸名字旋轉角度
        inverse: false, // 是否是反向座標軸
        boundaryGap: true, // 邊界留白 類目軸為 boolean,非類目軸為 一個數組，記載最大值，最小值延伸範圍
        // min: 1, // 座標軸刻度最小值 ’dataMin‘表示資料在該軸上的最小值，類目軸中可以設定類目序數，也可以是一個函式
        // max: 'dataMax', // 同上
        scale: true, // 只在數值軸中有效，設定為 true 後不會強制包含零刻度，設定 min max 後無效
        splitNumber: 5, // 座標軸分割段數的預估值，實際顯示的會有調整。類目軸無效
        minInterval: 5, // 自動計算座標軸的最小間隔大小
        silent: false, // 座標軸是否是靜態的無法互動
        triggerEvent: true, // 座標軸的標籤是否響應和觸發滑鼠事件，預設不響應
        axisLine: { // 座標軸軸線相關配置
            show: true,
            onZero: true, // 是否相交另一個軸與 0 刻度
            symbol: ['none', 'arrow'], // 軸線兩邊箭頭
            symbolSize: 10, // 軸線箭頭大小
            lineStyle: { // 軸線的樣式
                color: 'red'
            }
        },
        axisTick: { // 座標軸刻度相關設定
            show: true,
            alignWithLabel: true, // 保證刻度線和標籤對其
            inside: true, // 設定座標軸刻度朝向
            length: 10, // 設定刻度長度
            lineStyle: {} // 刻度線樣式
        },
        axisLabel: { // 座標軸刻度標籤相關設定
            show: true,
            inside: true, // 設定標籤朝向
            rotate: -30, // 旋轉
            margin: 8, // 與軸線間距
            formatter: '{value} kk', // 內容格式容器
            color: 'blue',
            align: 'center'
        },
        splitLine: { // grid 分割線設定
            show: true, 
            lineStyle: {
                color: 'green'
            }
        },
        splitArea: { // grid 分割區域
            show: true,
            areaStyle: {}
        },
        /*
            data 類目資料
        */
        // data: [23.4, 25.4, 32, 33.4, 38.4, 40, 42] 
    },

5. polar 極座標系

   polar: { // 極座標系，可以用於散點圖和折線圖，每個極座標系有一個角度軸和一個半徑軸
        center: ['50%', '50%'], // 中心點在例項中的位置
        radius: '90%', // 極座標系半徑
        tooltip: { // 提示線
            trigger: 'axis'
        }
    },

6. radiusAxis 極座標系徑向軸

配置與直角座標系橫豎軸一致

   radiusAxis: { // 極座標系的徑向軸， 配置與直角座標系基本一致
        type: 'category', // 座標軸型別 型別與直角座標系一致
        name: '座標軸名稱',
        nameLocation: 'end', // 位置
        nameTextStyle: { // 樣式
            color: 'red'
        },
        nameGap: 20, // 與軸線間距
        namRotate: 0, // 旋轉
        boundaryGap: true, // 留白
        axisLine: {
            lineStyle: {
                color: '#999',
                type: 'dashed'
            } 
        },
        axisTick: {
            alignWithLabel: true,
            lineStyle: {
                color: '#333'
            }
        },
        axisLabel: {
            rotate: 30,
            fontSize: 10,
        },
        splitLine: {
            show: false,
        },
      data: days
   },

7. angleAxis 極座標系的角度軸

配置與直角座標系座標軸有很多類似

   angleAxis: {
      type: 'category', // 座標軸型別
      polarIndex: 0, // 角度軸所在的極座標系索引，預設使用第一個極座標系
      startAngle: 60, // 起始刻度的角度，預設 90 度 
      clockwise: false, // 是否順時針增長刻度
      data: hours,
      boundaryGap: false, // 留白
      axisLine: {
         lineStyle: {
            color: '#999',
            type: 'dashed'
         }
      },
      axisTick: {
         show: false
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: ['#aaa', '#ddd'],
            type: 'dashed'
         }
      }
   },

8. radar 雷達圖元件

   radar: {
      indicator: [ // 雷達圖的指示器，用來指定雷達圖中的多個變數（維度）
         {name: '指示器 1', max: 7777}, // name 標籤名
         {name: '指示器 2', max: 666, color: '#592dab'}, // color 設定標籤顏色
         {name: '指示器 3', max: 3231}, // max,min 最大最小值
         {name: '指示器 4', max: 2432},
         {name: '指示器 5', max: 2424},
         {name: '指示器 6', max: 2323},
      ],
      center: ['50%', '50%'], // 圓心位置
      radius: '70%', // 半徑
      startAngle: 15, // 座標系起始角度
      name: { // 雷達圖每個指示器名稱的配置項
         show: true, 
         formatter: '/{value}/', // 格式器
         color: '#662762'
      },
      nameGap: 20, // 指示器名稱與軸的間距
      splitNumber: 10, // 指示器軸的分割段數
      shape: 'circle', // 雷達圖形狀 polygon|circle
      axisLine: {
         show: true, 
         symbol: ['none', 'arrow'],
         lineStyle: {
            color: '#aaa'
         }
      },
   },
   series: [{
      name: 'test anme',
      type: 'radar',
      data: [
         {name: 'data one', value: [1000, 666, 321, 2432, 2424, 223]},
         {name: 'data two', value: [73, 346, 1231, 1432, 2224, 23]},
         {name: 'data three', value: [999, 666, 2231, 2132, 424, 1323]}
      ]
   }]

9. dataZoom 區域縮放元件

用來概覽資料整體，關注資料細節，有三種類型

1. 內建型，內置於座標系中，使用者在座標系中通過滑鼠拖拽來縮放
2. 滑動條型，有單獨的滑動條，在滑動條上進行縮放
3. 框選型， 提供選框進行資料縮放

dataZoom 元件主要是對數軸進行操作，同時存在多個 dataZoom 元件控制同一個數軸，他們會自動聯動

   dataZoom: [
      {
         type: 'slider', // 縮放元件型別
         show: true,
         dataBackground: { // 資料陰影的樣式 
            lineStyle: {
               color: 'red'
            },
            areaStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: 'red' // 0% 處的顏色
                     },
                     {
                        offset: 1,
                        color: 'blue' // 100% 處的顏色
                     }
                  ],
                  globalCoord: false // 預設為 false
               }
            }
         },
         fillerColor: 'rgba(2, 35, 220, .3)', // 選中範圍的填充顏色
         borderColor: '#6a45e2', // 邊框顏色
         // handleIcon: '', // 可以設定成圖片
         handleStyle: { // 手柄的樣式設定
            color: '#892e8a'
         },
         labelPrecision: 'auto', // 顯示 label 的小數精度，預設根據資料自動決定
         labelFormatter: 'p{value}p', // 顯示 label 的格式化器
         showDetail: true, // 是否在拖拽時顯示 label
         showDataShadow: 'auto', // 是否顯示資料陰影
         realtime: false, // 是否是實時重新整理，設定 false 表示拖拽結束時更新
         textStyle: { // 文字顏色
            color: 'red'
         },
         xAxisIndex: [0], // 設定當前區域縮放元件控制的 x軸，可以控制多個
         // yAxisIndex: [0], // 設定當前區域縮放元件控制的 y軸，可以控制多個
         filterMode: 'weakFilter', // 設定資料過濾模式
         start: 10, // start|end 資料縮放範圍百分比
         end: 50, // startValue|endValue 資料視窗範圍的具體數值
         minSpan: 30, // 資料視窗的最小百分比
         maxSpan: 70, // 資料視窗的最大百分比
         origin: 'horizontal', // 佈局方向
         zoomLock: true, // 是否鎖定選擇區域大小
         throttle: 200, // 節流設定，設定檢視重新整理頻率
         left: 'center', // left\top\right\bottom 定位
      },
      {
         type: 'inside', // 引數與 slider 型別類似
         disabled: false, // 是否禁用
         xAxisIndex: [0], // 顯式的指定控制的 x 軸
         filterMode: 'weakFilter', // 設定過濾模式
      }
   ],

10. visualMap 視覺對映元件，也就是將資料對映到視覺元素

以下是可對映的視覺元素

• symbol: 圖形形狀
• symbolSize: 圖形大小
• color: 圖形顏色
• colorAlpha: 顏色透明度
• opacity: 透明度
• colorLightness: 顏色的明暗度， // 以下三個對應 HSL y顏色表示法
• colorSaturation: 顏色的飽和度
• colorHue: 顏色的色調

元件可以定義多個，從而可以同時對資料中的多個維度進行視覺對映，元件可以定義為分段型或連續型，通過 type 來區分

{
         type: 'continuous', // 視覺對映的型別
         min: 0, // min|max 指定視覺對映的定義域
         max: 2500,
         range: [0, 2500], // 設定顯示範圍，預設 [min, max]
         calculable: true, // 是否顯示可選定範圍的手柄
         realtime: true, // 是否實時重新整理檢視
         inverse: true, // 是否反轉元件
         precision: 1, // 資料展示的精度，小數點後幾位
         itemWidth: 20, // itemWidth|itemHeight 元件圖形的寬高
         align: 'auto', // 指定元件中手柄和文字的擺放位置
         text: ['High', 'Low'], // 元件兩端文字
         textGap: 20, // 文字與元件間距
         show: true, // 元件是否顯示，即使不顯示，圖表視覺對映效果依然存在
         dimension: 1, // 指定資料的那個維度對映到視覺元素上
         seriesIndex: 0, // 對應某個 series.data 。指定對映的資料來源
         hoverLink: true, // 高亮
         inRange: { // 定義選中範圍的視覺元素
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
         },
         outOfRange: { // 定義選定範圍之外的視覺元素
            color: 'yellow'
         },
         controller: { // 控制器的 inRange|outOfRange 設定
            inRange: {},
            outOfRange: {}
         },
         orient: 'vertical', // 如何放置 visualMap 元件
         formatter: '{value}', // 標籤格式化
      },
            {
         type: 'piecewise', // 分段式對映元件
         splitNumber: 5, // 分段
         // pieces: [ // 分段元件每一段的範圍，以及樣式
         //    {min: 2500},
         //    {min: 1000, max: 2500},
         //    {min:  500, max: 1000},
         //    {min: 200, max: 500},
         //    {max: 200},
         // ],
         // categories: [], 離散型資料不用 pieces 用這個定義
         min: 0,
         max: 2500,
         precision: 0,
         selectedMode: 'multiple', // 選擇模式
         minOpen: true, // minOpen|maxOpen 設定會多出超出邊界值選塊
         maxOpen: true,
         inverse: true, // 反轉
         itemWidth: 23, // itemWidth|itemHeight 設定圖形寬高
         align: 'left', 
         text: ['H', 'L'], // 兩端文字，設定後不顯示 label
         // 其他與 連續型元件配置相似
      }

11. tooltip 提示框元件

提示框元件可以設定在多種地方

• 全域性設定 tooltip
• 設定在座標系中 grid.tooltip polar.tooltip single.tooltip
• 設定在系列中 series.tooltip
• 設定在系列的資料項中 series.data.tooltip

   tooltip: {
      show: true,
      trigger: 'axis', // 觸發型別
      axisPointer: { // 座標軸指示器配置項，指示座標軸當前刻度的指示器， 優先順序低於在座標軸元件上的同名定義項
         type: 'cross',
         snap: true,
      },
      showContent: true, // 是否顯示提示框浮層
      // alwaysShowContent: false, // 焦點移出觸發提示框區域後，是否還顯示提示框
      triggerOn: 'mousemove|click', // 提示框觸發條件
      showDelay: 0, // 浮層顯示的延遲
      hideDelay: 100, // 浮層隱藏的延遲
      enterable: false, // 滑鼠是否可以進入浮層, 得配合其他屬性使用
      confine: true, // 是否把提示框限制在圖表區域內
      transitionDuration: 1, // 提示框跟隨滑鼠移動動畫時長
      // position: 'right', // 提示框浮層的位置，預設不設定會跟隨滑鼠的位置
      formatter: '{a}-{b}-{c}', // 浮層內容格式器
      textStyle: { // 浮層文字樣式
         color: 'red'
      },
      extraCssText: '', // 額外附加到圖層的 css 樣式
   },

12. axisPointer 座標軸指示器元件

• 直角座標系 grid、極座標系polar、單軸座標系 single 中的每個軸都由自己的 axisPointer

   axisPointer: {
      show: true,
      type: 'line', // 指示器型別
      snap: true, // 指示器是否自動吸附到點上
      label: { // 座標軸指示器的文字報標籤
         show: true,
         precision: 0, // 標籤中數值的精度
         formatter: '-{value}-', // 格式器
         margin: 10, // label 與軸距離
         textStyle: { // 不好使
            color: '#666', 
         },
         // padding: 5, // label 內邊距
      },
      lineStyle: { // type: line
         color: '#836521',
         type: 'dashed'
      },
      shadowStyle: {}, // type: shadow
      triggerTooltip: true, // 是否觸發 tooltip
      value: null, // 使用 handle 時的初始值設定
      status: 'hide', // 當前狀態
      handle: { // 拖拽手柄，適用於觸屏
         show: true, 
         // icon: 'image://url', // 手柄圖示
         size: 20, 
         margin: 70, // 手柄與軸間距
         color: '#256392', 
         throttle: 40, // 節流更新頻率
      },
      link: [], // 聯動設定
      triggerOn: 'click', // 提示框觸發條件
   },

13. toolbox 工具欄外掛

   toolbox: {
      show: true,
      orient: 'vertical', // 方向
      itemSize: 15, // icon 大小
      itemGap: 10, // icon 間隔
      showTitle: true,
      feature: {
         saveAsImage: {
            type: 'svg',
            name: 'test', 
            excludeComponents: ['toolbox', 'legend'], // 忽略的元件
            show: true,
            title: '儲存圖片',
            // icon: '' // icon 的 svgPath
            iconStyle: {
               color: '#41390d'
            },
            emphasis: {
               iconStyle: {
                  color: '#9976ad'
               }
            },
            pixelRatio: 2, // 儲存的圖片的解析度
         },
         restore: { // 配置項還原
            show: true,
         },
         dataView: {
            show: true,
            readOnly: false, // 是否是隻讀的
            optionToContent: function (opt) { // 定製化展示樣式
               let axisData = opt.xAxis[0].data;
               let series = opt.series;
               let table = `<table style="width:100%;text-align:center"><tbody><tr>
                            <td>時間</td>
                            <td> ${series[0].name} </td>
                            </tr>`;
               for (let i = 0, l = axisData.length; i < l; i++) {
                   table += `<tr>
                            <td> ${axisData[i]} </td>
                            <td> ${series[0].data[i]} </td>
                            </tr>`;
               }
               table += '</tbody></table>';
               return table;
            },
         },
         dataZoom: { // 資料區域縮放
            show: true,
            xAxisIndex: [0], // xAxisIndex|yAxisIndex 指定被控制的 x,y 軸
         },
         magicType: { // 動態型別切換
            show: true,
            type: ['line', 'bar'],
            option: { // 對應 type 中的各個型別的配置項
               line: {}, 
            },
            seriesIndex: { // 各個型別對應的系列
               line: [0]
            }
         },
         brush: { // 選框元件的控制按鈕， 也可以在 brush.toolbox 中設定
            type: ['rect', 'polygon']
         }
      },
      iconStyle: {
         color: '#61259d'
      }
   },

14. brush 區域選擇元件

   brush: {
      toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
      brushLink: null, // 聯動選項
      seriesIndex: 'all', // 指定可以被篩選的系列
      brushType: 'lineX', // 預設刷子型別
      brushMode: 'multiple', // 預設刷子模式
      transformable: true, // 已經選好的選框是否可以被調整形狀或平移。
      brushStyle: {}, // 選框預設樣式
      throttleType: 'debounce', // 節流的型別
      throttleDelay: 0, // 節流的時間
      inBrush: {}, // 選中範圍的視覺元素
      outOfBrush: {}, // 選中範圍外的視覺元素 
   },

15. geo 地理座標系元件

   geo: {
      show: true, 
      map: 'china', // 地圖型別, 地圖資料需要另外引入，在 'echarts/map/js/china' 中
      roam: true, // 滑鼠縮放和平移漫遊 scale|move|true(都開啟)
      center: [115.97, 29.71], // 當前視角的中心點
      aspectScale: 0.75, // 設定地圖長寬比
      boundingCoords: null, // 定義左上角右下角經緯度
      zoom: 1.5, // 當前視角的縮放比例
      scaleLimit: {min: 0.6, max: 1.7}, // 縮放比例限制
      nameMap: {'China': '中國'}, // 自定義區域名稱對映
      selectedMode: true, // 是否支援多選
      label: { // 圖形上的文字標籤，說明圖形上的一些資料
         show: true,
         position: 'top', // 標籤位置
         distance: 20, // 距離圖形元素的距離
         rotate: -30, // 標籤旋轉
         offset: [100, 100], // 是否對文字進行偏移
         formatter: '{b}：{@score}', // 內容格式器
      },
      itemStyle: { // 地圖區域多邊形樣式
         areaColor: '#323c48',
         borderColor: '#111'
      },
      emphasis: { // 高亮狀態下的多邊形和標籤樣式。
         itemStyle: {
            areaColor: '#2a333d'
         }
      },
      regions: [ // 在地圖中對特定的區域配置樣式。
         {name: '廣東', itemStyle: {areaColor: 'red', color: 'red'}}
      ],
      silent: false, // 是否不響應和觸發滑鼠事件
   },

16. parallel 平行座標系

平行座標系適用於對這種多維資料進行視覺化分析，每一個維度對應一個座標軸，每一個數據項是一條線，貫穿多個座標軸，在座標軸上可以進行資料選取等操作

   parallel: {
      left: '5%', // left|top|right|bottom 定義元件容器大小
      right: '13%',
      bottom: '10%',
      top: '20%',
      layout: 'horizontal', // 佈局方向
      axisExpandable: true, // 座標軸可擴充套件，用於維度較多的情況
      axisExpandCenter: 3, // 初始時，以哪個軸為展開中心
      axisExpandCount: 6, // 初始時處於展開狀態的軸的數量
      axisExpandWidth: 60, // 展開軸的間距
      axisExpandTriggerOn: 'mousemove', // 觸發展開的操作
      parallelAxisDefault: { // 多個座標軸的一些預設配置項，即 parallelAxis 中每項配置
          type: 'value', // 座標軸型別
          name: 'AQI指數', // 座標軸名稱
          nameLocation: 'end', // 名稱顯示位置
          nameGap: 20, // 名稱與軸線間距
          nameTextStyle: { // 名稱樣式
              fontSize: 12
          },
          nameRotate: 15, // 角度
          inverse: false, // 反向
          boundaryGap: false, // 留白
          // min: 'dataMin', // 最小刻度
          // max: 'dataMax', // 最大值
          scale: 
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
ECharts 圖表外掛使用整理（圖表配置實現）
     
 
							
							
							ECharts 圖表外掛使用整理



說明


  ECharts 是一個 JavaScript 實現的開源視覺化庫，相容當前絕大部分瀏覽器 IE 8 以上，是一個可高度個性化定製的資料視覺化圖表
  
  ECharts 版本 –> 4.0.2
  
 

  
 

    

    
    
Echarts 圖表外掛學習（3）-- 給柱形圖的每個柱子設定不同顏色
     
 
                1.實現的效果



2.引用Echarts

本地：<script src="../lib-v3/echarts/echarts.min.js"></script>

線上：<script src="http://echarts.baidu.c 

  
 

    

    
    
Tableau圖表 • 子彈圖（標靶圖）
     
  
 
   
 子彈圖，又名標靶圖，實際上是條形圖的一種變形，是在條形圖基礎上新增參考線和參考區間，幫助使用者直觀瞭解兩個度量之間的關係，常用來比較目標值和實際值。 
  
  
   
   
    圖：子彈圖示例(圖片來源於網路)
   
  
  
   
 這裡以tableau 

  
 

    

    
    
idea常用外掛整理（自用）
     
  
  
  
 
 
  idea外掛
  
   
    1.Rainbow Brackets (彩虹括號)
    2.GenerateAllSetter(生成物件的所有set方法)
    3.Alibaba Java Coding Guidelines（阿里巴巴的程式碼檢查規範）
    4.My 

  
 

    

    
    
spring之AOP操作（基於aspectJ實現）--配置檔案和註解兩種方式實現
     
 AOP概念 
　　1 aop：面向切面（方面）程式設計，擴充套件功能不修改原始碼實現 
  
　　2  AOP採取橫向抽取機制，取代了傳統縱向繼承體系重複性程式碼 
  
　　3 aop底層使用動態代理實現 
　　　　（1）第一種情況，有介面情況，使用動態代理建立介面實現類代理物 

  
 

    

    
    
jdbc Template多資料來源配置（Spring boot 實現）
     
 
								
								            
							
							
							由於JdbcTemplate  的bean主要依賴項為一個DataSource 物件， 所以，可以在建立的dataSource 物件時進行自定義，並注入到對應的JdbcTemplate  中 ，實現多資 

  
 

    

    
    
vue專案中最近使用的外掛整理---（一）
     
 
                 最近使用vue的腳手架開發專案，用了一些小外掛來實現一些功能，自己覺得應該要整理一下，方便自己之後的開發。一、複製外掛--  vue-clipboard2    此外掛的功能就是實現文字的複製，使用步驟如下：    1.安裝 npm install --save vue-c 

  
 

    

    
    
AccessibilityService2016終極解決方案包括（微信搶紅包外掛原理解析和開發實現）
     
 
                

一、前言

自從去年中微信新增搶紅包的功能，微信的電商之旅算是正式開始正式火爆起來。但是作為Android開發者來說，我們在搶紅包的同時意識到了很多問題，就是手動去搶紅包的速度慢了，當然這些有很多原因導致了。或許是網路的原因，而且這個也是最大的原因。但是其他的不可忽略的因 

  
 

    

    
    
SpringBoot整合JmsTemplate(佇列模式和主題模式)（xml和JavaConfig配置實現）
     
 
                1.匯入jar包：

    <!--jmsTemplate-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
    

  
 

    

    
    
（一）如何使用Spring-security來實現登入驗證功能（XML配置方式）？
     
 
								
								            
							
							
							先從使用xml的方式來實現使用者的許可權登入

（1）需要在maven工程中加上關於spring-secutity的jar包的依賴



//spring-securityd 有關的依賴
    < 

  
 

    

    
    
完成Ubuntu桌面版的Apache+php+mysql（手動配置LAMP）的全過程及實現細節
     
 
                
   最近一個周基本完成了linux系統中LAMP的手動配置，總結一下這個配置過程，方便以後參考。
     安裝完桌面版的ubuntu系統，關於時區設定和作業系統中文支援等實現部分在設定裡面都可以完成，就不加闡述。
     首先，我的Ubuntu是在虛擬機器裡執行的，這 

  
 

    

    
    
資料庫連線的兩種實現方式（讀取配置檔案）——DBCP&C3P0；DBCP實現連線程式碼，C3P0實現連線程式碼——包含完整程式碼
     
 
                

兩種資料庫連線實現方式

第一種方式：DBCP
DBCP使用流程


導jar包使用DBCP建立資料庫連線物件
DataSource ds=BasicDataSourceFactory.createDatasource("一個儲存連線資訊的properties集合");使 

  
 

    

    
    
javascript基礎知識整理（不定時更新）
     
 nsh   firefox   可用   splice   mage   true   size   -1   對數    
1.js中真與假的定義：
　　真：true，非零數字，非空字符串，非空對象
　　假：false，數字零，空字符串，空對象（null），undefined
2.使用for循環對json進 

  
 

    

    
    
二十四進制編碼串轉換為32位無符號整數（C語言實現）
     
 bool   while   open   參數錯誤   hint   div   第一個字符   bsp   opened   

typedef int BOOL;
#define TRUE  1;
#define FALSE 0;

#define UINT_MAX      0xffffffff    

  
 

    

    
    
UEditor上傳圖片到七牛C#（後端實現）
     
 nco   nag   manage   ora   個人   finall   code   七牛存儲   json   由於個人網站空間存儲有所以選擇將圖片統一存儲到七牛上，理由很簡單
 1  免費10G 的容量  ，對個人網站足夠用
 2  規範的開發者文檔 和完善的sdk（幾乎所有熱門語言sdk）
  

  
 

    

    
    
算法整理（php語言完成），持續更行中......
     
 ==   排序   pre   cnblogs   部分   兩個   div   function   col   一下所有實例中，均在同一個方法中，所以算法使用內部函數完成

歸並排序


 1 public function test1Action () {
 2     $tmp = 0;
 3    

  
 

    

    
    
day1作業二：多級菜單操作（函數實現）
     
 數據庫   語句   會有   是否   臺灣   inpu   return   .com   {}   作業二：多級菜單
（1）三級菜單
（2）可以次選擇進入各子菜單
（3）所需新知識點：列表、字典
要求：輸入back返回上一層，輸入quit退出整個程序
本示例的三級菜單是一個yaml文件格式，格式如下： 

  
 

    

    
    
IOS 自定義按鈕（代碼實現）＋九宮格
     
 uifont   排列   end   uiview   height   iyu   void   rec   name    在一些下載應用裏整個頁面都是按鈕，有好多好多，但是仔細觀察不難發現他們很有規律。就像下面一樣??

很有規律的排列在屏幕上，那麽這需要我們怎麽去做能。
正如標題，我們需要了解兩個知 

  
 

    

    
    
深思 PHP 數組遍歷的差異（array_diff 的實現）
     
 函數   沒有   但是   iss   組織   func   找到   china   速度   function array_diff($array_1, $array_2) {     $diff = array();     foreach ($array_1 as $k => $v1) {  

  
 

    

    
    
堆排序（C語言實現）
     
 names   博客   鏈接   c語言實現   建立   ron   要求   clas   [1]   

            之前的博客介紹介紹了數組的兩種排序算法：插入排序和歸並排序(採用遞歸)，見鏈接http://blog.csdn.net/u013165521/article/detai