ECharts

時間  2019-11-30
標籤 echarts 简体版
原文   原文鏈接

 繪製一個簡單的圖表

　　在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。javascript

<body>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

　　而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖。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>

 

 自定義構建 ECharts

　　構建好的 echarts 提供了下面這幾種定製：java

  • 徹底版：echarts/dist/echarts.js，體積最大，包含全部的圖表和組件。數據庫

  • 經常使用版：echarts/dist/echarts.common.js，體積適中，包含常見的圖表和組件。json

  • 精簡版：echarts/dist/echarts.simple.js，體積較小，僅包含最經常使用的圖表和組件。數組

　　若是對文件體積有更嚴苛的要求，能夠本身構建 echarts或者按需引入須要的模塊，可以只包括本身須要的圖表和組件。性能優化

 

 ECharts 由數據驅動，數據的改變驅動圖表展示的改變。下面咱們從圖表樣式和圖表數據兩方面來學習ECharts：echarts

 1、圖表樣式

　　餅圖主要是經過扇形的弧度表現不一樣類目的數據在總和中的佔比，它的數據格式比柱狀圖更簡單，只有一維的數值，不須要給類目。由於不在直角座標系上，因此也不須要xAxis，yAxis。dom

myChart.setOption({
    series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'視頻廣告'},
                {value:274, name:'聯盟廣告'},
                {value:310, name:'郵件營銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
})

　　ECharts 中的數據項都是既能夠只設成數值，也能夠設成一個包含有名稱、該數據圖形的樣式配置、標籤配置的對象異步

　　ECharts 中的餅圖也支持經過設置 roseType 顯示成南丁格爾圖。南丁格爾圖會經過半徑表示數據的大小。

roseType: 'angle'

           

 1.陰影的配置

　　ECharts 有一些通用的樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等，這些樣式通常都會在itemStyle裏設置。

itemStyle: {
    // 陰影的大小
    shadowBlur: 200,
    // 陰影水平方向上的偏移
    shadowOffsetX: 0,
    // 陰影垂直方向上的偏移
    shadowOffsetY: 0,
    // 陰影顏色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

　　itemStyle 的 emphasis 是鼠標 hover 時候的高亮樣式。這個示例裏是正常的樣式下加陰影，可是可能更多的時候是 hover 的時候經過陰影突出。

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

 2.深色背景和淺色標籤

　　能夠在 option 下直接設置 backgroundColor（全局背景色），textStyle（全局文本樣式）

　　也能夠每一個系列分別設置，每一個系列的設置爲 label.backgroundColor，label.textStyle。

　　餅圖的話還要將標籤的視覺引導線的顏色設爲淺色。

labelLine: {
    lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
}

　　還能夠經過visualMap 組件 指定數據到顏色、圖形尺寸的映射規則。

 3.直接的樣式設置 itemStyle, lineStyle, areaStyle, label

option = {
    series: {
        type: 'scatter',
​
        // 普通樣式。
        itemStyle: {
            // 點的顏色。
            color: 'red'
        },
        label: {
            show: true,
            // 標籤的文字。
            formatter: 'This is a normal label.'
        },
​
        // 高亮樣式。
        emphasis: {
            itemStyle: {
                // 高亮時點的顏色。
                color: 'blue'
            },
            label: {
                show: true,
                // 高亮時標籤的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

 

2、圖表數據

 1.異步數據加載和更新

    1.1. 異步加載

　　ECharts 中實現異步數據的更新：在圖表初始化後，經過 jQuery 等工具異步獲取數據後，經過 setOption 填入數據和配置項就行。

var myChart = echarts.init(document.getElementById('main'));
​
$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '異步數據加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

　　或者先設置完其它的樣式，顯示一個空的直角座標軸，而後獲取數據後填入數據。

var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的座標軸
myChart.setOption({
    title: {
        text: '異步數據加載示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: []
    }]
});
​
// 異步加載數據
$.get('data.json').done(function (data) {
    // 填入數據
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根據名字對應到相應的系列
            name: '銷量',
            data: data.data
        }]
    });
});

    1.2. loading 動畫

　　若是數據加載時間較長，須要一個 loading 的動畫來提示用戶數據正在加載。

　　ECharts 默認提供了一個簡單的加載動畫。只須要調用 showLoading 方法顯示。數據加載完成後再調用 hideLoading方法隱藏加載動畫。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

    1.3. 數據的動態更新

　　ECharts 由數據驅動，數據的改變驅動圖表展示的改變，所以動態數據的實現也變得異常簡單。

　　全部數據的更新都經過 setOption實現，你只須要定時獲取數據，setOption 填入數據，而不用考慮數據到底產生了那些變化，ECharts 會找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化。

 

2. 數據管理和數據映射

  2.1. 數據管理

    2.1.1 使用 dataset 管理數據

