Echarts的配置與使用

最近因爲項目需要用到圖形,所以在網上搜了一下,發現echarts很實用,我們做網站/應用的時候,很多需要數據統計報表,接下來就分享一下我的第一個echarts

首先你需要下載開發包,建議去官網http://echarts.baidu.com/下載,選擇需要的版本,開發環境建議選擇源代碼版本,該版本包含了常見的警告和錯誤提示。
1、下載ECharts源碼,我這裏下載的是2.2.7版本的,如果不知道哪下載,百度一下ECharts,然後就能看到官網了。
2、下載後,可以看到build文件夾,如果不是爲了調測,可以直接使用dist文件夾下的。echarts.js和echarts-all.js區別在於後者已經把map.js打包進去了。如果網站上不用map,應該使用echarts.js,這樣因爲文件小能減少加載時間。
這裏寫圖片描述
3、把build下的文件拷貝到你想要放的工程目錄中,我拷貝進來後把dist改成了echarts
這裏寫圖片描述
html代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
    <script src="./echarts/echarts-all.js"></script>
</head>

<body>
 <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
            title : {
                text : 'ECharts 入門示例'
            },
            tooltip : {},
            legend : {
                data : [ '銷量' ]
            },
            xAxis : {
                data : [ "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" ]
            },
            yAxis : {},
            series : [ {
                name : '銷量',
                type : 'bar',
                data : [ 5, 20, 36, 10, 10, 20 ]
            } ]
        };

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

</html>

效果圖如下:
這裏寫圖片描述
第一個echarts就完成啦。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章