echarts畫圖實例講解

前兩天分享了一個項目(http://hyuhan.com/2016/11/17/A-data-display-platform/)，裏面用到了echarts（一個純Javascript的圖表庫）來畫圖，項目中用到了它的字符雲圖，地圖，柱狀圖，餅圖等，今天就給你們分享一些一些實現的細節。建議先去看看五分鐘上手Echarts再來看這篇博客。

地圖

Echarts百度地圖擴展，能夠在百度地圖上進一步展示點圖，線圖，熱力圖等，我主要在百度地圖上展示的是氣泡圖。

引入百度地圖

• 首先引入百度地圖的jssdk，須要使用在百度地圖開發者平臺申請的ak

• 而後引入Echarts

• 最後引入百度地圖擴展bmap（已經打包在echarts包中）

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
<script src="echarts/dist/echarts.min.js"></script>
<script src="echarts/dist/extension/bmap.min.js"></script>

設置參數

百度地圖引入以後，主要就是設置參數了，以我畫的最喜好建築分佈圖爲例:

option = {
    // 設置標題樣式
    title: {
        // 標題文本
        text: '學生最喜好學校建築分佈',
        // 標題離容器左側的距離，center表示水平居中
        left: 'center',
        top: 15, 
        // 標題文本的樣式設置
        textStyle: {
            fontSize: 24,
            fontFamily: 'Helvetica',
            fontWeight: 400
        }
    },
    // 提示框設置爲由數據項圖形觸發
    tooltip: {
        trigger: 'item'
    },
    // 添加保存爲圖片和數據視圖工具工具欄
    toolbox: {
        feature: {
            saveAsImage: {},
            dataView: {}
        },
        right: 15,
        top: 10
    },
    // 加載bmap組件
    bmap: {
        // 百度地圖中心經緯度（設置爲你須要的地圖中心便可）
        center: [114.427877, 30.517249],
        // 百度地圖縮放比例（按需配置）
        zoom: 15,
        // 是否開啓拖拽縮放
        roam: true,
        // 設置百度地圖樣式（可參考http://developer.baidu.com/map/jsdevelop-11.htm）
        mapStyle: {
            style: 'light'
        }
    },

    series: [
        {
            name: '最喜好建築',
            // 圖標類型設置爲氣泡圖
            type: 'scatter',
            // 設置座標系爲前面提到的bmap
            coordinateSystem: 'bmap',
            // 數據
            data: [{}],
            // 氣泡標記大小
            symbolSize: ,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(11, 110, 72, 1)'
                }
            }
        },
    ]    
}

另外給你們推薦一個百度的拾取座標系統，挺好用的。

字符雲圖

以前一直以爲字符雲是個很酷炫的東西，因此此次也就強行把它用上了，嘿嘿。裏面的數據是我根據羣聊記錄分析出來的高頻詞彙。Echarts的字符雲是基於wordcloud2.js的。

引入字符雲

直接下載js文件並引入

<script src="echarts.min.js"></script>
<script src="echarts-wordcloud.min.js"></script>

webpack引入

npm install echarts-wordcloud

import echarts from 'echarts'
import 'echarts-wordcloud'

設置參數

option = {
    title: {
        text: title,
        textStyle: {
            fontSize: 26,
            fontFamily: 'Helvetica',
            fontWeight: 400
        },
        left: 'center',
        top: 20
    },
    toolbox: {
        feature: {
            saveAsImage: {},
            dataView: {}
        },
        right: 20,
        top: 20
    },
    series: [{
        // 設置圖表類型爲'wordCloud'
        type: 'wordCloud',
        // 設置cloud的形狀
        shape: 'cardioid',
        // shape: 'pentagon',
        // shape: 'circle',
        left: 'center',
        top: 30,
        width: '75%',
        height: '80%',
        // 設置字符字體大小的範圍
        sizeRange: [12, 75],
        // 設置字符旋轉的角度範圍
        rotationRange: [-90, 90],
        rotationStep: 45,
        // 字符間距
        gridSize: 8,
        // 字符字體樣式
        textStyle: {
            normal: {
                fontFamily: 'Microsoft Yahei',
                fontWeight: 'bold',
                // 字符字體顏色用一個函數隨機設置
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')'
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
            }
        },
        // data必選包含name和value選項,name即爲顯示的字符，value越大字符字體大小越大
        data: [{
            name: '',
            value: ,   
            textStyle: {
                normal: {},
                emphasis: {}
            }
        },{...},...]
    }]   
}

畫熱力圖

根據班級羣聊數據分析出來的同窗之間親密度，思前想後最後決定用熱力圖。熱力圖不須要額外的插件，直接講參數設置。

參數設置

option = {
    title: {
        text: '通訊1502班同窗關係密切度分析圖（僅經過羣聊數據分析）',
        // 子標題
        subtext: '數值越大二者越親密',
        subtextStyle: {
            fontSize: 16
        },
        left: 'center',
        top: 4,
        textStyle: {
            fontSize: 22,
            fontFamily: 'Helvetica',
            fontWeight: 400
        }
    },
    tooltip: {
        trigger: 'item'
    },
    toolbox: {
        feature: {
            saveAsImage: {},
            dataView: {}
        },
        right: 15
    },
    grid: {
        height: '78%',
        bottom: '14%'
    },
    // x軸設置
    xAxis: {
        // 座標軸爲類目軸
        type: 'category',
        // 數組，x軸顯示的刻度標籤
        data: [...],
        // 刻度標籤相關設置
        axisLabel: {
            // 若是水平放不下，能夠旋轉
            rotate: 60,
            // 刻度標籤顯示間隔
            interval: 0
        },
        splitArea: {
            show: true
        }
    },
    yAxis: {
        type: 'category',
        data: [...],
        splitArea: {
            show: true
        }  
    },
    // 視覺映射組件，也就是項目展現中熱力圖最小面現實的那個組件
    visualMap: {
        // 組件容許的最小值和最大值
        min: 0,
        max: 100,
        calculable: true,
        // 組件高度
        itemheight: 300,
        // 組件水平放置
        orient: 'horizontal',
        left: 'center',
        bottom: '3%'
    },
    series: [
        {
            name: '親密度',
            // 圖標類型爲heatmap
            type: 'heatmap',
            // 二維數組，每一個數據項都是一個一維的數組，前兩個值表示直角座標系上的x,y，第三個至表示大小。
            data: [[0,0,2],[]...],
            label: {
                normal: {
                  show: true
                }
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

餅圖和條形圖比較基礎，能夠參考官方實例,建議仔細閱讀官方配置文檔，能夠本身畫出各類有趣的圖形來。