怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

這篇文章主要講解了“怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化”吧！

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站建設、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的澄邁網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

數(shù)據(jù)可視化的方式有很多種，最簡單的是用一些輕量級的圖表框架，比如echarts等。下面我們講下如何使用echarts來實現(xiàn)數(shù)據(jù)的靜態(tài)可視化。

步驟：

1、下載echarts

2、編寫網(wǎng)頁代碼

1、下載echarts

echarts要實現(xiàn)簡單的可視化，其實只需要下載它的js包，登錄進官網(wǎng)，點擊實例：

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

我們可以看到，這里有很多實例，各種各樣的，我們可以根據(jù)自己的需要進行實例的選擇。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

點擊不同的實例，我們可以看到頁面分兩個部分，一個是實例的核心代碼，一個是實例的效果。代碼的修改可以實時反饋到效果界面。所以我們可以先在這個界面上進行調試，看圖標是否能夠滿足我們的功能需求。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

我們要下載echarts組件，可以直接從官網(wǎng)上下載組件包，包含很多復雜的插件。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

當然，簡單一點，我們只需要下載echart.js這個javascript文檔。這里官網(wǎng)任何一個實例界面都是應用了這個文檔了的。所以我們在任何一個實例界面，按F12，切換到瀏覽器界面調試模式。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

上圖所示，我們看到本界面使用的是echarts.min.js這個文件 比echarts.js的區(qū)別就是，min代表的是壓縮過后的，體積會小很多，而且不方便閱讀，要想閱讀比較規(guī)整的代碼的，可以找到echarts.js來閱讀。

雙擊上面的src路徑，復制這個js的路徑，然后復制到瀏覽器的地址欄。

有些瀏覽器會直接采用打開這個js文件的方式。如下圖所示，如果是這樣的話，你把這個瀏覽器內容的界面全選，復制粘貼到一個新建的js文檔里面就可以了。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

但是上面復制粘貼的方式會出現(xiàn)一個編碼格式錯誤的問題。建議瀏覽器有下載功能的，新建一個下載鏈接，然后把地址復制進去?；蛘咄ㄟ^IE，IE默認是下載的方式。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

這樣可以避免在復制粘貼的過程中出現(xiàn)編碼格式錯誤的問題。

保存的時候，保存到一個非中文并且非空格的路徑里面，避免系統(tǒng)識別出現(xiàn)問題。

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

2、程序編碼

我們需要在瀏覽器里面顯示echarts組件，有兩個必須的要注意的，一個是你要在瀏覽器里面預先提供有div，這個div是要顯示echarts各種組件的。另外一個就是用javascript或jquery來創(chuàng)建一個echarts對象，然后設置數(shù)據(jù)源，然后將數(shù)據(jù)源和echarts對象綁定。。

那么我們在web里面新建一個html文檔，在文檔中寫入以下代碼：

怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化

<!DOCTYPE html>
<html>
<head>
	<!--
    作者：劉日輝
    作用：教學演示
    時間：2020-9-23
	-->
    <!-- 設置瀏覽器的編碼，如果中文還是亂碼的，可以把下面的utf-8改成gb2312-->
    <meta charset="utf-8">
    <title>第一個 ECharts 實例</title>
    <!-- 導入echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 為ECharts準備一個具備大?。▽捀撸┑腄om -->
    <div id="main" ></div>
    <script type="text/javascript">
        // 基于準備好的dom，初始化echarts實例，通過id獲取html里面的div對象
        var myChart = echarts.init(document.getElementById('main'));
 
        // 配置echarts組件的數(shù)據(jù)源，指定圖表的配置項和數(shù)據(jù)
        var option = {
            title: {
                text: '第一個 ECharts 實例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

感謝各位的閱讀，以上就是“怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化”的內容了，經(jīng)過本文的學習后，相信大家對怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

當前題目：怎么使用Echarts實現(xiàn)數(shù)據(jù)的可視化
當前地址：http://muchs.cn/article2/gehoic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、App設計、面包屑導航、、定制網(wǎng)站、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)