快捷導(dǎo)航

Echarts讀取動(dòng)態(tài)數(shù)據(jù)完整代碼

更新時(shí)間：2023年10月12日 11:32:32 作者：十八只兔

這篇文章主要給大家介紹了關(guān)于Echarts讀取動(dòng)態(tài)數(shù)據(jù)的相關(guān)資料,使用Echarts畫(huà)圖時(shí),數(shù)據(jù)一般不是靜態(tài)寫(xiě)死的,而是通過(guò)后端接口動(dòng)態(tài)獲取的,需要的朋友可以參考下

前言

使用Echarts畫(huà)圖時(shí)，數(shù)據(jù)一般不是靜態(tài)寫(xiě)死的，而是通過(guò)后端接口動(dòng)態(tài)獲取的，因此本文結(jié)合官網(wǎng)提供的demo來(lái)演示Echarts怎么獲取動(dòng)態(tài)數(shù)據(jù)

Echarts讀取動(dòng)態(tài)數(shù)據(jù)

ECharts 中實(shí)現(xiàn)異步數(shù)據(jù)的更新很簡(jiǎn)單，在圖表初始化后不管任何時(shí)候只要通過(guò) jQuery 等工具異步獲取數(shù)據(jù)后通過(guò) setOption 填入數(shù)據(jù)和配置項(xiàng)就行。

step1:創(chuàng)建好相關(guān)的工程文件

工程文件目錄如下：

js文件夾：存放的是echarts和jquery的相關(guān)文件，有了這些文件我們才能使用echarts和jquery的功能：

data文件夾：存放json格式的數(shù)據(jù)文件，該文件用來(lái)模擬我們從后端獲取的數(shù)據(jù)，json文件的內(nèi)容如下：

step2:ECharts綁定數(shù)據(jù)

ECharts 綁定數(shù)據(jù)的方式有兩種：

（1）方法一：

直接異步讀取數(shù)據(jù)的同時(shí)設(shè)置好圖表參數(shù)和數(shù)據(jù)綁定

核心代碼：可以根據(jù)實(shí)際情況按照下方標(biāo)注的地方進(jìn)行修改：

結(jié)果：

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <div id="main" style="width: 400px;height:400px;border: 1px solid gray"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        $.get('data/data.json').done(function(data) {
            myChart.setOption({
                title: {
                    text: '異步數(shù)據(jù)加載示例'
                },
                tooltip: {},
                legend: {},
                xAxis: {
                    data: data.categories
                },
                yAxis: {},
                series: [
                    {
                        name: '銷(xiāo)量',
                        type: 'bar',
                        data: data.values
                    }
                ]
            });
        });
    </script>
</body>
</html>

（2）方法二：

先設(shè)置完其它的樣式，顯示一個(gè)空的直角坐標(biāo)軸，然后獲取數(shù)據(jù)后填入數(shù)據(jù)

核心代碼：可以根據(jù)實(shí)際情況按照下方標(biāo)注的地方進(jìn)行修改：

結(jié)果:

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <div id="main" style="width: 400px;height:400px;border: 1px solid gray"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main')); 
        // 顯示標(biāo)題，圖例和空的坐標(biāo)軸
        myChart.setOption({
            title: {
                text: '異步數(shù)據(jù)加載示例'
            },
            tooltip: {},
            legend: {
                data: ['銷(xiāo)量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '銷(xiāo)量',
                    type: 'bar',
                    data: []
                }
            ]
        });      
        // 異步加載數(shù)據(jù)
        $.get('data/data.json').done(function(data) {
            // 填入數(shù)據(jù)
            myChart.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [
                    {
                        // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
                        name: '銷(xiāo)量',
                        data: data.values
                    }
                ]
            });
        });           
    </script>
</body>
</html>

總結(jié)

到此這篇關(guān)于Echarts讀取動(dòng)態(tài)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Echarts讀取動(dòng)態(tài)數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: