ECHART基本使用，折線圖，柱狀圖，散點圖，餅圖，盒形圖5分鐘上手

阿新 • • 發佈：2019-01-18

Echarts 是由百度團隊打造的純 JavaScript 的圖表庫，官網下載路徑如下：

Echarts的特性：

豐富的圖表型別：
常用的有折線圖，柱狀圖，散點圖，餅圖，盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖等

多個座標系的支援
直角座標系（catesian，同 grid）、極座標系（polar）、地理座標系（geo）

使用Echarts：
1、引入echarts.min.js

這裡<!DOCTYPE html>
<html>
<header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 檔案寫程式碼片 --> 

    <script src="echarts.min.js"></script>
</header>
</html>

2、定義一個div容器，用於存放你的圖表，要設定ID。

<div id="main" style="width: 600px;height:400px;"></div>

3、初始化echarts例項

var myChart=echarts.init(document.getElementById('main'));

4、指定圖表的配置項和資料，即設定option
a)title:標題元件
b)tooltip:提示框元件
c)legend：圖例元件，展現了不同系列的標記(symbol)，顏色和名字
d)xAxis：直角座標系 grid 中的 x 軸，單個 grid 元件最多隻能放上下兩個 x 軸。
e)yAxis:直角座標系 grid 中的 y 軸，單個 grid 元件最多隻能放左右兩個 y 軸。
f)series:系列列表。每個系列通過 type 決定自己的圖表型別。
series[i]-line ——-折線圖
series[i]-bar ——-柱狀圖
series[i]-pie ——-餅圖
series[i]-scatter—–散點圖
series[i]-effectScatter—-帶有漣漪特效動畫的散點（氣泡）圖
series[i]-radar——雷達圖
series[i]-treemap—Treemap 是一種常見的表達『層級資料』『樹狀資料』的視覺化形式。
series[i]-boxplot—-Boxplot 中文可以稱為『箱形圖』、『盒須圖』、『盒式圖』、『盒狀圖』、『箱線圖』
series[i]-candlestick —Candlestick 即我們常說的 K線圖
series[i]-heatmap—–熱力圖
series[i]-map—-地圖主要用於地理區域資料的視覺化，配合 visualMap 元件用於展示不同區域的人口分佈密度等資料。
series[i]-parallel—–平行座標系的系列。
series[i]-lines——–線圖
series[i]-graph——-關係圖
series[i]-gauge——-儀表盤

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/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: [30, 20, 36, 10, 10, 20]
        }]
    };

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

5、使用指定的配置項和資料顯示圖表。

  myChart.setOption(option);

這樣，你就可以在瀏覽器上看到一個柱狀圖出來啦。
滑鼠懸浮可以看到X軸和Y軸對應的資料
這裡寫圖片描述

柱狀圖和折線圖可以很好的切換：只需要改一下series.type:line
這裡寫圖片描述

如果是餅圖的話，就不要X Y 軸了。 type值改成: ‘pie’,
這裡data屬性值不像入門教程裡那樣每一項都是單個數值，而是一個包含 name 和 value 屬性的物件，ECharts 中的資料項都是既可以只設成數值，也可以設成一個包含有名稱、該資料圖形的樣式配置、標籤配置的物件
data的資料需要換成

data: 
                [{value:30, name:'襯衫'},
                {value:20, name:'羊毛衫'},
                {value:36, name:'雪紡衫'},
                {value:10, name:'褲子'},
                {value:10, name:'高跟鞋'},
                {value:20, name:'高跟鞋'}]

這裡的箭頭所指的藍色塊刪除

這時即顯示成餅狀圖：
這裡寫圖片描述
同時ECharts 中的餅圖也支援通過設定 roseType 顯示成南丁格爾圖。
想個性化點就在series上面新增一個屬性

roseType: 'angle'

即變為這裡寫圖片描述
南丁格爾圖會通過半徑表示資料的大小。
陰影的配置