　　ECharts 4 之前，數據只能聲明在各個"系列（series）"中，ECharts 4 開始支持了 dataset 組件用於單獨的數據集聲明，從而數據能夠單獨管理，被多個組件複用，同時支持更多的數據的經常使用格式，而且能夠基於數據指定數據到視覺的映射。

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 提供一份數據。
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    // 聲明一個 X 軸，類目軸（category）。默認狀況下，類目軸對應到 dataset 第一列。
    xAxis: {type: 'category'},
    // 聲明一個 Y 軸，數值軸。
    yAxis: {},
    // 聲明多個 bar 系列，默認狀況下，每一個系列會自動對應到 dataset 的每一列。
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

　　或者也可使用常見的對象數組的格式：

option = {
    legend: {},
    tooltip: {},
    dataset: {
        // 這裏指定了維度名的順序，從而能夠利用默認的維度到座標軸的映射。
        // 若是不指定 dimensions，也能夠經過指定 series.encode 完成映射，參見後文。
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

    2.1.2 多個 dataset 和他們的引用

　　能夠同時定義多個 dataset。系列能夠經過 series.datasetIndex 來指定引用哪一個 dataset。例如：

var option = {
    dataset: [{
        // 序號爲 0 的 dataset。
        source: [...],
    }, {
        // 序號爲 1 的 dataset。
        source: [...]
    }, {
        // 序號爲 2 的 dataset。
        source: [...]
    }],
    series: [{
        // 使用序號爲 2 的 dataset。
        datasetIndex: 2
    }, {
        // 使用序號爲 1 的 dataset。
        datasetIndex: 1
    }]
}

 

  2.2. 數據映射

    2.2.1 按行仍是按列作映射

　　用戶可使用 seriesLayoutBy 配置項，改變圖表對於行列的理解。seriesLayoutBy 可取值：

  • 'column': 默認值。系列被安放到 dataset 的列上面。

  • 'row': 系列被安放到 dataset 的行上面。

option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // 這幾個系列會在第一個直角座標系中，每一個系列對應到 dataset 的每一行。
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // 這幾個系列會在第二個直角座標系中，每一個系列對應到 dataset 的每一列。
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
}

    2.2.2 維度映射

　　維度能夠有單獨的名字，便於在圖表中顯示。維度名能夠在定義在 dataset 的第一行（或者第一列）。從第二行開始，纔是正式的數據。

var option1 = {
    dataset: {
        dimensions: [
            {name: 'score'},
            // 能夠簡寫爲 string，表示維度名。
            'amount',
            // 能夠在 type 中指定維度類型。
            {name: 'product', type: 'ordinal'}
        ],
        source: [...]
    },
    ...
};
​
var option2 = {
    dataset: {
        source: [...]
    },
    series: {
        type: 'line',
        // 在系列中設置的 dimensions 會更優先採納。
        dimensions: [
            null, // 能夠設置爲 null 表示不想設置維度名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};

　　維度類型能夠取這些值：

  • 'number': 默認，表示普通數據。

  • 'ordinal': 對於類目、文本這些 string 類型的數據，若是須要能在數軸上使用，須是 'ordinal' 類型。ECharts 默認會自動判斷這個類型。可是自動判斷也是不可能很完備的，因此使用者也能夠手動強制指定。

  • 'time': 表示時間數據。設置成 'time' 則能支持自動解析數據成時間戳（timestamp），好比該維度的數據是 '2017-05-10'，會自動被解析。若是這個維度被用在時間數軸（axis.type 爲 'time'）上，那麼會被自動設置爲 'time' 類型。

  • 'float': 若是設置成 'float'，在存儲時候會使用 TypedArray，對性能優化有好處。

  • 'int': 若是設置成 'int'，在存儲時候會使用 TypedArray，對性能優化有好處。

    2.2.3 數據到圖形默認的映射

　　ECharts 針對最多見直角座標系中的圖表（折線圖、柱狀圖、散點圖、K線圖等）、餅圖、漏斗圖，給出了簡單的默認的映射，從而不須要配置 encode 也能夠出現圖表。

　　默認的映射規基本規則是：

  • 在座標系中（如直角座標系、極座標系等）

    • 若是有類目軸（axis.type 爲 'category'），則將第一列（行）映射到這個軸上，後續每一列（行）對應一個系列。

    • 若是沒有類目軸，假如座標系有兩個軸（例如直角座標系的 X Y 軸），則每兩列對應一個系列，這兩列分別映射到這兩個軸上。

  • 若是沒有座標系（如餅圖）

    • 取第一列（行）爲名字，第二列（行）爲數值（若是隻有一列，則取第一列爲數值）。

    數據的各類格式

　　多數常見圖表中，數據適用於二維表的形式描述。廣爲使用的數據表格軟件（如 MS Excel、Numbers）或者關係數據數據庫都是二維表。他們的數據能夠導出成 JSON 格式，輸入到 dataset.source 中，能夠免去一些數據處理的步驟。

　　假如數據導出成 csv 文件，那麼可使用一些 csv 工具如 dsv 或者 PapaParse 將 csv 轉成 JSON。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程