圖表工具--- ECharts.js學習（一）簡單入門

時間 2020-05-11

標籤圖表工具 echarts.js echarts 學習簡單入門欄目 JavaScript 简体版

原文原文鏈接

ECharts.js學習（一）

在項目開發的時候，在前端的數據須要用圖表的形式展現。網上搜索了一下，發現有幾種統計圖庫。具體有哪幾種能夠看：javascript

1、ECharts.js的特色

這也是一款基於HTML5的圖形庫。圖形的建立也比較簡單，直接引用Javascript便可。使用這個庫的緣由主要有三點，一個是由於這個庫是百度的項目，並且一直有更新，目前最新的是EChart 3；第二個是這個庫的項目文檔比較詳細，每一個點都說明的比較清楚，並且是中文的，理解比較容易；第三點是這個庫支持的圖形很豐富，而且能夠直接切換圖形，使用起來很方便。前端

先用個小案例java

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
<!DOCTYPE html>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['銷量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["蘋果","三星","小米","華爲","oppo","酷派"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"銷量",
                            "type":"bar",
                            "data":[100, 120, 150, 160, 220, 80]
                        }
                    ]
                };
        
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

顯示效果：echarts

這個是我在CEharts官方文檔的小案例：dom

連接：5分鐘上手寫ECharts的第一個圖表post

官方文檔：ECharts官方文檔學習

2、CEharts進行步驟講解

第一步，引用Js文件ui

<script type="text/javascript" src="js/echarts.js"></script>

js文件有幾個版本，能夠根據實際須要引用須要的版本。echarts.js下載連接url

第一步，準備一個放圖表的容器

<div id="main" style="width:600px; height: 400px;"></div>

第三步，設置參數，初始化圖表

<script type="text/javascript">
        //指定圖標的配置和數據
        var option = {
            title:{
                text:'數據統計'
            },
            tooltip:{},
            legend:{
                data:['手機銷量']
            },
            xAxis:{
                data:["蘋果","小米","華爲","三星"]
            },
            yAxis:{

            },
            series:[{
                name:'銷量',
                type:'line',
                data:[800,1000,1300,400]
            }]
        };
        //初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

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

效果圖：不清楚是由於我縮小網頁了

餅圖和折線圖、柱狀圖有一點區別。主要是在參數和數據綁定上。餅圖沒有X軸和Y軸的座標，數據綁定上也是採用value 和name對應的形式。

 var option = {
            title:{
                text:'ECharts 數據統計'
            },            
            series:[{
                name:'訪問量',
                type:'pie',    
                radius:'60%', 
                data:[
                    {value:1000,name:'蘋果'},
                    {value:1200,name:'小米'},
                    {value:1800,name:'華爲'},
                    {value:400,name:'三星'}
                ]
            }]
        };

效果截圖

有關最基礎的就講到這裏，下篇，我將如何經過後臺數據完成圖表。

想的太多，作的太少，中間的落差就是煩惱，要麼去作，要麼別想 少尉【20】