Echart - 最好最強大效果最豐富的可視化圖表插件

# 官網
http://echarts.baidu.com/

# demo
http://echarts.baidu.com/gallery/index.html

 

Echart

npm install echarts --save  

 

demo1 :  從簡單的柱狀圖開始

核心知識點【setOption參數介紹】：http://echarts.baidu.com/option.html#title

var echarts = require('echarts');

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

myChart.setOption({
    title: { text: 'ECharts 入門示例' },
    tooltip: {},
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

 

 

demo2 ： 異步數據加載和更新

ECharts 由數據驅動，數據的改變驅動圖表展現的改變，因此動態數據的實現也變得十分簡單。

var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
    title: {
        text: '異步數據加載示例'
    },
    tooltip: {},
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: []
    }]
});
setTimeout(function () {
    myChart.hideLoading();
    // 填入數據
    myChart.setOption({
        xAxis: {
            data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
        },
        series: [{
            // 根據名字對應到相應的系列
            name: '銷量',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
},2000);