溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2021-08-05 22:26:07 來(lái)源：億速云 閱讀：1584 作者：chen 欄目：大數(shù)據(jù)

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

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

步驟：

1、下載echarts

2、編寫(xiě)網(wǎng)頁(yè)代碼

1、下載echarts

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

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

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

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

點(diǎn)擊不同的實(shí)例，我們可以看到頁(yè)面分兩個(gè)部分，一個(gè)是實(shí)例的核心代碼，一個(gè)是實(shí)例的效果。代碼的修改可以實(shí)時(shí)反饋到效果界面。所以我們可以先在這個(gè)界面上進(jìn)行調(diào)試，看圖標(biāo)是否能夠滿(mǎn)足我們的功能需求。

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

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

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

當(dāng)然，簡(jiǎn)單一點(diǎn)，我們只需要下載echart.js這個(gè)javascript文檔。這里官網(wǎng)任何一個(gè)實(shí)例界面都是應(yīng)用了這個(gè)文檔了的。所以我們?cè)谌魏我粋€(gè)實(shí)例界面，按F12，切換到瀏覽器界面調(diào)試模式。

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

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

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

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

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

但是上面復(fù)制粘貼的方式會(huì)出現(xiàn)一個(gè)編碼格式錯(cuò)誤的問(wèn)題。建議瀏覽器有下載功能的，新建一個(gè)下載鏈接，然后把地址復(fù)制進(jìn)去。或者通過(guò)IE，IE默認(rèn)是下載的方式。

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

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

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

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

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

2、程序編碼

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

那么我們?cè)趙eb里面新建一個(gè)html文檔，在文檔中寫(xiě)入以下代碼：

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

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

感謝各位的閱讀，以上就是“怎么使用Echarts實(shí)現(xiàn)數(shù)據(jù)的可視化”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么使用Echarts實(shí)現(xiàn)數(shù)據(jù)的可視化這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手