使用echarts顯示圖表

使用echarts圖表的類型很多，如散點圖，折線圖，柱狀圖，地圖，餅圖，雷達圖，熱力圖。。。。。。

1.首先要引入echarts庫，在echarts官網可以下載http://echarts.baidu.com/

2.引入echarts庫，<script src=".eCharts.js"></script>，

爲圖表開闢一塊顯示的區域，<div id="chartmainLine" style="width:600px; height: 400px;"></div>

3.配置圖表參數

function setChartMainLine() {
    var option = {
        title: {
            text: 'ECharts 數據統計'
        },
        tooltip: {},
        legend: {
            data: ['用戶來源']
        },
        xAxis: {
            data: ["Android", "IOS", "PC", "Ohter"]
        },
        yAxis: {},
        series: [{
            name: '訪問量',
            type: 'line',
            data: [500, 200, 360, 100]
        }, {
            name: '訪問量',
            type: 'line',
            data: [200, 100, 160, 80]
        }]
    };
    var myChart = echarts.init(document.getElementById('chartmainLine'));
    myChart.setOption(option);
}

這樣就能在我們的div塊中顯示我們的圖表了，其中option裏面 key值都是echarts的關鍵字，不可更改

以上內容經過真實校驗，詳情：https://github.com/webPageDev/Demo