ECharts 中有一些通用的樣式，諸如陰影、透明度、顏色、邊框顏色、邊框寬度等，這些樣式一般都會在系列的 itemStyle 裡設定。
陰影的樣式可以通過下面幾個配置項設定：

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

加上陰影后的效果

這裡寫圖片描述
這裡itemStyle的normal選項是正常展示下的樣式，
實際還有emphasis選項，emphasis是滑鼠 hover 時候的高亮樣式。這個示例裡是正常的樣式下加陰影，但是可能更多的時候是 hover 的時候通過陰影突出。

我們加emphasis試一試

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

顯示效果
這裡寫圖片描述
深色背景和淺色標籤

如果我們需要改背景色和文字顏色。
直接在 option 下設定 backgroundColor背景色，textStyle文字色lineStyle引導線即可
效果圖如下
這裡寫圖片描述
同樣，label和labelLine的樣式也有normal和emphasis兩個狀態。
扇形的顏色也是在 itemStyle 中設定：（能讀到這裡的早已經不用我說明了，只是懶得自己碼程式碼，但是。。。我 (｡･∀･)ﾉﾞ將簡寫了）

itemStyle: {
    normal: {
        // 設定扇形的顏色
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

ECharts 中每個扇形顏色的可以通過分別設定 data 下的資料項實現。

data: [{
    value:400,
    name:'搜尋引擎',
    itemStyle: {
        normal: {
            color: 'c23531'
        }
    }
}, ...]

明暗度的變化，有一種更快捷的方式是通過 visualMap 元件將數值的大小對映到明暗度。

visualMap: {
    // 不顯示 visualMap 元件，只用於明暗度的對映
    show: false,
    // 對映的最小值為 80
    min: 80,
    // 對映的最大值為 600
    max: 600,
    inRange: {
        // 明暗度的範圍是 0 到 1
        colorLightness: [0, 1]
    }
}

非同步資料載入和更新

// 非同步載入資料
myChart.showLoading();// loading 的動畫來提示使用者資料正在載入。
$.get('data.json').done(function (data) {
    // 填入資料
    myChart.hideLoading();// 使用者資料請求到後，loading動畫消失
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根據名字對應到相應的系列
            name: '銷量',
            data: data.data
        }]
    });
});

下一篇將深入研究更炫的效果
這裡寫圖片描述

ECHART基本使用，折線圖，柱狀圖，散點圖，餅圖，盒形圖5分鐘上手

ECHART基本使用，折線圖，柱狀圖，散點圖，餅圖，盒形圖5分鐘上手

vue專案中使用Echarts 動態更改圖表資料， Vue 折線圖、柱狀圖等圖表動態重新整理，

Vue+echart折線圖和柱狀圖

echarts柱狀圖與中國地圖聯動，滑鼠移入柱狀圖，地圖響應地顯示資料

一點點前端程式碼，使用ECharts插入柱狀圖

iOS 折線圖、柱狀圖、扇形圖封裝

Echart 帶坐標軸帶圖標的柱狀圖

數據輸入——生成你需要的echart圖(堆積柱狀圖、扇形圖、嵌套環形圖)

使用Echarts幾分鐘制作出折線圖、餅圖、柱狀圖等

echarts相關屬性設定（2）--折線圖和柱狀圖的結合使用

PHP jpgraph庫的配置及生成統計圖表:折線圖、柱狀圖、餅狀圖等

運用canvas繪折線圖和柱狀圖

echarts中折線圖、柱狀圖之間的轉換

用g.raphael.js高速繪製餅圖、柱狀圖、點狀圖、折線圖（下）

Echarts例項1-折線、餅圖、柱狀圖混搭

JFreeChart生成混合圖（柱狀圖折線圖）並插入excel中

OpenGL（十七）繪製折線圖、柱狀圖、餅圖

echarts的折線圖、柱狀圖在移動端橫屏展示

echarts多條折線圖和柱狀圖實現

android自定義統計折線圖和柱狀圖組合

ECHART基本使用，折線圖，柱狀圖，散點圖，餅圖，盒形圖5分鐘上手

相關推薦