Echarts數據可視化：基礎篇（1）—— 集成Echarts

項目地址

介紹

大數據可視化做爲前端開發的一個子方向，工做內容大可能是將結構化的數據轉換爲圖表。例如柱狀圖、條形圖、餅圖、地圖等組件。組成咱們常見的炫酷的大屏。這些圖表的渲染通常是基於canvas或者svg，秉承不重複造輪子的原則，（固然也造不出來）使用開源可視化庫就是比較必須的了。Echarts做爲國內的優秀可視化庫，兼容大部分場景，很容易進行定製化開發，因此選擇使用Echarts，如下爲網易有數-大屏示例

開發環境

• vue
• webpack
• npm

引入

• 1. 安裝echarts依賴：npm install echarts --save
• 2. 設置dom，初始化實例

let chart = echarts.init(this.$refs.chart);
複製代碼

• 3. 繪製圖表

let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
}
chart.setOption(option);
複製代碼